Highcharts live graph setExtremes issue

Question

У меня есть highchart с обновлением реальных данных, я использую setInterval для добавления поддельных данных и когда данные получены от вызова ajax. Я добавляю или обновляю точку данных в зависимости от того, существует ли временная метка или нет на графике, как вы можете увидеть в примере, хотя столбцы из графа области длина данных продолжает расти,

http://jsfiddle.net/3sf5kq78/1/

$(function() { 
var minTime = (new Date()).getTime(); 
var time_range = 20000; 
var maxTime = minTime - time_range; 


$(document).ready(function() { 

    $('#add').on('click', function(){ 

     updateDataPoints(); 

    }); 

    /** 
    * Function to update data points, in real using using socket 
    */ 
    var updateDataPoints = function(){ 
     var data = chart.series[0].data; 
     var updateCount=0; 
    for(var i=0; i<data.length;i++){ 
     var row = data[i]; 
     row.update(row.y+Math.random(1,5)); 
     updateCount++; 
    } 


     $('#updateCount').text(updateCount); 
    } 

    Highcharts.setOptions({ 
     global: { 
      useUTC: false 
     } 
    }); 

    var chart = new Highcharts.Chart({ 
     chart: { 
      renderTo:'container', 
      type: 'column', 
      animation: Highcharts.svg, // don't animate in old IE 
      marginRight: 10, 
      events: { 
       load: function() { 

        // set up the updating of the chart each second 
        var series = this.series[0]; 
        setInterval(function() { 
         var x = (new Date()).getTime(), // current time 
          y = 1; 
         series.addPoint([x, y], true, false); 

         var time = ((new Date()).getTime()); 
       chart.xAxis[0].setExtremes(time - time_range, time); 

         $('#count').text(series.data.length); 
        }, 1000); 
       } 
      } 
     }, 
     title: { 
      text: 'Live random data' 
     }, 
     xAxis: { 
      type: 'datetime', 
      tickPixelInterval: 150, 
      max: minTime, 
      min: maxTime 

     }, 
     yAxis: { 
      min:0, 
      max:20, 
      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); 
      } 
     }, 
     legend: { 
      enabled: false 
     }, 
     exporting: { 
      enabled: false 
     }, 
     series: [{ 
      name: 'Random data', 
      data: [] 
     }] 
    }); 
}); 

});

как я могу ограничить количество точек данных только, которые видны на графике (с использованием setExtremes)

Answer 1

Вы можете использовать обновление серии, а затем нарежьте данные, чтобы сохранить ту же длину серии.

load: function() { 

       var series = this.series[0], 
        yData = series.yData, 
        y; 

       setInterval(function() { 
        y = Math.random(); 
        yData = series.yData; 

        yData.push(y); 
        series.yData = yData; 
        series.update({ 
         data: yData.slice(1) 
        }); 

       }, 1000); 
      } 

Пример: http://jsfiddle.net/owk1Lere/2/