I want to display google chart (gauge) when there is no values in my database.
My idea for doing this is to insert a dummy value in an array to display the chart and once values are added to the database overrides it.
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>
I solved the issue by referencing this link and adding this code. Instead of doing in PHP using an array, I used JavaScript to add the dummy value and it gets overridden once data are inserted in to the database. Hope this maybe useful to someone in the future.
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);
});
}