javascript - Plot real time data into line chart -

i have data collected in real time want plot line charts.

i plot data received in last 60 calls line chart(pause plotting when not pulling data), each name:value pair gets 1 chart(so there 6 charts in case). of course need update charts every second or every time httpget() gets called.

i not sure how proceed next step after have got response(the data plot) server...the end looking pretty "cpu usage history" style.

here javascript file collecting data aggregation server:

//httpget() adopted so/247483 function httpget() {     var xmlhttp = new xmlhttprequest();     xmlhttp.open( "get", "foo.com/sensordata", false );     xmlhttp.send( null );     console.log(xmlhttp.responsetext);     return xmlhttp.responsetext; }  var interval;  //this called button in html file function start(btn) {     if(btn.value=="start"){         interval = setinterval(httpget, 1000);         btn.value="stop";     } else {         btn.value="start";         clearinterval(interval);     } } 

so clicking "start" button start making requests data every 1 second. server returns data in json format, example output console:

{     "time":"2015/06/04 18:35:39",     "sensora":{"value1":0.34804,"value2":-0.39175,"value3":-0.61718},     "sensorb":{"value1":516,"value2":1,"value2":2103} } 

thank you!

i've made this demo (be sure click on start feed button!) uses zingchart. in callback request, loop through data , put right format zingchart, when it's scrubbed, use modify method set values attribute in scale-x, takes array of unix time values in milliseconds, , setseriesvalues method update data in chart.

for(var = 0; < 6; i++){     zingchart.exec('mychart','modify',{         update:false,         data:{             "scale-x":{                 "values":dataobj.date             }         }     });     zingchart.exec('mychart','setseriesvalues',{         update:false,         graphid:i,         values:[dataobj[object.keys(dataobj)[(i + 1)]]]     }); } zingchart.exec('mychart','update'); 

since i'm calling modify , setseriesvalues bunch of times in row, set update option on both false, queues changes, has been queued being pushed chart when update called.

(yeah, fake data here -- i'm alternating between 2 different json files, should idea.)