highchart autoupdate(addpoint) cause corrupted chart view

Question

Im using multiple highchart chart inside my page and i use addpoint function to update the chart. the problem is after some time the chart will be compressed into less than a half of original chart size. i captured my screen which could be found here for make the problem clear: http://www.screenr.com/f3E7

sample chart generation code:

$(function () {
                          $(document).ready(function() {
                          Highcharts.setOptions({
                          global: {
                          useUTC: false
                          }
                          });
                          //var chart;
                          chart = new Highcharts.Chart({
                          chart: {
                          renderTo: 'ch_trafficio',
                          type: 'spline',
                          marginRight: 10,
                          events: {
                          load: function() {
                          // set up the updating of the chart each second
                          var series = this.series[0];
                          var series1= this.series[1];
                          }
                          }
                          },
                          title: {
                          text: ''
                          },
                          xAxis: {
                          type: 'datetime',
                          tickPixelInterval: 150
                          },
                          yAxis: {
                          title: {
                          text: 'Value'
                          },
                          plotLines: [{
                          value: 0,
                          width: 1,
                          color: '#808080'
                          }]
                          },
                          tooltip: {
                          formatter: function() {
                          return '<b>'+ this.series.name +'</b><br/>'+
                          Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
                          Highcharts.numberFormat(this.y, 2);
                          }
                          },
                          plotOptions : {
                            area : {
                              lineWidth : 1,
                              marker : {
                                enabled : false,
                                states : {
                                  hover : {
                                    enabled : true,
                                    radius : 5
                                  }
                                }
                              },
                              shadow : false,
                              states : {
                                hover : {
                                  lineWidth : 1
                                }
                              }
                            }
                          },
                          legend: {
                          enabled: true
                          },
                          exporting: {
                          enabled: true
                          },
                          series: [{
                          name: 'InBound',
                          type : "area",
                          color: '#89A54E',
                          data: (function() {
                          // generate an array of random data
                          var data = [],
                          time = (new Date()).getTime(),
                          i;
                          for (i = -119; i <= 0; i++) {
                          data.push({
                          x: time + i * 1000,
                          y: Math.random()
                          });
                          }
                          return data;
                          })()
                          },{
                           name: 'OutBound',
                           type : "area",
                           color: '#AA4643',

                           data: (function() {
                          // generate an array of random data
                          var data = [],
                          time = (new Date()).getTime(),
                          i;
                          for (i = -119; i <= 0; i++) {
                          data.push({
                          x: time + i * 1000,
                          y: Math.random()
                          });
                          }
                          return data;
                          })()
                           }
                          ]
                          });

chart update functions:

chart.series[0].addPoint([x,data.oid1], false, true);
chart.series[1].addPoint([x,data.oid2], true, true);
chart1.series[0].addPoint([x,data.oid5], true, true);
chart2.series[0].addPoint([x,data.oid3], false, true);
chart2.series[1].addPoint([x,data.oid4], true, true);
chart3.series[0].addPoint([x,data.oid7], true, true);

thanks in advance

Answer 1

you need to add a shifting parameter for your points to shift over the chart

var series = chart.series[0],
shift = series.data.length > 100; // shift if the series is longer than 100

and to change adding point like below

chart.series[0].addPoint([x,data.oid1], true, shift);

example here