Search code examples
javascriptjquerylineflot

Change X Axis Range in JQuery Flot Line Chart

I would want to establish the range for the X-Axis to a year instead the quantity of points of the lines, I have the code: 

obj = {"TO EXPORT":{"color":"#d9534f","list":
                    [["2016","1","1"],
                     ["2016","2","6"]]},
       "RTG":{"color":"#5cb85c","list":
              [["2016","1","2"],
               ["2016","2","7"]]}}

seriesData = [];  
var minTime = new Date(2015-08).getTime();
var maxTime = new Date(2016-02).getTime();;
for (var prop in obj) {
    seriesData.push({label: prop, color:obj[prop].color, data:$.map(obj[prop].list, function(i,j){
         return [[new Date(i[0],i[1]-1).getTime(), i[2]]];
    })});    
}

// plot it!
$.plot('#flot-line-chart', seriesData, {
    xaxis: { mode: 'time', timeformat: '%Y-%m'}
});

If I plot it this way it would show just 2 points and that's good, but I would like to see the x Axis to expand at least 6 points like six months before.

I tried adding the min and max tags to the xaxis properties but it does not work right, like this:

xaxis: { mode: 'time', timeformat: '%Y-%m', min: minTime , max:maxTime}
Solution

  • new Date(2015-08) ist the same as new Date(2007) and returns a time of about 2 seconds after epoch. You have to give the parameter as string like new Date('2015-08') for it to work correctly with that date format.