I want my graph to automatically refresh data as it comes in to the database. However, i am getting a blank screen with the following html code. Could you please correct the error?
file t1.php
<?php
header('Content-Type: application/json');
$con = mysqli_connect("localhost","root","","test1");
// Check connection
if (mysqli_connect_errno($con))
{
echo "Failed to connect to DataBase: " . mysqli_connect_error();
}else
{
$data_points = array();
$result = mysqli_query($con, "SELECT * FROM val");
while($row = mysqli_fetch_array($result))
{
$point = array("label" => $row['rnumber'] ,"y" =>$row['water_level']);
array_push($data_points, $point);
}
echo json_encode($data_points, JSON_NUMERIC_CHECK);
}
mysqli_close($con);
?>
file t2.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery.js"></script>
<script src="canvasjs.min.js"></script>
<script type="text/javascript">
var updateInterval = 10;
var dps;
$(document).ready(function () {
$.getJSON("t1.php", function (result) {
dps=result;
var chart = new CanvasJS.Chart("chartContainer", {
data: [
{
dataPoints: dps
}
]
});
chart.render();
});
var updateChart = function () {
$.getJSON(“t1.php”, function (result) {
chart.options.data[0].dataPoints = result;
});
chart.render();
};
setInterval(function(){updateChart()}, updateInterval);
});
</script>
</head>
<body>
<div id="chartContainer" style="width: 800px; height: 380px;"></div>
</body>
</html>