javascript - Add dynamic data to line chart from mysql database with highcharts -
i want add data point line chart ajax or json, must reload whole webpage show new data on chart. want show live data adding point these link:
www.highcharts.com/studies/live-server.htm
i try retrieve data mysql add on chart json nothing happened. code in live-server-data.php :
<?php header("content-type: text/json"); include_once 'include/connection.php'; $db = new db_class(); $query = "select distinct idchip datatable "; $result = mysql_query( $query ); $rows = array(); $count = 0; while( $row = mysql_fetch_array( $result ) ) { $sql1 = "select datetime,temperature `datatable` idchip=".$row['0']." datetime desc limit 0,1 "; $result1 = mysql_query($sql1); while ($rows = mysql_fetch_array($result1)) { $data[] = $rows['1']; $datatime[] = 'moment('.$rows['0'].').valueof()'; } // x value current javascript time, unix time multiplied // 1000. $x = $datatime; // y value random number $y = $data; } // create php array , echo json $ret = array($x, $y); echo json_encode($ret); ?> and used data , show on chart in index.php page.
var chart; // global /** * request data server, add graph , set timeout request again */ function requestdata() { $.ajax({ url: 'live-server-data.php', success: function(point) { var series = chart.series[0], shift = series.data.length > 20; // shift if series longer 20 // add point chart.series[0].addpoint(eval(point), true, shift); // call again after 1 second settimeout(requestdata, 1000); }, cache: false }); } $(document).ready(function() { chart = new highcharts.chart({ chart: { renderto: 'container', defaultseriestype: 'spline', events: { load: requestdata } }, title: { text: 'live random data' }, xaxis: { type: 'datetime', tickpixelinterval: 150, maxzoom: 20 * 1000 }, yaxis: { minpadding: 0.2, maxpadding: 0.2, title: { text: 'value', margin: 80 } }, series: [{ name: 'random data', data: [] }] }); }); this chart reload page new data right now, want add new point chart "real time"
i assume have multiple series in graph backend provides single point per serie per time.
for sake of simplicity suggest returning time in milliseconds. i'm not strong in php guess point clear
<?php header("content-type: text/json"); include_once 'include/connection.php'; $db = new db_class(); $query = "select distinct idchip datatable "; $result = mysql_query( $query ); $rows = array(); $count = 0; while( $row = mysql_fetch_array( $result ) ) { $sql1 = "select datetime,temperature `datatable` idchip=".$row['0']." order datetime desc limit 0,1 "; $serie = new stdclass; $serie->name = $row['0']; $result1 = mysql_query($sql1); $points = array(); while ($rows = mysql_fetch_array($result1)) { $points[] = array(strtotime($rows['0']) * 1000, $rows['1']); } $serie->data = $points; $series[] = $serie; } // create php array , echo json $ret = $series; echo json_encode($ret); ?> client-side code be:
var chart; var chartseries = {}; var latesttimereported = {}; function requestdata() { $.ajax({ url: 'live-server-data.php', success: function(seriesupdate) { //in case initializer of highcharts quick - skip update if (!chart) { settimeout(requestdata, 1000); return; } $.each(seriesupdate, function (serieindex, serieupdate) { var existingserie = chartseries[serieupdate.name]; var newpoint = serieupdate.data[0]; var lastinsertedtime = latesttimereported[serieupdate.name]; if (lastinsertedtime && lastinsertedtime < newpoint[0]) { console.log('attempt inserting old data!!!!'); return; } latesttimereported[serieupdate.name] = newpoint[0]; if (existingserie) { var shift = existingserie.data.length > 20; existingserie.addpoint(newpoint , true, shift); } else { var newserie = chart.addseries({ name: serieupdate.name, data: serieupdate.data }, true); chartseries[serieupdate.name] = newserie; } }); // call again after 1 second settimeout(requestdata, 1000); }, cache: false }); } $(document).ready(function() { chart = new highcharts.chart({ chart: { renderto: 'container', defaultseriestype: 'spline', events: { load: requestdata } }, title: { text: 'live random data' }, xaxis: { type: 'datetime', tickpixelinterval: 150, maxzoom: 20 * 1000 }, yaxis: { minpadding: 0.2, maxpadding: 0.2, title: { text: 'value', margin: 80 } }, series: [] }); you can see new updated example here http://plnkr.co/edit/oqmofegdadf9j3uit8qd
Comments
Post a Comment