Highchart xaxis data decrease when shift - highcharts

Question

I am creating a chart and populating a random data every 5 minute. I set the xAxis data range to 5 hour and when start with initial data, it's width is full in chart but when continuously add point, the data width is decreasing. How do I do to make it not decrease the series width?
I have the following code:
$(function () {
var current_time = (new Date()).getTime()+300000;
var now_time = (new Date()).getTime();
var zone_name = ['A','B','C'];
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
$('#container').highcharts({
chart: {
type: 'spline',
animation: Highcharts.svg,
marginRight: 10,
events: {
load: function() {
var chartsss = $('#container').highcharts();
setInterval(function() {
for(var i=0;i<zone_name.length;i++)
{
var seriessx = chartsss.series[i];
seriessx.addPoint([current_time, Math.random()], false, true);
seriessx.addPoint([current_time, Math.random()], false, true);
}
chartsss.redraw();
current_time += 300000;
}, 1000);
}
}
},
plotOptions: {
series: {
marker: {
enabled: false
}
},
spline: {
lineWidth: 2,
states: {
hover: {
lineWidth:3
}
},
marker: {
enabled: false,
states: {
hover: {
enabled: false,
symbol: 'circle',
fillColor: '#ff0000',
radius: 4,
lineWidth: 1
}
}
}
},
},
title: {
text: 'Daily Zone'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%e of %b',
minute: '%H:%M',
hour: '%H:%M'
},
tickPosition: 'inside',
tickInterval: 3600 * 1000,
minRange:5 * 3600 * 1000,
maxRange:5 * 3600 * 1000
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%H:%M', this.x) +'<br/>'+
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: true
},
exporting: {
enabled: false
},
series: (function(){
var seriesx = [];
for(var i=0;i<zone_name.length;i++)
{
var datax = [];
var time = (new Date()).getTime();
now_time=current_time;
for(var j = -59 ;j <= 0;j++)
{
datax.push({
x: now_time,
y: Math.random()
});
now_time+=300000;
}
seriesx.push({
name:zone_name[i],
data: datax
});
}
current_time=now_time;
return seriesx;
})()
});
});
});
JsFiddle Link: http://jsfiddle.net/jedipalm/YLFhD/4/
Image when started chart: http://i.stack.imgur.com/rE8m3.jpg
Image when continuously add point in few second :http://i.stack.imgur.com/J8GtA.jpg
sorry for my bad English.

Answer 1

Why you are adding twice the same point? Highcharts doesn't support two points in one series with the same x-value. Removed one of addPoint() and works fine: http://jsfiddle.net/YLFhD/8/

Answer 2

try following code:
for(var j = -120 ;j <= 0;j++)
{
datax.push({
x: now_time,
y: Math.random()
});
now_time+=300000;
}
http://jsfiddle.net/YLFhD/6/