Quiero mostrar el gráfico de Google (indicador) cuando no hay valores en mi base de datos.
Mi idea para hacer esto es insertar un valor ficticio en una matriz para mostrar el gráfico y, una vez que se agregan los valores a la base de datos, lo anula.
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(); ?>índice.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>Resolví el problema haciendo referencia a este enlace y agregando este código. En lugar de hacerlo en PHP usando una matriz, usé JavaScript para agregar el valor ficticio y se anula una vez que se insertan los datos en la base de datos. Espero que esto pueda ser útil para alguien en el futuro.
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); }); }