Dates display incorrectly for weekly chart data in Flot

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!

Figured out why the chart is not displaying..I had the milliseconds added incorrectly. So the chart now displays correctly on my Development environment, but the chart still has the incorrect tick marks as they are not spaced exactly 7 days apart. The screenshot is at imageshack.us/photo/my-images/684/flotchart.png However, the chart at JSFiddle doesn't display at all. The Updated link is : jsfiddle.net/UEePE/583. Have also corrected in the original post above. — Harman

jmbucknall jmbucknall · Accepted Answer · 2011-07-05T22:07:05

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..

Dates display incorrectly for weekly chart data in Flot

1 Answers