How to add new points to highcharts after plotting the first 'n' points?
Question
I am very new to Highcharts. The data for my highcharts come from a JSON file. It is an array of about 32 elements.
Is there a way to render the first 8 points on load and keep adding the remaining points one after another every second?
I know this is possible through series.addPoint( , , ) method. I dont exactly know how and where to include this in my code to make it work.
Any help would be much appreciated. Thank you!
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Highcharts data from JSON Response</title>
<style>
body{
margin-top: 30px;
margin-left:10px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
$(function () {
var processed_json = new Array(); //TS1
var processed_json1 = new Array(); //TS2
var processed_json2 = new Array(); //TS3
var processed_json3 = new Array(); //Processing Delay
var processed_json4 = new Array(); //Input-Output Delay
$.getJSON('http://localhost:8080/charts_demo/new4.json', function(data) {
// Populate series
for (i = 0; i < data.length; i++){
processed_json.push([data[i].timestamp1, data[i].val]);
processed_json1.push([data[i].timestamp2, data[i].val]);
processed_json2.push([data[i].timestamp3, data[i].val]);
processed_json3.push([((data[i].timestamp3)-(data[i].timestamp2)), data[i].val]);
processed_json4.push([((data[i].timestamp3)-(data[i].timestamp1)), data[i].val]);
}
// draw chart
$('#container').highcharts({
chart: {
type: "line"
},
title: {
text: "Streaming Flink Data"
},
xAxis: {
type: 'category',
allowDecimals: true,
title: {
text: "Timestamps"
}
},
yAxis: {
title: {
text: "Steps"
}
},
series: [{
name: 'Timestamp1',
data: processed_json
},
{
name: 'Timestamp2',
data: processed_json1
} ,
{
name: 'Timestamp3',
data: processed_json2,
},
{
name: 'Processing Delay',
data: processed_json3,
},
{
name: 'Input-Output Delay',
data: processed_json4,
}
]
});
});
});
</script>
</head>
<body>
<div style="width: 800px; margin: 2em auto; padding: 1em; border: 1px solid red; border-radius: 0.5em">
Highcharts data load from a JSON using manual JSON Processing
</div>
<div id="container" style="height: 400px"></div>
</body>
</html>
Here is a part of my JSON:
[
{
"temperSensorData": "26.183021749996204",
"temperSensorUnit": "celsius",
"timestamp": "1370718629809",
"timestamp2": "1272913900562",
"timestamp3": "1272914212663",
"val": 0
},
{
"temperSensorData": "26.183021749996204",
"temperSensorUnit": "celsius",
"timestamp": "1370718629809",
"timestamp2": "1272923870899",
"timestamp3": "1272923910916",
"val": 1
},
{
"temperSensorData": "26.183021749996204",
"temperSensorUnit": "celsius",
"timestamp": "1370718629809",
"timestamp2": "1272924061471",
"timestamp3": "1272924083986",
"val": 3
},
{
"temperSensorData": "26.183021749996204",
"temperSensorUnit": "celsius",
"timestamp": "1370718629809",
"timestamp2": "1272924164266",
"timestamp3": "1272924184633",
"val": 4
},
{
"temperSensorData": "26.183021749996204",
"temperSensorUnit": "celsius",
"timestamp": "1370718629809",
"timestamp2": "1272924268218",
"timestamp3": "1272924290112",
"val": 5
},
{
"temperSensorData": "26.183021749996204",
"temperSensorUnit": "celsius",
"timestamp": "1370718629809",
"timestamp2": "1272924379077",
"timestamp3": "1272924403753",
"val": 6
},
{
"temperSensorData": "26.183021749996204",
"temperSensorUnit": "celsius",
"timestamp": "1370718629809",
"timestamp2": "1272924506055",
"timestamp3": "1272924530178",
"val": 7
},
{
"temperSensorData": "26.183021749996204",
"temperSensorUnit": "celsius",
"timestamp": "1370718629809",
"timestamp2": "1272924618673",
"timestamp3": "1272924640035",
"val": 8
},
{
"temperSensorData": "26.183021749996204",
"temperSensorUnit": "celsius",
"timestamp": "1370718629809",
"timestamp2": "1272924724397",
"timestamp3": "1272924745171",
"val": 9
},
{
"temperSensorData": "26.183021749996204",
"temperSensorUnit": "celsius",
"timestamp": "1370718629809",
"timestamp2": "1272924824742",
"timestamp3": "1272924844889",
"val": 10
},
{
"temperSensorData": "26.183021749996204",
"temperSensorUnit": "celsius",
"timestamp": "1370718629809",
"timestamp2": "2735704061190",
"timestamp3": "2735704107307",
"val": 11
},
{
"temperSensorData": "26.183021749996204",
"temperSensorUnit": "celsius",
"timestamp": "1370718629809",
"timestamp2": "2735707965847",
"timestamp3": "2735708013535",
"val": 12
},
{
"temperSensorData": "26.183021749996204",
"temperSensorUnit": "celsius",
"timestamp": "1370718629809",
"timestamp2": "2735711252324",
"timestamp3": "2735711294922",
"val": 13
},
{
"temperSensorData": "26.183021749996204",
"temperSensorUnit": "celsius",
"timestamp": "1370718629809",
"timestamp2": "2735717187076",
"timestamp3": "2735717223311",
"val": 14
},
{
"temperSensorData": "26.183021749996204",
"temperSensorUnit": "celsius",
"timestamp": "1370718629809",
"timestamp2": "2735723635314",
"timestamp3": "2735723682098",
"val": 15
},
{
"temperSensorData": "26.183021749996204",
"temperSensorUnit": "celsius",
"timestamp": "1370718629809",
"timestamp2": "2735730238413",
"timestamp3": "2735730270014",
"val": 16
},
{
"temperSensorData": "26.183021749996204",
"temperSensorUnit": "celsius",
"timestamp": "1370718629809",
"timestamp2": "2735739320192",
"timestamp3": "2735739359640",
"val": 17
},
{
"temperSensorData": "26.183021749996204",
"temperSensorUnit": "celsius",
"timestamp": "1370718629809",
"timestamp2": "2735742926365",
"timestamp3": "2735742963707",
"val": 18
},
{
"temperSensorData": "26.183021749996204",
"temperSensorUnit": "celsius",
"timestamp": "1370718629809",
"timestamp2": "2735745756756",
"timestamp3": "2735745800614",
"val": 19
},
{
"temperSensorData": "26.183021749996204",
"temperSensorUnit": "celsius",
"timestamp": "1370718629809",
"timestamp2": "2735753411805",
"timestamp3": "2735753449615",
"val": 20
}
]
1 answers
solution1
2 ACCPTED 2017-04-27 21:11:35
I've created a fiddle of what you need here - I've simplified the data series for this example
So basically you take the first 8 points from each array and use those when creating the chart:
series: [{
name: 'Timestamp1',
data: processed_json.slice(0, 8)
Then once you've created the chart you need a function that can be called every second:
function addPoints(series1, series2) {
if (series1.length > 0) {
myChart.series[0].addPoint(series1.shift());
myChart.series[1].addPoint(series2.shift());
setTimeout(function() {
addPoints(series1, series2)
}, 3000);
}
}
And you start if off with the remaining data, like this:
addPoints(processed_json.slice(8), processed_json1.slice(8));
So basically the function will take (and remove) the first value from the array, and add it to the data series. It then sets a timeout to call itself in one second. It will keep going until there is no data left in the array. I hope that makes sense.
By the way, you may need to think again about how you're displaying this data - you're trying to display the timestamps (which are a huge number) and the difference between them (which is a very small number) on the same scale, which isn't really going to work.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.