javascript - Drawing mysql data with highcharts -
i'm trying plot data mysql table on document load highcharts: html looks that:
function fetchdata(){ //alert("fetching"); $.ajax({ url: 'php/reports/fetch_data.php', success: function(data) { datatemp = []; for(i=0;i<data.length;i++){ datatemp.push(data[i][0]); // '1' index getting temp value. '0' date. } c_temperature.series[0].data = datatemp; for(i=0;i<data.length;i++){ datatemp.push(data[i][1]); // '1' index getting temp value. '0' date. } c_temperature.series[1].data = datatemp; } }); function drawcharts(){ c_temperature = new highcharts.chart({ chart: { renderto: 'dashboard', defaultseriestype: 'spline', }, title: { text: 'temperatur' }, xaxis: { type: 'datetime', tickpixelinterval: 150, maxzoom: 20 * 1000 }, yaxis: { minpadding: 0.2, maxpadding: 0.2, title: { text: 'value', margin: 10 } }, legend:{ enabled: false }, credits:{ enabled: false }, series: [{ name: 'temperatur', data: [] }] }); $(document).ready(function() { drawcharts(); fetchdevices(); fetchdata(); }); <body> <div id="dashboard"> </div> <div class="clear"></div> </body>
and php call looks that:
try { $con = new pdo("mysql:host=$servername; dbname=$dbname", $username, $password);# echo 'connected</br>'; $sql = "select zeit,feuchte,temperatur,lux,pitch ".$mac. " order id"; foreach($con - > query($sql) $row) { $x = $row['zeit']; /*$x = mktime()*1000;*/ $y_h = (float) $row['feuchte']; /*$y_t=(float)$row['temperatur']; $y_l=(float)$row['lux']; $y_a=(float)$row['pitch'];*/ $ret = array($x, $y_h, /*$y_t,$y_l,$y_a,$mac*/ ); echo json_encode($ret); } $con = null; }
the php code returns data. dont see graph , debugging browser console not give clue either. suggestions i'm doing wrong?
beste regards
you want use c_temperature.series[0].setdata(datatemp, true);
, c_temperature.series[1].setdata(datatemp, true);
. setting data, you're not telling highcharts redraw chart, nothing happening when update data.
Comments
Post a Comment