Search code examples
jqueryflot

Flot chart time xaxis series is off


The following flot chart example uses a time series and data for 12 months. Notice how the first element in the series (month #1) is plotted along the x-axis and does not have the correct label (it's blank). The second data value (month #2) is incorrectly labeled January, etc. The data format is provided in the link above, but a quick cut/paste below:

var data1 = [ [gd(2012, 0, 1), 1652.21], [gd(2012, 1, 1), 1742.14], [gd(2012, 2, 1), 1673.77], [gd(2012, 3, 1), 1649.69], [gd(2012, 4, 1), 1591.19], [gd(2012, 5, 1), 1598.76], [gd(2012, 6, 1), 1589.90], [gd(2012, 7, 1), 1630.31], [gd(2012, 8, 1), 1744.81], [gd(2012, 9, 1), 1746.58], [gd(2012, 10, 1), 1721.64], [gd(2012, 11, 1), 1684.76] ];

How should I change this so that the 12 data elements are correctly labeled from January - December, instead of Blank - November?

example of time series issue


Solution

  • I got the correct x-axis labels by changing the gd function to this:

    function gd(year, month, day) {
        return new Date(year, month + 1, day, -5).getTime();
    }
    

    The -5 subtracts my timezone offset. I am not sure why adding one to the month was necessary.

    Flot Line Chart with Correct X-Axis Lables