Question

I am trying to plot some data in Flot that should display x-axis in time mode. The flot reference API doesn’t indicate that minTickSize can accept “week” as a unit, so I have specified the unit as “day” with value of 7:

  minTickSize: [7, "day"],

This displays the tick size as 7 days apart in some ticks and about 8-9 days apart in some ticks. Here is an example showing the inconsistent ticks: http://jsfiddle.net/UEePE/583/

I know that the chart is also not plotting the simple line I am expecting. Still working on trying to figure out why. When I remove all options from xaxis except the mode:time, then it seems to work, but not when I add the other options.

Any help would be appreciated on how to make Flot add ticks 7 days/1 week apart and how to make the chart actually plot a line in this case.

Thank you!

Answer 1

First up. Flot’s data argument is an array of series. Each series is an array of points, each point is an array of two values: x and y. So your data should look like:

var data = [ [
    [1301634000000, 315.71], //Apr 1, 2011
    [1302238800000, 209.21], //Apr 8, 2011
    [1302843600000, 420.36], //Apr 15
    [1303448400000, 189.86], //4/22
    [1304053200000, 314.93], //4/29
    [1304658000000, 279.71], //5/6
    [1305262800000, 313.34], //5/13
    [1305867600000, 114.67], //5/20
    [1306472400000, 315.58] //5/27
] ];

Next Flot is converting your [7, “day”] to [0.25, “month”]. There are only so many values for minTickSize it’ll accept (search for “spec” in the source code).

That means you will have to supply the tick values yourself. The easy way is to take your x-axis values from your first data series, create a ticks array, and pass that in to the xaxis hash:

var ticks = [];
for (var i = 0; i < data[0].length; i++) {
  ticks.push(data[0][i][0]); //corrected the missing closing bracket here..
}

Then

$.plot($("#placeholder"), data, {
  xaxis: {
    mode: "time",
    ticks: ticks,
    timeformat: "%m/%d",
    min: (new Date(2011, 2, 31)).getTime(),
    max: (new Date(2011, 4, 31)).getTime()
  },
  ..etc..