Javascript 使用highcharts从mysql数据库向折线图添加动态数据

我想用ajax或json将数据点添加到我的折线图中，现在我必须重新加载整个网页以在图表上显示我的新数据。但我想通过添加以下链接来显示实时数据：

我试图从mysql中检索数据，并通过json添加到图表中，但什么也没发生。这是我在live-server-data.php中的代码：

<?php

header("Content-type: text/json");


 include_once 'include/connection.php';
 $db = new DB_Class(); 


     $query = "select distinct idchip from datatable ";
     $result = mysql_query( $query );
     $rows = array();
     $count = 0;

     while( $row = mysql_fetch_array( $result ) ) {
         $SQL1 =     "SELECT datetime,temperature FROM `datatable` WHERE 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()';
        }

        // The x value is the current JavaScript time, which is the Unix time multiplied 
        // by 1000.
        $x = $datatime;
        // The y value is a random number
        $y = $data;
     }


// Create a PHP array and echo it as JSON
$ret = array($x, $y);
echo json_encode($ret);
?>

这是我的图表，我现在重新加载页面以获取新数据，但我想在图表中添加新点以实现“实时”

---

我假设图中有多个系列，其中后端每次为每个系列提供一个点

为了简单起见，我建议以毫秒为单位返回时间。我对PHP不是很在行，但我想重点很清楚

<?php

header("Content-type: text/json");


 include_once 'include/connection.php';
 $db = new DB_Class(); 


     $query = "select distinct idchip from datatable ";
     $result = mysql_query( $query );
     $rows = array();
     $count = 0;

     while( $row = mysql_fetch_array( $result ) ) {
         $SQL1 =     "SELECT datetime,temperature FROM `datatable` WHERE idchip=".$row['0']." ORDER BY 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 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: []
    });

var图；
var chartSeries={}；
var latestTimeReported={}；
函数requestData（）{
$.ajax({
url:“live server data.php”，
成功：功能（系列更新）{
//如果highcharts的初始值设定值太快-跳过更新
如果（！图表）{
setTimeout（requestData，1000）；
返回；
}
$.each（系列更新，函数（系列索引，系列更新）{
var existingSerie=chartSeries[serieUpdate.name]；
var newPoint=serieUpdate.data[0]；
var lastInsertedTime=latestTimeReported[SerieuUpdate.name]；
if（lastInsertedTime&&lastInsertedTime20；
现有serie.addPoint（newPoint、true、shift）；
}否则{
var newSerie=chart.addSeries（{
名称：serieUpdate.name，
数据：serieUpdate.data
}，对）；
chartSeries[serieUpdate.name]=newSerie；
}
});
//一秒钟后再打
setTimeout（requestData，1000）；
},
缓存：false
});
}
$（文档）.ready（函数（）{
图表=新的高点图表。图表({
图表：{
renderTo:'容器'，
defaultSeriesType:“样条线”，
活动：{
加载：请求数据
}
},
标题：{
文本：“实时随机数据”
},
xAxis：{
键入：“日期时间”，
像素间隔：150，
最大缩放：20*1000
},
亚克斯：{
最小填充：0.2，
最大填充：0.2，
标题：{
文本：“值”，
差额：80
}
},
系列：[]
});

您可以在这里看到新的更新示例

显示“尝试插入旧数据！！！！”。 并且没有显示实时数据

展示

JSON

---

在requestData函数中，将“图表”引用替换为“this”。您的点变量是什么样子的（您从ajax获得的）？注释不用于扩展讨论；此对话已完成。

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: []
    });