javascript - How to insert multiple values on HighCharts live data chart -
i'm new in web programming , i'm trying insert multiple points in highcharts live chart. have 1 mysql table each 11 seconds 11 values inserted, values past 11 seconds. can understand? so, want insert 11 points each 11 seconds in chart. searched on internet , have tried many ways , didn't find solution. here goes codes:
data inserted in chart
<?php // set json header header("content-type: text/json"); date_default_timezone_set('america/sao_paulo'); error_reporting (e_all & ~ e_notice & ~ e_deprecated); $con = mysql_connect("localhost", "root", "") or die (mysql_error ()); mysql_select_db("dr14", $con) or die (mysql_error ()); $result = mysql_query("select * dados_test order id desc limit 11"); $data1 = array(); $data2 = array(); $i=0; while ($row = mysql_fetch_array($result)) { $data1[$i] = $row [ "timestamp"]; //timestamp of points $data2[$i] = $row [ "vq_grid" ]; //points inserted in chart $i++; } // x value current javascript time, unix time multiplied 1000. $x = $data1[0]*1000; $x1 = $data1[1]*1000; $x2 = $data1[2]*1000; $x3 = $data1[3]*1000; $x4 = $data1[4]*1000; $x5 = $data1[5]*1000; $x6 = $data1[6]*1000; $x7 = $data1[7]*1000; $x8 = $data1[8]*1000; $x9 = $data1[9]*1000; $x10 = $data1[10]*1000; //below points want insert in chart echo "[ [$x10,$data2[10]], [$x9,$data2[9]], [$x8,$data2[8]], [$x7,$data2[7]], [$x6,$data2[6]], [$x5,$data2[5]], [$x4,$data2[4]], [$x3,$data2[3]], [$x2,$data2[2]], [$x1,$data2[1]], [$x,$data2[0]] ]"; ?>
chart code
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(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: [] }] }); });
can me?
Comments
Post a Comment