added delayed loading of charting libraries; now chart libraries are loaded only if and when are needed
Costa Tsaousis (ktsaou) committed
Dec 2, 2015 at 08:37 UTC
3795a491a28d7b686ae16ba703aa8c8d45019a5f
2 files changed
+78
-45
web/dashboard.html
+1
-5
@@ -48,7 +48,7 @@ This is a template for building custom dashboards. To build a dashboard you just
48
<li>You can host your dashboard anywhere.</li>
49
<li>You can add as many charts as you like.</li>
50
<li>You can have charts from many different netdata servers (add <pre>data-host="http://another.netdata.server:19999/"</pre> to each chart).</li>
51
- <li>You can use different chart libraries on the same page: <b>peity</b>, <b>sparkline</b>, <b>dygraph</b>, <b>google</b> (requires some more lines in your html page - view source this one), <b>morris</b></li>
51
+ <li>You can use different chart libraries on the same page: <b>peity</b>, <b>sparkline</b>, <b>dygraph</b>, <b>google</b>, <b>morris</b></li>
52
<li>You can customize each chart to your preferences. For each chart library most of their attributes can be given in <b>data-</b> attributes.</li>
53
<li>Each chart can have each own duration - it is controlled with the <b>data-after</b> attribute to give that many seconds of data.</li>
54
<li>Depending on the width of the chart and <b>data-after</b> attribute, netdata will automatically refresh the chart when it needs to be updated. For example giving 600 pixels for width for -600 seconds of data, using a chart library that needs 3 pixels per point, will yeld in a chart updated once every 3 seconds.</li>
@@ -295,10 +295,6 @@ Unfortunatelly, Morris Charts are veeeeeeeeeeeeeeeery slow! We force them to low
295
296
</body>
297
</html>
298
- <!-- You can disable Google Visualization by commenting the following two lines -->
299
- <script type="text/javascript" src="https://www.google.com/jsapi"></script>
300
- <script type='text/javascript'>google.load('visualization', '1.1', {'packages':['corechart', 'controls']});</script>
301
-
298
<!-- you can set your netdata server globally, by ucommenting this -->
299
<!-- you can also give a different server per chart, with the attribute: data-host="http://netdata.server:19999" -->
300
<!-- <script> netdataServer = "http://box:19999"; </script> -->
web/dashboard.js
+77
-40
@@ -112,6 +112,7 @@
112
100: { message: "Cannot load chart library", alert: true },
113
101: { message: "Cannot load jQuery", alert: true },
114
402: { message: "Chart library not found", alert: false },
115
+ 403: { message: "Chart library not enabled/is failed", alert: false },
116
404: { message: "Chart not found", alert: false }
117
};
118
NETDATA.errorLast = {
@@ -246,6 +247,17 @@
247
NETDATA.messageInABox(target, 'chart library "' + library + '" is not found');
248
NETDATA.validateDomCharts(targets, ++index, callback);
249
}
250
+ else if(!NETDATA.chartLibraries[library].enabled) {
251
+ NETDATA.error(403, library);
252
+ NETDATA.messageInABox(target, 'chart library "' + library + '" is not enabled');
253
+ NETDATA.validateDomCharts(targets, ++index, callback);
254
+ }
255
+ else if(!NETDATA.chartLibraries[library].initialized) {
256
+ self.data('prepared', false);
257
+ NETDATA.chartLibraries[library].initialize(function() {
258
+ NETDATA.validateDomCharts(targets, index, callback);
259
+ });
260
+ }
261
else {
262
var url = host + "/api/v1/chart?chart=" + id;
263
@@ -269,6 +281,9 @@
281
});
282
}
283
}
284
+ else {
285
+ NETDATA.validateDomCharts(targets, ++index, callback);
286
+ }
287
}
288
}
289
@@ -494,8 +509,11 @@
509
callback();
510
})
511
}
497
- else if(typeof callback == "function")
498
- callback();
512
+ else {
513
+ NETDATA.chartLibraries.peity.enabled = false;
514
+ if(typeof callback == "function")
515
+ callback();
516
+ }
517
};
518
519
NETDATA.peityChartUpdate = function(element, data) {
@@ -513,16 +531,6 @@
531
NETDATA.peityChartCreate = function(element, data) {
532
var self = $(element);
533
516
- if(!NETDATA.chartLibraries.peity.initialized) {
517
- if(!NETDATA.chartLibraries.peity.enabled) {
518
- NETDATA.messageInABox(element, 'peity is disabled.');
519
- }
520
- else {
521
- NETDATA.messageInABox(element, 'peity is initializing...');
522
-
523
- }
524
- }
525
-
534
var uuid = NETDATA.guid();
535
element.innerHTML = '<div id="' + uuid + '">' + data + '</div>';
536
var instance = document.getElementById(uuid);
@@ -552,8 +560,11 @@
560
callback();
561
})
562
}
555
- else if(typeof callback == "function")
556
- callback();
563
+ else {
564
+ NETDATA.chartLibraries.sparkline.enabled = false;
565
+ if(typeof callback == "function")
566
+ callback();
567
+ }
568
};
569
570
NETDATA.sparklineChartUpdate = function(element, data) {
@@ -713,8 +724,11 @@
724
NETDATA.dygraphInitSync(callback);
725
})
726
}
716
- else if(typeof callback == "function")
717
- callback();
727
+ else {
728
+ NETDATA.chartLibraries.dygraph.enabled = false;
729
+ if(typeof callback == "function")
730
+ callback();
731
+ }
732
};
733
734
NETDATA.dygraphChartUpdate = function(element, data) {
@@ -875,6 +889,21 @@
889
890
NETDATA.morrisInitialize = function(callback) {
891
if(typeof netdataStopMorris == 'undefined') {
892
+
893
+ // morris requires raphael
894
+ if(!NETDATA.chartLibraries.raphael.initialized) {
895
+ if(NETDATA.chartLibraries.raphael.enabled) {
896
+ NETDATA.raphaelInitialize(function() {
897
+ NETDATA.morrisInitialize(callback);
898
+ });
899
+ }
900
+ else {
901
+ NETDATA.chartLibraries.morris.enabled = false;
902
+ if(typeof callback == "function")
903
+ callback();
904
+ }
905
+ }
906
+
907
var fileref = document.createElement("link");
908
fileref.setAttribute("rel", "stylesheet");
909
fileref.setAttribute("type", "text/css");
@@ -895,8 +924,11 @@
924
callback();
925
})
926
}
898
- else if(typeof callback == "function")
899
- callback();
927
+ else {
928
+ NETDATA.chartLibraries.morris.enabled = false;
929
+ if(typeof callback == "function")
930
+ callback();
931
+ }
932
};
933
934
NETDATA.morrisChartUpdate = function(element, data) {
@@ -971,8 +1003,11 @@
1003
callback();
1004
})
1005
}
974
- else if(typeof callback == "function")
975
- callback();
1006
+ else {
1007
+ NETDATA.chartLibraries.raphael.enabled = false;
1008
+ if(typeof callback == "function")
1009
+ callback();
1010
+ }
1011
};
1012
1013
NETDATA.raphaelChartUpdate = function(element, data) {
@@ -998,13 +1033,27 @@
1033
// google charts
1034
1035
NETDATA.googleInitialize = function(callback) {
1001
- if(typeof netdataStopGoogleCharts == 'undefined' && typeof google != 'undefined') {
1002
- NETDATA.registerChartLibrary('google', NETDATA.google_js);
1036
+ if(typeof netdataStopGoogleCharts == 'undefined') {
1037
+ $.getScript(NETDATA.google_js)
1038
+ .done(function() {
1039
+ NETDATA.registerChartLibrary('google', NETDATA.google_js);
1040
+
1041
+ google.load('visualization', '1.1', {
1042
+ 'packages': ['corechart', 'controls'],
1043
+ 'callback': callback
1044
+ });
1045
+ })
1046
+ .fail(function() {
1047
+ NETDATA.error(100, NETDATA.google_js);
1048
+ if(typeof callback == "function")
1049
+ callback();
1050
+ })
1051
+ }
1052
+ else {
1053
+ NETDATA.chartLibraries.google.enabled = false;
1054
if(typeof callback == "function")
1055
callback();
1056
}
1006
- else if(typeof callback == "function")
1007
- callback();
1057
};
1058
1059
NETDATA.googleChartUpdate = function(element, data) {
@@ -1195,9 +1244,9 @@
1244
NETDATA.registerChartLibrary = function(library, url) {
1245
console.log("registering chart library: " + library);
1246
1198
- NETDATA.chartLibraries[library]
1199
- .url = url
1200
- .initialized = new Date().getTime();
1247
+ NETDATA.chartLibraries[library].url = url;
1248
+ NETDATA.chartLibraries[library].initialized = true;
1249
+ NETDATA.chartLibraries[library].enabled = true;
1250
1251
console.log(NETDATA.chartLibraries);
1252
}
@@ -1209,19 +1258,7 @@
1258
1259
NETDATA._loadjQuery(function() {
1260
$.getScript(NETDATA.serverDefault + 'lib/visible.js').then(function() {
1212
- NETDATA.raphaelInitialize(function() {
1213
- NETDATA.morrisInitialize(function() {
1214
- NETDATA.peityInitialize(function() {
1215
- NETDATA.sparklineInitialize(function() {
1216
- NETDATA.dygraphInitialize(function() {
1217
- NETDATA.googleInitialize(function() {
1218
- NETDATA.init();
1219
- }) // google
1220
- }) // dygraph.js
1221
- }) // sparkline.js
1222
- }) // piety.js
1223
- }) // morris.js
1224
- }) // raphael.js
1261
+ NETDATA.init();
1262
})
1263
});
1264