Highcharts live chart shifts continuously - highcharts

Question

I have the following issue:
I initialize the chart with null values because I don't have meaningful initial values.
I add points with addPoint after getting the data through ajax
The problem is that the chart shifts continuously and not just on the end of the time range.
I use the code:
generateInitialData = function() {
var initialData = [];
var time = (new Date()).getTime();
var i;
for (i = -99; i <= 0; i++) {
initialData.push([time + i * 3000,null]);
}
return initialData;
}
addPoint = function(){
var max = 1000;
var min = 300;
var value = Math.floor(Math.random() * (max - min + 1)) + min;
chart.series[0].addPoint([(new Date()).getTime(), value], true, true);
}
$('#container').highcharts({
chart: {
type: 'line',
},
xAxis: {
type: 'datetime',
minRange:1000 * 60 * 5,
maxRange:1000 * 60 * 5
}
});
var chart = $('#container').highcharts();
chart.addSeries({"name": "example","data":generateInitialData()});
setInterval(addPoint,3000);
Please see jsFiddle demo of the issue :
http://jsfiddle.net/wXmLQ/7/
Please help
Tali

Answer 1

You don't need to set null data from the beginning, instead of that you can just addd one empty point and just check if you want to shift or not, see: http://jsfiddle.net/Fusher/wXmLQ/8/
addPoint = function(){
var max = 1000;
var min = 300;
var value = Math.floor(Math.random() * (max - min + 1)) + min;
var len = chart.series[0].data.length;
chart.series[0].addPoint([(new Date()).getTime(), value], len < 99);
}
$('#container').highcharts({
chart: {
type: 'line',
},
xAxis: {
type: 'datetime',
minTickInterval: 1000 * 60, //one minute
minRange:1000 * 60 * 5,
maxRange:1000 * 60 * 5
}
});
var chart = $('#container').highcharts();
chart.addSeries({"name": "example","data":[[+new Date(), null]]});
setInterval(addPoint,3000);

Answer 2

The addPoint and addSeries methods have a re-draw parameter that defaults to true. Make this parameter false whenever you call an updating method
chart.series[0].addPoint([(new Date()).getTime(), value], false);
chart.addSeries({"name": "example","data":generateInitialData()}, false);
Then once you've made all the updates, explicitly redraw the chart
chart.redraw();