I’m trying to draw a real time chart getting data from database. I was able to print the json to https://mpimold.com/test.php and trying to add point as the data updates. I tried the function below but it’s not drawing new points. Anyone can help with this problem?? and also need to print the time… the time value is something like 132356 in sql.
<!DOCTYPE HTML><html>
<head>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<style>
.highcharts-figure, .highcharts-data-table table {
min-width: 320px;
max-width: 800px;
margin: 1em auto;
}
#container {
height: 400px;
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #EBEBEB;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
</style>
</head>
<body>
<?php
//open connection to mysql db
$connection = mysqli_connect("localhost","user","pass","dbname") or die("Error " . mysqli_error($connection));
//fetch table rows from mysql db
$sql = "select reading_time, sensor1 from SensorData";
$result = mysqli_query($connection, $sql) or die("Error in Selecting " . mysqli_error($connection));
//create an array
$emparray = array();
while($row =mysqli_fetch_assoc($result))
{
$id[] = $row['reading_time'];
$x = end($id->feeds)->field1;
$Sensor1[]=$row['sensor1'];
$emparray[] = $row;
}
// print json_encode($emparray, JSON_NUMERIC_CHECK);
mysqli_free_result( $result);
mysqli_close($connection);
//write to json file
$fp = fopen('empdata.json', 'w');
fwrite($fp, json_encode($emparray));
fclose($fp);
//close the db connection
mysqli_close($connection);
//<?php echo json_encode($id, JSON_NUMERIC_CHECK)
?>
<h2>MPI Molds Monitoring </h2>
<div id="container"></div>
</body>
<script>
Highcharts.chart('container', {
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
// set up the updating of the chart each second+
setInterval(function() {
$.ajax({
type: "GET",
url: "https://mpimold.com/test.php",
success: function(data) {
chart.series[0].addPoint([data.x, data.y], true);
}
});
}, 500);
}
}
},
title: {
text: 'Live random data'
},
tooltip: {
headerFormat: '<b>{series.name}</b><br/>',
pointFormat: '{point.x:%m-%d %H:%M:%S}<br/>{point.y:.2f}'
},
xAxis: {
max : 1000
},
yAxis: {
title: {
text: 'sensor1'
},
},
series: [{
name: 'Sensor1',
data: [<?php echo join($Sensor1, ',') ?>]
}]
});
</script>
</html>
