Highchart xaxis data decrease when shift -
i creating chart , populating random data every 5 minute. set xaxis data range 5 hour , when start initial data, it's width full in chart when continuously add point, data width decreasing. how do make not decrease series width?
i have 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 bad english.
why adding twice same point? highcharts doesn't support 2 points in 1 series same x-value. removed 1 of addpoint()
, works fine: http://jsfiddle.net/ylfhd/8/
Comments
Post a Comment