improved javascript charts refresh mechanism
Costa Tsaousis (ktsaou) committed
Apr 3, 2014 at 21:59 UTC
92c685906e82421bf0aa0754d4e4bd6d16eb9fdc
2 files changed
+31
-24
web/index.html
+21
-20
@@ -57,11 +57,17 @@
57
mainchart.chartOptions.height = $(window).height() - 200;
58
if(mainchart.chartOptions.height < 300) mainchart.chartOptions.height = 300;
59
60
- mainchart.thumbnail = false;
60
mainchart.group = 5;
61
mainchart.div = 'maingraph';
62
mainchart.last_updated = 0;
64
- mainchart.explorer = false;
63
+ //mainchart.chartOptions.theme = 'maximized';
64
+ //mainchart.chartOptions.titlePosition = 'none';
65
+ //mainchart.chartOptions.axisTitlesPosition = 'in';
66
+ //mainchart.chartOptions.legend = {position: 'none'};
67
+ //mainchart.chartOptions.hAxis.title = null;
68
+ //mainchart.chartOptions.hAxis.viewWindowMode = 'maximized';
69
+ //mainchart.chartOptions.vAxis.viewWindowMode = 'maximized';
70
+
71
72
if(mainchart.chartOptions.isStacked) mainchart.group = 15;
73
@@ -69,7 +75,7 @@
75
mainchart.points_to_show = Math.round(mainchart.entries / mainchart.group) - 1;
76
77
// show max 10 mins of data
72
- if(mainchart.points_to_show * mainchart.group > 1200) mainchart.points_to_show = 1200 / mainchart.group;
78
+ if(mainchart.points_to_show * mainchart.group > 600) mainchart.points_to_show = 600 / mainchart.group;
79
80
// initialize the div
81
showChartIsLoading(mainchart.div, mainchart.chartOptions.width, mainchart.chartOptions.height);
@@ -242,32 +248,27 @@
248
}
249
250
// no chart refreshed
245
- if(last_thumb_updated == orig)
246
- triggerRefresh();
251
+ if(last_thumb_updated == orig) triggerRefresh();
252
}
253
254
// refresh the proper chart
255
+ var timeout;
256
function chartsRefresh() {
251
- if(mode == MODE_THUMBS)
252
- thumbChartsRefresh();
253
-
254
- else if(mode == MODE_MAIN)
255
- mainChartRefresh();
257
+ if(timeout) {
258
+ clearTimeout(timeout);
259
+ timeout = null;
260
+ }
261
257
- else
258
- setTimeout(triggerRefresh, 1000);
262
+ if(mode == MODE_THUMBS) thumbChartsRefresh();
263
+ else if(mode == MODE_MAIN) mainChartRefresh();
264
+ else timeout = setTimeout(triggerRefresh, 1000);
265
}
266
267
// callback for refreshing the charts later
268
function triggerRefresh() {
263
- if(mode == MODE_THUMBS)
264
- setTimeout(thumbChartsRefresh, 200);
265
-
266
- else if(mode == MODE_MAIN)
267
- setTimeout(mainChartRefresh, 500);
268
-
269
- else
270
- setTimeout(triggerRefresh, 1000);
269
+ if(mode == MODE_THUMBS) timeout = setTimeout(chartsRefresh, 200);
270
+ else if(mode == MODE_MAIN) timeout = setTimeout(chartsRefresh, 500);
271
+ else timeout = setTimeout(triggerRefresh, 1000);
272
}
273
274
window.onresize = function(event) {
web/netdata.js
+10
-4
@@ -38,7 +38,8 @@ function refreshChart(chart, doNext) {
38
url: url,
39
dataType:"json",
40
cache: false
41
- }).done(function(jsondata) {
41
+ })
42
+ .done(function(jsondata) {
43
if(!jsondata || jsondata.length == 0) return;
44
chart.jsondata = jsondata;
45
@@ -67,7 +68,8 @@ function refreshChart(chart, doNext) {
68
chart.last_updated = new Date().getTime();
69
}
70
else console.log('Cannot create chart for ' + chart.url);
70
-
71
+ })
72
+ .always(function() {
73
if(typeof doNext == "function") doNext();
74
});
75
@@ -84,7 +86,8 @@ function loadCharts(base_url, doNext) {
86
url: ((base_url)?base_url:'') + '/all.json',
87
dataType: 'json',
88
cache: false
87
- }).done(function(json) {
89
+ })
90
+ .done(function(json) {
91
$.each(json.charts, function(i, value) {
92
json.charts[i].div = json.charts[i].name.replace(/\./g,"_");
93
json.charts[i].div = json.charts[i].div.replace(/\-/g,"_");
@@ -221,7 +224,10 @@ function loadCharts(base_url, doNext) {
224
break;
225
}
226
});
224
-
227
+
228
if(typeof doNext == "function") doNext(json.charts);
229
+ })
230
+ .fail(function() {
231
+ if(typeof doNext == "function") doNext();
232
});
233
};