improved javascript charts refresh mechanism

diff --git a/web/index.html b/web/index.html
index 75e87ea8001715732ef149a3250c36f81ba746e5..1874d29336f3cf0ff0beec71d41d2c68db651c72 100644 (file)
--- a/web/index.html
+++ b/web/index.html
@@ -57,11 +57,17 @@
                mainchart.chartOptions.height = $(window).height() - 200;
                if(mainchart.chartOptions.height < 300) mainchart.chartOptions.height = 300;
                
-               mainchart.thumbnail = false;
                mainchart.group = 5;
                mainchart.div = 'maingraph';
                mainchart.last_updated = 0;
-               mainchart.explorer = false;
+               //mainchart.chartOptions.theme = 'maximized';
+               //mainchart.chartOptions.titlePosition = 'none';
+               //mainchart.chartOptions.axisTitlesPosition = 'in';
+               //mainchart.chartOptions.legend = {position: 'none'};
+               //mainchart.chartOptions.hAxis.title = null;
+               //mainchart.chartOptions.hAxis.viewWindowMode = 'maximized';
+               //mainchart.chartOptions.vAxis.viewWindowMode = 'maximized';
+
 
                if(mainchart.chartOptions.isStacked) mainchart.group = 15;
 
@@ -69,7 +75,7 @@
                mainchart.points_to_show = Math.round(mainchart.entries / mainchart.group) - 1;
 
                // show max 10 mins of data
-               if(mainchart.points_to_show * mainchart.group > 1200) mainchart.points_to_show = 1200 / mainchart.group;
+               if(mainchart.points_to_show * mainchart.group > 600) mainchart.points_to_show = 600 / mainchart.group;
 
                // initialize the div
                showChartIsLoading(mainchart.div, mainchart.chartOptions.width, mainchart.chartOptions.height);
@@ -242,32 +248,27 @@
                }
 
                // no chart refreshed
-               if(last_thumb_updated == orig)
-                       triggerRefresh();
+               if(last_thumb_updated == orig) triggerRefresh();
        }
 
        // refresh the proper chart
+       var timeout;
        function chartsRefresh() {
-               if(mode == MODE_THUMBS)
-                       thumbChartsRefresh();
-
-               else if(mode == MODE_MAIN)
-                       mainChartRefresh();
+               if(timeout) {
+                       clearTimeout(timeout);
+                       timeout = null;
+               }
 
-               else
-                       setTimeout(triggerRefresh, 1000);
+                    if(mode == MODE_THUMBS) thumbChartsRefresh();
+               else if(mode == MODE_MAIN)   mainChartRefresh();
+               else                         timeout = setTimeout(triggerRefresh, 1000);
        }
 
        // callback for refreshing the charts later
        function triggerRefresh() {
-               if(mode == MODE_THUMBS)
-                       setTimeout(thumbChartsRefresh, 200);
-
-               else if(mode == MODE_MAIN)
-                       setTimeout(mainChartRefresh, 500);
-
-               else
-                       setTimeout(triggerRefresh, 1000);
+                    if(mode == MODE_THUMBS) timeout = setTimeout(chartsRefresh, 200);
+               else if(mode == MODE_MAIN)   timeout = setTimeout(chartsRefresh, 500);
+               else                         timeout = setTimeout(triggerRefresh, 1000);
        }
 
        window.onresize = function(event) {

diff --git a/web/netdata.js b/web/netdata.js
index a7d9709296b7cc7eef08e2f08d373b7413d38d00..e4d0e6df3ed0374827bb5ff1847d02651f861046 100644 (file)
--- a/web/netdata.js
+++ b/web/netdata.js
@@ -38,7 +38,8 @@ function refreshChart(chart, doNext) {
                url: url,
                dataType:"json",
                cache: false
-       }).done(function(jsondata) {
+       })
+       .done(function(jsondata) {
                if(!jsondata || jsondata.length == 0) return;
                chart.jsondata = jsondata;
                
@@ -67,7 +68,8 @@ function refreshChart(chart, doNext) {
                        chart.last_updated = new Date().getTime();
                }
                else console.log('Cannot create chart for ' + chart.url);
-
+       })
+       .always(function() {
                if(typeof doNext == "function") doNext();
        });
 
@@ -84,7 +86,8 @@ function loadCharts(base_url, doNext) {
                url: ((base_url)?base_url:'') + '/all.json',
                dataType: 'json',
                cache: false
-       }).done(function(json) {
+       })
+       .done(function(json) {
                $.each(json.charts, function(i, value) {
                        json.charts[i].div = json.charts[i].name.replace(/\./g,"_");
                        json.charts[i].div = json.charts[i].div.replace(/\-/g,"_");
@@ -221,7 +224,10 @@ function loadCharts(base_url, doNext) {
                                        break;
                        }
                });
-
+               
                if(typeof doNext == "function") doNext(json.charts);
+       })
+       .fail(function() {
+               if(typeof doNext == "function") doNext();
        });
 };