Question

53

jQuery Flot line chart with month,year in x-axis

rated 0 times [ 57] [ 4] / answers: 1 / hits: 9078 / 10 Years ago, thu, march 20, 2014, 12:00:00

I'm trying to generate a graph with month,year in x-axis. Please check below for ex:

enter

The data for the graph is obtained via ajax. Please check below for sample json:

{total:[[2013,4,0],[2013,5,0],[2013,6,0],[2013,7,0],[2013,8,0],[2013,9,0],[2013,10,475],[2013,11,0],[2013,12,0],[2014,1,367],[2014,2,0],[2014,3,0]],critical:[[2013,4,0],[2013,5,0],[2013,6,0],[2013,7,0],[2013,8,0],[2013,9,0],[2013,10,0],[2013,11,0],[2013,12,0],[2014,1,1],[2014,2,0],[2014,3,0]],high:[[2013,4,0],[2013,5,0],[2013,6,0],[2013,7,0],[2013,8,0],[2013,9,0],[2013,10,20],[2013,11,0],[2013,12,0],[2014,1,20],[2014,2,0],[2014,3,0]],medium:[[2013,4,0],[2013,5,0],[2013,6,0],[2013,7,0],[2013,8,0],[2013,9,0],[2013,10,24],[2013,11,0],[2013,12,0],[2014,1,135],[2014,2,0],[2014,3,0]],low:[[2013,4,0],[2013,5,0],[2013,6,0],[2013,7,0],[2013,8,0],[2013,9,0],[2013,10,42],[2013,11,0],[2013,12,0],[2014,1,26],[2014,2,0],[2014,3,0]]}

In the above example [2013,4,0] should translate to x-axis: Apr 2013, y-axis: 0.

Can you please let me know how i can achieve this?

Thanks.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

saulthomasb

Add To Favorites

Follow

Total Points: 326

Total Questions: 98

Total Answers: 93

Location: Jordan

Member since Sun, Dec 26, 2021

2 Years ago

answered 10 Years ago rayvenc · Accepted Answer

Here's how I'd do it:

// your JSON

obj = {total:[[2013,4,0],[2013,5,0],[2013,6,0],[2013,7,0],[2013,8,0],[2013,9,0],[2013,10,475],[2013,11,0],[2013,12,0],[2014,1,367],[2014,2,0],[2014,3,0]],critical:[[2013,4,0],[2013,5,0],[2013,6,0],[2013,7,0],[2013,8,0],[2013,9,0],[2013,10,0],[2013,11,0],[2013,12,0],[2014,1,1],[2014,2,0],[2014,3,0]],high:[[2013,4,0],[2013,5,0],[2013,6,0],[2013,7,0],[2013,8,0],[2013,9,0],[2013,10,20],[2013,11,0],[2013,12,0],[2014,1,20],[2014,2,0],[2014,3,0]],medium:[[2013,4,0],[2013,5,0],[2013,6,0],[2013,7,0],[2013,8,0],[2013,9,0],[2013,10,24],[2013,11,0],[2013,12,0],[2014,1,135],[2014,2,0],[2014,3,0]],low:[[2013,4,0],[2013,5,0],[2013,6,0],[2013,7,0],[2013,8,0],[2013,9,0],[2013,10,42],[2013,11,0],[2013,12,0],[2014,1,26],[2014,2,0],[2014,3,0]]};



// reformat into the format flot likes

seriesData = [];    

for (var prop in obj) {

    // push in the series, the property is the label

    // use $.map to produce an array of [date, y-value]

    // the new Date(i[0],i[1]-1).getTime(), 

    // will give you the epoch time for the first day of that month/year

    seriesData.push({label: prop, data:$.map(obj[prop], function(i,j){

         return [[new Date(i[0],i[1]-1).getTime(), i[2]]];

    })});    

}



// plot it!

$.plot(#placeholder, seriesData, {

    xaxis: { mode: time, timeformat: %b %Y }

});

Fiddle here.

Edit: It was changed j by i[2] in order to display the data correctly plotted.