JQuery - plot time series data from php using Flot Charts

Question

I get data from database which is formatted using php and returned as JSON response for an Ajax call. Every thing works fine and data is plotted. But if X-Axis contains date then nothing is plotted. I submit a starting and an end date using Ajax. Here is the data, I generate as response:

[
  {
    "data": [
      [
        "2014-11-02",
        5
      ],
      [
        "2014-11-04",
        12
      ],
      [
        "2014-11-07",
        2
      ],
      [
        "2014-11-13",
        21
      ]
    ],
    "label": "Label1",
    "color": 8
  }
]

My x-Axis:

xaxes : [ {
            mode : "time",
            timeformat : "%y-%m-%d",
            color : "black",
            axisLabel : "Date",
            axisLabelUseCanvas : true,
            axisLabelFontSizePixels : 12,
            axisLabelFontFamily : 'Verdana, Arial',
            axisLabelPadding : 10
        }],

I followed the tutorial : http://www.jqueryflottutorial.com/how-to-make-jquery-flot-time-series-chart.html but cannot figure out how to do it with when using data from ajax response.

Also, how can I divide the ticks according to start and end dates automatically?

Show your $.plot(/* your code */)

user1477388
– user1477388

2014-11-03 18:03:35 +00:00
Commented Nov 3, 2014 at 18:03 — user1477388
– user1477388, Commented Nov 3, 2014 at 18:03
@user1477388 added my x-axis code

adnan kamili
– adnan kamili

2014-11-03 18:14:13 +00:00
Commented Nov 3, 2014 at 18:14 — adnan kamili
– adnan kamili, Commented Nov 3, 2014 at 18:14

user1477388 · Accepted Answer · 2014-11-03 18:05:19Z

1

See my comment above. First glance, looks like you need to add this property to your xaxis object:

timeformat:"%y/%m/%d"

answered Nov 3, 2014 at 18:05

user1477388

21.6k35 gold badges152 silver badges277 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Raidri · Accepted Answer · 2014-11-05 14:50:54Z

1

The date in the JSON needed to be a Date object which flot expects in time mode. So following worked for me: (converting string date to Date object before passing to flot):

var graph_json = $.parseJSON(data);

var j, i;
for(j=0;j<graph_json.length;j++){
    for(i=0;i<graph_json[j].data.length;i++){
        graph_json[j].data[i][0] = new Date(graph_json[j].data[i][0]);
    }
}

edited Nov 5, 2014 at 14:50

Raidri

17.7k11 gold badges69 silver badges70 bronze badges

answered Nov 3, 2014 at 19:21

adnan kamili

9,5559 gold badges76 silver badges136 bronze badges

Collectives™ on Stack Overflow

JQuery - plot time series data from php using Flot Charts

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related