I'm trying to add 100 points at once dynamically to Highcharts and shift the chart after 1000 added points. But I do not get it to work in a good way. Here is my code. What is it that I am doing wrong?
var chart;
var minData = 1000;
function myFunction() {
setInterval(function() {
for (var i = 0; i < 100; i++) {
var y = Math.random();
var shift = (chart.series[0].data.length >= minData ? true : false);
chart.series[0].addPoint(y, false, shift);
}
chart.redraw();
}, 1000);
}
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: "container",
type: "spline",
zoomType: 'x'
},
title: {
text: 'Inverter ~ AC Currents'
},
subtitle: {
text: 'Click and drag in the plot area to zoom in'
},
plotOptions: {
spline: {
turboThreshold: 5000,
lineWidth: 2,
states: {
hover: {
enabled: true,
lineWidth: 3
}
},
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 5,
lineWidth: 1
}
}
}
}
},
xAxis: {
type: 'datetime',
tickPixelInterval: 100,
labels: {
rotation: -45,
align: 'right',
style: "font: 'normal 10px Verdana, sans-serif'"
},
title: {
text: 'Date/Time'
}
},
yAxis: {
title: {
text: 'Current ~ Amps'
}
},
tooltip: {
formatter: function() {
var celcius = parseInt(this.point.t - 273);
var farenheit = parseInt((9 / 5) * (this.point.t - 273) + 32);
return ' ' +
'<span style="color:blue;font-weight:bold;">' + this.series.name + '</span><br />' +
'<span style="color:blue;font-weight:bold;">' + Highcharts.dateFormat('%m/%d/%Y %H:%M:%S', this.point.x) + '</span><br />' +
'<span style="color:red;font-weight:normal;">' + 'Amps: </span><span style="font-weight:800;">' + this.point.y + '</span><br />';
}
},
exporting: {
enabled: true
},
series: [{
name: 'Random data',
data: []
}]
});
});