Highchart实时数据更新导致浏览器崩溃

Question

我正在将livingata更新为highchart时面临。这就是我在做什么 http://jsfiddle.net/pqtg9p7c/4/

第1步：

我将从JSON文件中加载几组数据，其中包含旧记录，此数据由uisng setData （）metohd推送到图表。

第2步：

从第1步加载数据后，每发送一个请求，并通过调用图表api的 addPont （）方法添加点数

目前在Fiddle链接中，我已经注释了每秒的调用方法，因为它崩溃了浏览器，不知道为什么。

$(function () {

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


chart = new Highcharts.stockChart({
            title: {
                 text: 'Roof Top Unit Power Demand'
            },

            chart: {
                renderTo: 'container15',
                defaultSeriesType: 'spline',
                height: 600,
                events: {
                    // load: requestData
                } 
            },
          rangeSelector: {
                enabled:true,
                 buttons: [{ 
                     count: 1,
                     type: 'second',
                     text: '1S',
                     dataGrouping: {
                        forced: true,
                         units: [['second', [1]]]
                        } 
            },{ 
                     count: 1,
                     type: 'minute',
                     text: '1M',
                     dataGrouping: {
                        forced: true,
                         units: [['second', [1]]]
                        } 
            },{ 

                    count: 5, 
                    type: 'minute', 
                    text: '5M',
                    dataGrouping: {
                        forced: true,
                         units: [['second', [1]]]
                        } 
            },{
                type: 'hour',
                count: 3,
                text: 'Hour',
                dataGrouping: {
                    forced: true,
                    units: [['minute', [1]]]
                }
            },{
                type: 'month',
                count: 3,
                text: 'Day',
                dataGrouping: {
                    forced: true,
                    units: [['minute', [5]]]
                }
            }, { type: 'all', text: 'All' }], selected: 0, allButtonsEnabled: true,
            },

            //tooltip: {
            //    shared: true
            //  },

            tooltip: {
            pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b>',
            valueDecimals: 2,
            split: true
              },  


            legend: {
                enabled: true,
            },  
            xAxis: {
                type: 'datetime',
                tickPixelInterval: 150,
                maxZoom: 20 * 1000
            },
            yAxis: [{ // Primary yAxis
                labels: {
                    format: '{value} ',
                    style: {
                        color: Highcharts.getOptions().colors[0]
                    }
                },
                title: {
                    text: 'kW',
                    style: {
                        color: Highcharts.getOptions().colors[0]
                    }
                },
                opposite: true

            }, ],

            series: [{
                name: 'RTU1 kW',
                data: [],
                yAxis:0
            },{
                name: 'RTU2 kW',
                data: [],
                yAxis:0
            },{
                name: 'RTU3 kW',
                data: [],
                yAxis:0
            },{
                name: 'Total power kW',
                data: [],
                yAxis:0
            }]
        });



loadJSON()

//Step1
//this will load init data by making call to json
function loadJSON(){
        var values=[];

           $.ajax({
                url: 'https://api.myjson.com/bins/oty0t', 
                cache: false,
                dataType:'json',
                success:function(res){
                    var data1=res.rtu1;
                    var data2=res.rtu2;
                    var data3=res.rtu3;

                    var values1 = [];
                    var values2 = [];
                    var values3 = [];
                  for (var i = 0; i < data1.length; i++) {
                        var item1 = {};
                          item1.y = data1[i].power/1000;
                        item1.x = new Date(data1[i]['date']).getTime();
                        values1.push(item1)

                  }  

                  for (var j = 0; j < data2.length; j++) {
                        var item2 = {};
                        item2.y = data2[j].power/1000;
                        item2.x = new Date(data2[j]['date']).getTime();
                        values2.push(item2);

                   }  

                  for (var k = 0; k < data3.length; k++) {
                    var item3 = {};
                    item3.y = data3[k].power/1000;
                    item3.x = new Date(data3[k]['date']).getTime();
                    values3.push(item3);
                  }  

                  chart.series[0].setData(values1);
                  chart.series[1].setData(values2);
                  chart.series[2].setData(values3);
                   //commented out this method, otherwise browser will crash
                                    //setTimeout(liveData(),5000)

                },
                error:function(data){
                    // console.log(data);
                }
            });
    }



//this will add live data points
 function liveData(){
          var x = (new Date()).getTime(), // current time
              y = Math.round(Math.random() * 100);
                            chart.series[0].addPoint([x,y], false, true);
                    chart.series[1].addPoint([x,y], false, true);
                    chart.series[2].addPoint([x,y], false, true);
        }

});

请让我知道我错在哪里。

谢谢，