如何将最新的时间戳添加到 Google Gauge答案

【问题标题】：How to add latest TimesStamp to Google Gauge如何将最新的时间戳添加到 Google Gauge
【发布时间】：2020-06-03 06:48:47
【问题描述】：

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

图表.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);
?>

【问题讨论】：

在表/列标识符中包含空格只是自找麻烦
这里没有 $row["ProductPurity"]
没有$row是什么意思？抱歉，我还是个新手
对不起；我想我看错了什么！？！？

标签： mysql ajax timestamp google-visualization google-gauges

【解决方案1】：

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

$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 sn-p...

<?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 sn-p...

<!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>

【讨论】：

确实如此，非常感谢。只是一个简单的问题，如果我想在下半部分的仪表内部显示 TimesStamp，在针的下方，我需要做什么？
您可以使用 css 使时间戳 div 绝对位于仪表的顶部。