如何使谷歌图表动态移动和更新答案

【问题标题】：how to make google chart moving and update dynamically如何使谷歌图表动态移动和更新
【发布时间】：2017-09-11 23:09:07
【问题描述】：

我真的不知道如何让这个谷歌图表移动，老实说，我会再次寻求帮助。我真的非常需要它。我想让我的谷歌图表从数据库中移动，因为我的数据库是自动收集数据。我希望图表在不刷新的情况下自动更新。以下是我的 javascript 代码：

以下代码的输出

<!DOCTYPE html>
<html>
  <head>
    <!-- EXTERNAL LIBS-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <script src="jquery.min.js"></script>
    <!-- EXAMPLE SCRIPT -->
    <script>

    google.charts.load('current', {
    callback: drawChart,
    packages: ['corechart']
    });

      // onload callback
      function drawChart() {



        // JSONP request
        var jsonData = $.ajax({
          url: 'livedata.php',
          dataType: 'json',
        }).done(function (results) {

          var data = new google.visualization.DataTable(jsonData);

          data.addColumn('date', 'time_stamp');
          data.addColumn('number', 'ph');
          data.addColumn('number', 'moist');


          $.each(results, function (i, row) {

          data.addRow([
         new Date(row.time_stamp),
          parseFloat(row.ph),
          parseFloat(row.moist)
            ]);
          });

          var chart = new google.visualization.AreaChart($('#chart').get(0));

          chart.draw(data, {
          title: 'Soil Analysis',
          curveType: 'function',
          displayAnnotations: true
          //legend: { position: 'bottom' }
          //pointSize: 10
          });

       });

      }
      drawChart();
    setInterval(drawChart, 10000);

      // load chart lib


      // call drawChart once google charts is loaded
    //  google.setOnLoadCallback(drawChart);

    </script>



  </head>
  <body>
    <div id="chart" style="width: 80%;height:380px"></div>
  </body>
</html>

我不知道这是否也会影响我的图表以使其移动，但以下也是我的 php json 代码：

$query = "SELECT readingID, moist, ph , time_stamp FROM soilReading";
$result = mysqli_query($connection, $query);

$data_points = array();
while($row = mysqli_fetch_array($result)){  
$wholedate = date('c',strtotime($row['time_stamp']));  
$monthNum = date('m',strtotime($row['time_stamp']));
$DayNum = date('d', strtotime($row['time_stamp']));   
$yearnum = date('Y', strtotime($row['time_stamp']));   
$dateObj   = DateTime::createFromFormat('!m', $monthNum);
$monthName = $dateObj->format('F');
if(($monthNum == "9")&&($yearnum == "2017")){
      if (array_key_exists($DayNum, $data_points)) {
      $data_points[$DayNum]->ph += $row['ph'] / $data_points[$DayNum]->ph = count($row['ph']);
      $data_points[$DayNum]->moist += $row['moist'];
          }else{
      //$data_points[$DayNum]->ts = $yearnum."".$monthName ."".$DayNum;
     // $data_points[$DayNum]->ts = $yearnum."".$monthNum."".$DayNum;
      $data_points[$DayNum]->time_stamp =$wholedate;
      //$data_points[$DayNum]->ts = $wholedate;      
      $data_points[$DayNum]->ph = $row['ph'] /  $data_points[$DayNum]->ph = count($row['ph']);
      $data_points[$DayNum]->moist = $row['moist'];   

  }
}
  }
$jsonResult = json_encode(array_values($data_points));
echo $jsonResult;

【问题讨论】：

标签： javascript jquery ajax charts google-visualization

【解决方案1】：

使用 jsonData 变量有什么意义？看起来根本不需要。试试这个：

$.ajax({
   url: 'livedata.php',
   dataType: 'json',
}).done(function (results) {    
var data = new google.visualization.DataTable();

您也尝试过使用google.setOnLoadCallback(drawChart);。它将确保 drawChart 在 Google Api 完全加载后运行。

【讨论】：

【解决方案2】：

当你说move时，你指的是animation吗？

如果是这样，您需要保存对图表的引用

使用新数据绘制相同的图表将允许
图表从一个数据集动画到下一个数据集

我还为animation添加了图表选项

尝试类似于以下的设置...

google.charts.load('current', {
  callback: function () {
    var chart = new google.visualization.AreaChart($('#chart').get(0));

    function drawChart() {
      $.ajax({
        url: 'livedata.php',
        dataType: 'json',
      }).done(function (results) {
        var data = new google.visualization.DataTable();
        data.addColumn('date', 'time_stamp');
        data.addColumn('number', 'ph');
        data.addColumn('number', 'moist');

        $.each(results, function (i, row) {
          data.addRow([
            new Date(row.time_stamp),
            parseFloat(row.ph),
            parseFloat(row.moist)
          ]);
        });

        chart.draw(data, {
          animation: {
            startup: true,
            duration: 1000
          },
          title: 'Soil Analysis',
          curveType: 'function',
          displayAnnotations: true
        });
      });
    }
    drawChart();
    setInterval(drawChart, 10000);
  },
  packages: ['corechart']
});

【讨论】：

再次感谢，但我不是指动画图表，我指的是实时移动图表，如下所示：canvasjs.com/editor/?id=https://canvasjs.com/example/gallery/… 但将移动的数据来自我的数据库，简而言之，来自我的json文件
上述内容，没有动画，应该适用于该效果 - 但是 - 数据表每次绘制都需要相同的数据行，仅删除第一行并添加一行 - 和重绘需要快于 10 秒
谢谢你......好吧，我想我需要一些启发......
livedata 返回什么？是否有任何数据重叠，还是一组新的行？