使用highcharts从mysql数据库向线图添加动态数据
我想用ajax或json将数据点添加到我的折线图中，现在我必须重新加载整个网页以在图表上显示我的新数据。 但我想通过添加像这些链接的点来显示实时数据：
jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/stock/demo/dynamic-update/
www.highcharts.com/studies/live-server.htm
我试图从mysql中检索我的数据，以便通过json添加到图表上但没有任何反应。 这是我在live-server-data.php中的代码：
这就是我以前在index.php页面中获取数据并显示在图表上的内容。
var chart; // global /** * Request data from the server, add it to the graph and set a timeout to 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 the series is longer than 20 // add the point chart.series[0].addPoint(eval(point), true, shift); // call it again after one 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: [] }] }); });
这是我的图表，我现在重新加载页面以获取新数据，但我想为“实时”添加新的图表
我假设您在图表中有多个系列，其中后端每次为每个系列提供一个点。
为了简单起见，我建议你以毫秒为单位返回时间。 我在PHP方面不是太强大，但我想这一点很清楚
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 a PHP array and echo it as JSON $ret = $series; echo json_encode($ret); ?>
客户端代码将是：
var chart; var chartSeries = {}; var latestTimeReported = {}; function requestData() { $.ajax({ url: 'live-server-data.php', success: function(seriesUpdate) { //in case initializer of highcharts is too quick - skip the 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 it again after one 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: [] });
您可以在此处查看新的更新示例http://plnkr.co/edit/OqMofEGDadF9J3Uit8qD
显示“尝试插入旧数据!!!!”。 和No Show显示数据实时。
显示 
JSON 