Question

我真的不知道如何让这个谷歌图表移动，老实说，并将再次寻求帮助。我真的非常需要它...我想让我的谷歌图表从数据库移动，因为我的数据库是自动收集数据。我希望图表在没有刷新的情况下自动更新。以下是我的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;

Answer 1

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

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

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

Answer 2

当您说移动时，您指的是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']
});

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

2 个答案: