How to automatically update Google Gauge

问题

I'm kinda rookie in this, but I need help with Google Gauge that should take latest entry in database and display it, while updating automatically without the need to reload the site. Right now I have code that displays it, but for it to update to new values I need to reload the page.

Here's what I have so far:

<html>
  <head>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript">
      google.charts.load('current', {'packages':['gauge']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

         var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['ProductPurity', <?php
$servername = "localhost";
$username = "u644759843_miki";
$password = "plantaze2020!";
$dbname = "u644759843_plantazeDB";

// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}

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

if (mysqli_num_rows($result) > 0) {
    // output data of each row
    while($row = mysqli_fetch_assoc($result)) {
        echo $row["ProductPurity"];
    }
} else {
    echo "0 results";
}

mysqli_close($conn);
?> ],

        ]);

        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'));

        chart.draw(data, options);

        setInterval(function() {
          data.setValue(0 ,1 , <?php


// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}

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

if (mysqli_num_rows($result) > 0) {
    // output data of each row
    while($row = mysqli_fetch_assoc($result)) {
        echo $row["ProductPurity"];
    }
} else {
    echo "0 results";
}

mysqli_close($conn);
?>
);
          chart.draw(data, options);
        }, 5000);
        setInterval(function() {
          data.setValue(1, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 5000);
        setInterval(function() {
          data.setValue(2, 1, 60 + Math.round(20 * Math.random()));
          chart.draw(data, options);
        }, 26000);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 120px;"></div>
  </body>
</html>

回答1:

php runs on the server, so it is only going to run once per page load.

to update the chart without reloading the page,
you will need to separate the php from the html / javascript.

save the php to a different file, all by itself.

you need to include the rest of the data in the php,
including the column headings.

see following snippet for the php.
for example purposes, we'll name the file --> 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", $row["ProductPurity"]];
  }

  mysqli_close($conn);

  // write data array to page
  echo json_encode($data);
?>

next, save the html / javascript to its own file.
for example purposes, we'll name the file --> chart.html

to get the data from php,
we'll use jquery ajax.

see following snippet...

<!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);
            chart.draw(data, options);

            // draw again in 5 seconds
            window.setTimeout(drawChart, 5000);
          });
        }
      });
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 120px;"></div>
  </body>
</html>

EDIT

need to make sure the Value column...

is a number --> 99.9594

not a string --> "99.9594"

you can convert using --> (float)

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

and / or use the JSON_NUMERIC_CHECK constant on the encode statement...

echo json_encode($data, JSON_NUMERIC_CHECK);

来源：https://stackoverflow.com/questions/62059614/how-to-automatically-update-google-gauge

标签

database

charts

google-visualization

google-gauges