I have implemented the following code to showcase a Highchart with 3 signals, which are updated periodically with animation. However, I am facing an issue where, for 2 of the signals, the dots are updated first and then the curve slides into the dots. This results in a jumpy transition when multiple signals are displayed. On the other hand, when I only display one signal, the visualization looks smoother as the dots never appear to "jump" out of the curve. Could someone provide guidance on how to update all curves without encountering this jumping effect?
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script type="text/javascript">
$(document).ready(function () {
function initData()
{
var data = [];
var time = Date.now();
for (var i = -60; i <= 0; i += 1) {
data.push({ x: time + i * 1000, y: 0 });
}
return data;
}
Highcharts.chart('container', {
chart: {
type: 'spline',
animation: { duration:500}, //false,
events: {
load: function () {
var series = this.series;
var len = series.length;
setInterval(function () {
var t = Date.now();
for (var j = 0; j < len; j++) {
series[j].addPoint([t, Math.random()], true, true);
}
}, 1000);
}
}
},
title: {text: 'Live random data'},
xAxis: {type: 'datetime', tickPixelInterval: 150 },
yAxis: {title: {text: 'Value' }, plotLines: [{value: 0, width: 1, color: '#808080'}] },
legend: { enabled: false },
exporting: { enabled: false },
series:
[
{ name: 'Random data', data: initData() },
{ name: 'Signal2', data: initData() },
{ name: 'Signal3', data: initData() }
]
});
});
</script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 500px; margin: 0 auto"></div>
</body>
</html>