Dynamic chart not working correctly (highcharts)?
The problem I'm having is that the black line does some funky things compared to the blue line. If you swipe in the middle or somewhere else (use the bottom scroll tool) you can clearly see that the black line is changing its shape and the blue line is taking shape, weird. This only happens when using the scroll tool.
How can I prevent the black line from changing? Copy this code and replace it with JSfiddle to see the problem:
$(function () {
Highcharts.setOptions({
global : {
useUTC : false
}
});
// Create the chart
$('#container').highcharts('StockChart', {
chart : {
events : {
load : function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series.addPoint([x, y], true, true);
}, 1000);
var series1 = this.series[1];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series1.addPoint([x, y], true, true);
}, 1000);
}
}
},
rangeSelector: {
buttons: [{
count: 1,
type: 'minute',
text: '1M'
}, {
count: 5,
type: 'minute',
text: '5M'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false,
selected: 0
},
title : {
text : 'Live random data'
},
exporting: {
enabled: false
},
series : [{
name : 'diagram1',
data : (function () {
// generate an array of random data
var data1 = [], time = (new Date()).getTime(), i;
for (i = -999; i <= 0; i += 1) {
data1.push([
time + i * 1000,
Math.round(Math.random() * 100)
]);
}
return data1;
}())
},
{
name : 'diagram2',
data : (function () {
// generate an array of random data
var data2 = [], time = (new Date()).getTime(), i;
for (i = -999; i <= 0; i += 1) {
data2.push([
time + i * 1000,
Math.round(Math.random() * 100)
]);
}
return data2;
}())
}]
});
});
The only thing I did was add an extra dynamic line (black) to the diagram. Here is the source code without the black line. View original code
source to share
The reason for the movement of the black line is the redrawing and animation function of the chart. For some reason, the first series (blue line) does not display the animation after the call , so you cannot see the movement. The second parameter in the function . Setting it to false for the second series (black line) will stop movement when the points are updated: addPoint
addPoint
redraw
series1.addPoint([x, y], false, true);
Here is DEMO .
source to share