(Why it's not displaying anything) Ajax to update gauge chart realtime (also connected to database).
69 views
Skip to first unread message
Corbin Jones
Nov 27, 2021, 4:43:38 AM11/27/21
to Google Visualization API
It doesn't have any error in the console.log so I can't find out what's the problem...
Mainpage
<!doctype html>
<html>
<head>
<meta charset="utf8" />
<title>Gauge</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
callback: function() {
drawChart();
setInterval(drawChart, 10000);
function drawChart() {
$.ajax({
url: 'gaugechart.php',
type: 'POST',
datatype: 'JSON',
success: function(json) {
var data = new google.visualization.DataTable(json);
var chart = new google.visualization.Gauge(document.getElementById('gauge_div'));
chart.draw(data, {
width: 500,
height: 200,
minorTicks: 5
});
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(errorThrown + ': ' + textStatus);
}
});
}
},
packages: ['gauge']
});
</script>
</head>
<body>
<div id="gauge_div" style="width: 100%; height: 400px;" class="d-flex align-items-center justify-content-center mt-3"></div>
</body>
</html>
Gaugechart.php
<?php
$con = mysqli_connect('localhost', 'root', '', 'adminpanel');
$sql = 'SELECT * FROM tbl_waterquality ORDER BY id DESC';
$result = mysqli_query($con, $sql);
$row = mysqli_fetch_array($result); // assuming ONE result
$temperature = $row["temperature"];
$pH = $row["pH"];
$DO = $row["DO"];
$turbidity = $row["Turbidity"];
echo <<<EOT
[
["Label", "Value"],
["Temperature", $temperature],
["pH", $pH ],
["DO", $DO ],
["Turbidity", $turbidity ]
]
EOT
?>
Reply all
Reply to author
Forward
0 new messages