I want to implement the real-time dynamic graph on line chart by using Highcharts. That is what I expect: Spline updating each second.
In my case, the real-time JSON object contains all of chart parameters. Here's my real-time JSON data on JSON Editor Online. You can use following syntactic to render a line chart with multiple series.
$("#chart ID").highcharts(data["lineChart"]["value"]);
Chart parameters can be extracted directly from JSON object.
object["lineChart"]["value"]
I have rendered a line chart with three series (Home Total Consumption, Green Power, and Tai Power), but I don't know how to refresh it via Highcharts addPoint method.
Here's my code snippets:
Create the chart
// Interval to update the webpage data 60000 ms (1 min)
var updateInterval = 60000;
// Define the chart variable globally
var chart;
$(document).ready(function () {
// Create the chart
chart = new Highcharts.Chart({
credits: {
enabled: false
},
exporting: {
enabled: false
},
chart: {
renderTo: 'containerJS',
type: 'spline',
"alignTicks": false,
"zoomType": "xy",
events: {
// The updateRealTimeData function is initially called from the chart's load event
load: updateRealTimeData
}
},
title: {
text: 'real-time line chart',
align: 'center'
},
"xAxis": [{
"categories": [], //Current local time
"crosshair": true,
"index": 0,
"isX": true
}],
"tooltip": {
"shared": true
},
"legend": {
"layout": "horizontal",
"align": "left",
"x": 0,
"verticalAlign": "top",
"y": 0,
"floating": false,
"backgroundColor": "#363635"
},
"yAxis": [{
"gridLineColor": "transparent",
"labels": {
"format": "{value}",
"enabled": true
},
"title": {
"text": "Power (W)"
},
"opposite": true,
"index": 0
}],
"series": [{
"color": "#01AEF0",
"name": "Home Total Consumption",
"tooltip": {
"valueSuffix": "",
"pointFormat": "<span style=\"color:{point.color}\">\u25CF</span> {series.name}: <b>{point.y:,.2f}</b><br/>"
},
"yAxis": 0,
"type": "line",
"data": [] //data-stream-1
}, {
"color": "#ED008C",
"name": "Green Power",
"tooltip": {
"valueSuffix": "",
"pointFormat": "<span style=\"color:{point.color}\">\u25CF</span> {series.name}: <b>{point.y:,.2f}</b><br/>"
},
"yAxis": 0,
"type": "line",
"data": [] //data-stream-2
}, {
"color": "#F57E20",
"name": "Tai Power",
"tooltip": {
"valueSuffix": "",
"pointFormat": "<span style=\"color:{point.color}\">\u25CF</span> {series.name}: <b>{point.y:,.2f}</b><br/>"
},
"yAxis": 0,
"type": "line",
"data": [] //data-stream-3
}]
});
updateRealTimeData();
});
Set up the updateRealTimeData function
function updateRealTimeData() {
var url = "live-server-data.php";
$.ajax({
"url": url,
method: "GET",
dataType: "json",
data: {
"task": "GetHomepageData",
},
//async: false
})
.done(function (data) {
// var highChartParams = data["lineChart"]["value"];
// redraw Highcharts
// $("#containerJS").highcharts(highChartParams);
// When the data is successfully received from the server, then added to the chart's series using the Highcharts addPoint method
// How do I add the point here ...
// call it again after 60000 ms
updatePageData();
})
.fail(function () {
console.log("Update data fail");
});
}
ajax Callback function
function updatePageData() {
//set timeout to keep the page updated every [updateInterval] ms.
setTimeout(updateRealTimeData, updateInterval);
}
Any help is very much appreciated. Thanks.
You can use addPoint
in a loop through all data points from your JSON. Set redraw
argument to false
and redraw the chart after all the points are added:
load: function() {
var chart = this;
setInterval(function() {
chart.series.forEach(function(s) {
for (var i = 0; i < 20; i++) {
s.addPoint(Math.random(), false, true);
}
});
chart.redraw();
}, 1000);
}
Live demo: http://jsfiddle.net/kkulig/3mzby6m7/
API reference: https://api.highcharts.com/class-reference/Highcharts.Series#addPoint