How to update HighChart series inside setInterval method

时间:2017-08-05 11:13:13

标签: javascript jquery html graph highcharts

I have a spline graph which compare page views count of today and last 7 days of one host. Once graph is loaded in browser, a new point added periodically using load method given below. Things are working fine here.

There is option to add or remove new host using check box.

My problem: When user select new host, graph is populated successfully with older host. But graph is not getting updated for new host periodically. As per code below HighChart series is passed in setInterval method which is not getting updated for new host.

My Question: How to update series, so I can add point for newly added host periodically.

Please guide me... Thanks in advance.

 events : {
                    load : function() {
                        var thisseries = this.series;
                        setInterval(function() {
                        var data = getMegaGraphPointsForFiveMin();
                        var index = 0;
                        for(var i = 0 ; i< data.length; i++){
                            var series =  thisseries[index];
                            var innerData = data[i];
                            var dataArray = innerData.dataArrayP;
                            var xval = dataArray[0].x;
                            var yval = dataArray[0].y;
                            series.addPoint([xval, yval], true, false);
                            index = index + 2;
                        }
                        },  60*1000);// add new page view count in every  min dynamically.
                    }
                }
            },

1 个答案:

答案 0 :(得分:1)

我已经找到了上述问题的答案。

问题:每次用户选择任何主机的复选框时都会调用Load方法。 在Load方法中,我们使用setInterval()方法,它在后台连续给定间隔后运行。

解决方案:因此,在每次加载方法调用时,我都会清除旧的setInterval,如下所示。 这可能对像我这样的初学者有所帮助

找到下面的代码

//全局变量

var myTimervar;

events : {
                load : function() {
                    var thisseries = this.series;
                    if(myTimervar){
                        window.clearInterval(myTimervar);
                    }
                    myTimervar = setInterval(function() {
                        var data = getMegaGraphPointsForFiveMin();
                        var index = 0;
                        for (var i = 0; i < data.length; i++) {
                            var series = thisseries[index];
                            var innerData = data[i];
                            var dataArray = innerData.dataArrayP;
                            var xval = dataArray[0].x;
                            var yval = dataArray[0].y;
                            series.addPoint([ xval, yval ], true, false);
                            index = index + 2;
                        }
                    }, 300 * 1000);// add new page view count in every 5 min
                                    // dynamically.
                }
            }