I am having a difficult time getting my data to display inside of a Flot chart with the x-axis serving as the timeline. Here is an abbreviated copy of my JSON file:

{
  "label": "ServiceReport",
  "data": [[1328983200, 53], [1328986800, 53], [1328990400, 60]]
}

I've followed the tutorials on the Flot API page, as well as this one on stackoverflow

without any luck.

When modifying the x-axis, this gets the graph to display just fine, but the x-axis is blank.

xaxis: { mode: "time", minTickSize: [1, "hour"]}

This displays 8 through 8 values (not correct according to data file), but no graph data:

xaxis: { mode: "time", minTickSize: [1, "hour"],
                min: (new Date("2000/01/01")).getTime(),
                max: (new Date("2000/01/02")).getTime()

            }

Basically, I just want to display the hours in (really any format: 5:00, 5 AM, doesn't matter) on the x-axis, and have the y-axis correlate to the Service Values. There are 24 total timestamps in each data file (one day's worth of data).

Any help from you Flot and JavaScript/jQuery experts would be greatly appreciated!!!

I am having a difficult time getting my data to display inside of a Flot chart with the x-axis serving as the timeline. Here is an abbreviated copy of my JSON file:

{
  "label": "ServiceReport",
  "data": [[1328983200, 53], [1328986800, 53], [1328990400, 60]]
}

I've followed the tutorials on the Flot API page, as well as this one on stackoverflow

without any luck.

When modifying the x-axis, this gets the graph to display just fine, but the x-axis is blank.

xaxis: { mode: "time", minTickSize: [1, "hour"]}

This displays 8 through 8 values (not correct according to data file), but no graph data:

xaxis: { mode: "time", minTickSize: [1, "hour"],
                min: (new Date("2000/01/01")).getTime(),
                max: (new Date("2000/01/02")).getTime()

            }

Basically, I just want to display the hours in (really any format: 5:00, 5 AM, doesn't matter) on the x-axis, and have the y-axis correlate to the Service Values. There are 24 total timestamps in each data file (one day's worth of data).

Any help from you Flot and JavaScript/jQuery experts would be greatly appreciated!!!

• javascript
• jquery
• flot

1 Answer 1

First for the time to display, use :

 xaxis: { mode: "time",minTickSize: [1, "hour"],timeformat: "%H:%I:%S"}

I had the same problems with JSON data, caused by a bad JSON encoding file. Are you sure that your JSON file is really a JSON file ? Let's try something ike that to test it (with jquery for example) :

$.getJSON('yourJSONpage.php', 
    function(data) {
        testData=data.pop();
        alert(testData[0]);
});

Last point, your timestamp is not correct, correct time stamp is like that "1328983200000" not like that "1328983200", if you use PHP to generate your JSON data, make sure you do something like that for the dates :

$hour=mktime($h+1,$i,$s,$m,$d,$y)*1000;