如何将最新的TimesStamp添加到Google Gauge

问题描述 投票：2回答：1

我需要帮助，将最新的TimesStamp添加到显示Google仪表的页面。我已经进行了仪表工作并自动刷新，而无需刷新页面，但是现在我需要在其上或在数据库中的最新条目被创建时显示在其旁边（显示当前在仪表中显示的TimesStamp值）。到目前为止，这是我的代码：

Chart.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
    <script src="https://www.gstatic.com/charts/loader.js"></script>


    <script>
      google.charts.load('current', {
        packages: ['gauge']
      }).then(function () {
        var options = {
          width: 800, height: 240,
          greenFrom: 98, greenTo: 100,
          yellowFrom:90, yellowTo: 98,
          minorTicks: 5
        };

        var chart = new google.visualization.Gauge(document.getElementById('chart_div'));

        drawChart();

        function drawChart() {
          $.ajax({
            url: 'getdata.php',
            dataType: 'json'
          }).done(function (jsonData) {
            // use response from php for data table
            var data = google.visualization.arrayToDataTable(jsonData);
            chart.draw(data, options);

            // draw again in 5 seconds
            window.setTimeout(drawChart, 5000);
          });
        }
      });
    </script>

  </head>
  <body>


    <div id="chart_div" style="width: 800px; height: 240px;"></div>
  </body>
</html>

这里是getdata.php

<?php
  $servername = "localhost";
  $username = "u644759843_miki";
  $password = "plantaze2020!";
  $dbname = "u644759843_plantazeDB";

  // Create connection
  mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);
  $conn = mysqli_connect($servername, $username, $password, $dbname);
  $conn->set_charset('utf8mb4');

  $sql = "SELECT ProductPurity FROM `Precizno ProductPurity` ORDER BY TimesStamp DESC LIMIT 1";
  $result = mysqli_query($conn, $sql);

  // create data array
  $data = [];
  $data[] = ["Label", "Value"];

  // output data of each row
  while($row = mysqli_fetch_assoc($result)) {
      $data[] = ["ProductPurity", (float) $row["ProductPurity"]];
  }

  mysqli_close($conn);

  // write data array to page
  echo json_encode($data);
?>
mysql ajax timestamp google-visualization google-gauges
1个回答
0
投票

我们需要在从php返回的数据中包含时间戳。首先，将字段添加到选择语句中，这里...

$sql = "SELECT ProductPurity, TimesStamp FROM `Precizno ProductPurity` ORDER BY TimesStamp DESC LIMIT 1";

接下来，我们使用一个变量来保存时间戳...

// create data array
$data = [];
$data[] = ["Label", "Value"];
$stamp = null;

然后，在while循环中，我们保存时间戳的值...

// output data of each row
while($row = mysqli_fetch_assoc($result)) {
    $data[] = ["ProductPurity", (float) $row["ProductPurity"]];
    $stamp = $row["TimesStamp"]
}

最后，我们将图表数据和时间戳组合到一个对象中以发送到页面。 

$data = array('rows' => $data, 'timestamp' => $stamp);

以下是更新的PHP代码段...

<?php
  $servername = "localhost";
  $username = "u644759843_miki";
  $password = "plantaze2020!";
  $dbname = "u644759843_plantazeDB";

  // Create connection
  mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);
  $conn = mysqli_connect($servername, $username, $password, $dbname);
  $conn->set_charset('utf8mb4');

  $sql = "SELECT ProductPurity, TimesStamp FROM `Precizno ProductPurity` ORDER BY TimesStamp DESC LIMIT 1";
  $result = mysqli_query($conn, $sql);

  // create data array
  $data = [];
  $data[] = ["Label", "Value"];
  $stamp = null;

  // output data of each row
  while($row = mysqli_fetch_assoc($result)) {
      $data[] = ["ProductPurity", (float) $row["ProductPurity"]];
      $stamp = $row["TimesStamp"]
  }

  mysqli_close($conn);

  // write data array to page
  $data = array('rows' => $data, 'timestamp' => $stamp);
  echo json_encode($data);
?>

然后在html页面上，我们需要调整接收数据的方式...

要接收图表数据，我们需要使用数据中的'rows'属性。 

// use response from php for data table
var data = google.visualization.arrayToDataTable(jsonData.rows);  // <-- add .rows

我们可以收到如下的时间戳...

jsonData.timestamp

不确定您要如何显示时间戳，这里使用<div>。所以要更新新的<div>元素...

document.getElementById('timestamp').innerHTML = jsonData.timestamp;

跟随更新的html代码段...

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <script>
      google.charts.load('current', {
        packages: ['gauge']
      }).then(function () {
        var options = {
          width: 400, height: 120,
          redFrom: 90, redTo: 100,
          yellowFrom:75, yellowTo: 90,
          minorTicks: 5
        };

        var chart = new google.visualization.Gauge(document.getElementById('chart_div'));

        drawChart();

        function drawChart() {
          $.ajax({
            url: 'getdata.php',
            dataType: 'json'
          }).done(function (jsonData) {
            // use response from php for data table
            var data = google.visualization.arrayToDataTable(jsonData.rows);
            chart.draw(data, options);

            // update timestamp
            document.getElementById('timestamp').innerHTML = jsonData.timestamp;

            // draw again in 5 seconds
            window.setTimeout(drawChart, 5000);
          });
        }
      });
    </script>
  </head>
  <body>
    <div id="timestamp"></div>
    <div id="chart_div" style="width: 400px; height: 120px;"></div>
  </body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.