I am having difficulty figuring out how to use Highcharts to get new(live) data from a database.
I have tested the example here and it works great.
I get new data written to the database every 1min. The problem is I can only make it grab the newly inserted data from the database and update the chart every 1min, using the newly inserted data as the new data point. I can't get it to show historical data from the database.
Here is an example of what I'm trying to do.
Here is the code I´m using at the moment.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
var chart;
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'area',
zoomType: 'x'
},
title: {
},
xAxis: {
type: 'datetime'
},
yAxis: {
},
series: [{
name: 'Download',
data: []
}, {
name: 'Upload',
data: []
}]
};
$.getJSON('data.php', function(json) {
data1 = [];
data2 = [];
$.each(json, function(key,value) {
data1.push([value[0], value[1]]);
data2.push([value[0], value[2]]);
});
options.series[0].data = data1;
options.series[1].data = data2;
chart = new Highcharts.stockChart(options);
});
});
</script>
<body>
<div id="container" style="min-width: 400px; height: 800px; margin: 0 auto"></div>
</body>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
And here is the code for data.php.
<?php
$dbhost = 'localhost';
$dbname = 'highchart';
$dbuser = '*******';
$dbpass = '*******';
try{
$dbcon = new PDO("mysql:host={$dbhost};dbname={$dbname}",$dbuser,$dbpass);
$dbcon->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
}catch(PDOException $ex){
die($ex->getMessage());
}
$stmt=$dbcon->prepare("SELECT * FROM trafico");
$stmt->execute();
$json = [];
while($row=$stmt->fetch(PDO::FETCH_ASSOC)){
extract($row);
$json[]= [strtotime($time_1m)*1000, (int)$Tx, (int)$Rx];
}
echo json_encode($json);
?>
This is the output I get from data.php.
[[1521071984000,1255,91],[1521072190000,1212,92],[1521072241000,1220,93],[ ... ]]
This is the graph I get 
Basically I don't know to how to make the code (this graph) above to update dynamically every 1min with new data points.
