javascript - How plot json data -

i'm getting every 4 secs json data this:

{    "time": "04:49:07 am",    "milliseconds_since_epoch": 1375246147254,    "date": "07-31-2013" } 

i'm processing in order array this:

[[1375230673948, 0.6443498175195954]]

(the first data js timestamp)

i'm trying plot these data, on real time using flot:

function draw() {     console.log('draw called');     this.array = gettimearray();     $.plot(     $("#placeholder"), [         {         label: "test data",         data: this.array,         lines: {             show: true,             fill: true,             fillcolor: "rgba(249, 28, 61,0.3)",             linewidth: 2.5         },         }     ], {         xaxis: {             mode: "time",             timeformat: "%h:%m"         },         yaxis: {             min: -2         }     }); }  function gettimearray(flg) {      var array = [],     d = new date(),     tz = d.gettimezoneoffset();     jsonurl = 'http://date.jsontest.com/'     var array2 = []     $.getjson(jsonurl, function(data) {         var = 0;             $.each(data, function(key, val) {                 if (typeof val === 'number'){                     d = new date(val - 5 * 60 * 1000);                     array2.push([d.gettime()- tz*60*1000,math.random()]);                     console.log(array2)                     i++;                 }             });      });      (var = 9; >= 0; i--) {         d = new date(d.gettime() - 5 * 60 * 1000);         array.push([d.gettime() - tz*60*1000, math.random()]);     }     return array; }  draw(); setinterval(draw, 4000); 

http://jsfiddle.net/gkrpx/28/

but can't yet, please me?

i need plot time series values getting data json.maybe using lib reached more easily, welcome..

the problem code $.getjson call asynchronous, if try return array2 (in jsfiddle), empty list. need use either success callback or .done() method draw plot, after getting json data server:

$.getjson(jsonurl, function (jdata) {     var = 0;     $.each(jdata, function (key, val) {         if (typeof val === 'number') {             d = new date(val - 5 * 60 * 1000);             if (array.length > 9) {                 array.shift();             }             array.push([d.gettime() - tz * 60 * 1000, math.random()]);             i++;         }     });  }).done(function (jdata) {     data[0]["data"] = array;     $.plot($("#placeholder"), data, options); }); 

you can see full jsfiddle. keep pushing array , shift when length gets above 9, illustrate.

you can use setdata , draw methods of flot plot avoid drawing plot every time, that's different issue.