Google 数据库中没有值时显示图表（gague）

Question

我想在我的数据库中没有值时显示 google 图表（仪表）。

我这样做的想法是在数组中插入一个虚拟值来显示图表，一旦将值添加到数据库就会覆盖它。

postData.php:

<?php require 'conn.php';?>

<?php
$sql = "SELECT * FROM sensors ORDER BY id DESC LIMIT 1";
$result = $conn->query($sql) or die ($conn->error);

// create data array
$data = [];
$data[] = [["label"=>"Label","type"=>"string"],["label"=>"Value","type"=>"number"]];
 
// output data of each row
while ($row = $result->fetch_assoc() {
   $data[] = ["Temp", (float) $row["temp"]];   
}

// write data array to page
echo json_encode($data, JSON_NUMERIC_CHECK);
$result->free();
$conn->close();
?>

index.php

<script>
    google.charts.load('current', {
        packages: ['gauge']
    }).then(function () {
        var options = {
            width: 400, height: 400,
            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: 'postData.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>

<div id="chart_div" class="chart_hum" style="width: 400px; height: 120px;"></div>

Answer 1

我通过引用此并添加此代码解决了这个问题。我没有在 PHP 中使用数组，而是使用 JavaScript 添加虚拟值，一旦数据插入数据库，它就会被覆盖。希望这对以后的人有用。

 function drawChart() {
            $.ajax({
                url: 'postData.php',
                dataType: 'json'
            }).done(function (jsonData)     {
                   // use response from php for data table
                  var data = google.visualization.arrayToDataTable(jsonData);
                   // added part
                    if (data.getNumberOfRows() === 0) {
                   data.addRows([
                       ['Temp', 0]
                   ]);
            }
                  chart.draw(data, options);

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

Google 数据库中没有值时显示图表（gague）

Google Charts (gague) display when no value in database

javascript

php

ajax