added delayed loading of charting libraries; now chart libraries are loaded only...

diff --git a/web/dashboard.html b/web/dashboard.html
index 023292b9ac99619c8a8f75b12e8854110d861881..8ed622d00cef2ebae2dfdc7462a0e317d1b26e88 100755 (executable)
--- a/web/dashboard.html
+++ b/web/dashboard.html
@@ -48,7 +48,7 @@ This is a template for building custom dashboards. To build a dashboard you just
        <li>You can host your dashboard anywhere.</li>
        <li>You can add as many charts as you like.</li>
        <li>You can have charts from many different netdata servers (add <pre>data-host="http://another.netdata.server:19999/"</pre> to each chart).</li>
-       <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>
+       <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>
        <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>
        <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>
        <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
 
 </body>
 </html>
-       <!-- You can disable Google Visualization by commenting the following two lines -->
-       <script type="text/javascript" src="https://www.google.com/jsapi"></script>
-       <script type='text/javascript'>google.load('visualization', '1.1', {'packages':['corechart', 'controls']});</script>
-
        <!-- you can set your netdata server globally, by ucommenting this -->
        <!-- you can also give a different server per chart, with the attribute: data-host="http://netdata.server:19999" -->
        <!-- <script> netdataServer = "http://box:19999"; </script> -->

diff --git a/web/dashboard.js b/web/dashboard.js
index fbb8b2fe89934825ad5abf8e308c38e994d3870f..4e2cb8920d4b83d60b72b23aa4f51c4a76f66499 100755 (executable)
--- a/web/dashboard.js
+++ b/web/dashboard.js
@@ -112,6 +112,7 @@
                100: { message: "Cannot load chart library", alert: true },
                101: { message: "Cannot load jQuery", alert: true },
                402: { message: "Chart library not found", alert: false },
+               403: { message: "Chart library not enabled/is failed", alert: false },
                404: { message: "Chart not found", alert: false }
        };
        NETDATA.errorLast = {
@@ -246,6 +247,17 @@
                                        NETDATA.messageInABox(target, 'chart library "' + library + '" is not found');
                                        NETDATA.validateDomCharts(targets, ++index, callback);
                                }
+                               else if(!NETDATA.chartLibraries[library].enabled) {
+                                       NETDATA.error(403, library);
+                                       NETDATA.messageInABox(target, 'chart library "' + library + '" is not enabled');
+                                       NETDATA.validateDomCharts(targets, ++index, callback);
+                               }
+                               else if(!NETDATA.chartLibraries[library].initialized) {
+                                       self.data('prepared', false);
+                                       NETDATA.chartLibraries[library].initialize(function() {
+                                               NETDATA.validateDomCharts(targets, index, callback);
+                                       });
+                               }
                                else {
                                        var url = host + "/api/v1/chart?chart=" + id;
 
@@ -269,6 +281,9 @@
                                        });
                                }
                        }
+                       else {
+                               NETDATA.validateDomCharts(targets, ++index, callback);
+                       }
                }
        }
 
@@ -494,8 +509,11 @@
                                                callback();
                                })
                }
-               else if(typeof callback == "function")
-                       callback();
+               else {
+                       NETDATA.chartLibraries.peity.enabled = false;
+                       if(typeof callback == "function")
+                               callback();
+               }
        };
 
        NETDATA.peityChartUpdate = function(element, data) {
@@ -513,16 +531,6 @@
        NETDATA.peityChartCreate = function(element, data) {
                var self = $(element);
 
-               if(!NETDATA.chartLibraries.peity.initialized) {
-                       if(!NETDATA.chartLibraries.peity.enabled) {
-                               NETDATA.messageInABox(element, 'peity is disabled.');
-                       }
-                       else {
-                               NETDATA.messageInABox(element, 'peity is initializing...');
-
-                       }
-               }
-
                var uuid = NETDATA.guid();
                element.innerHTML = '<div id="' + uuid + '">' + data + '</div>';
                var instance = document.getElementById(uuid);
@@ -552,8 +560,11 @@
                                                callback();
                                })
                }
-               else if(typeof callback == "function")
-                       callback();
+               else {
+                       NETDATA.chartLibraries.sparkline.enabled = false;
+                       if(typeof callback == "function") 
+                               callback();
+               }
        };
 
        NETDATA.sparklineChartUpdate = function(element, data) {
@@ -713,8 +724,11 @@
                                        NETDATA.dygraphInitSync(callback);
                                })
                }
-               else if(typeof callback == "function")
-                       callback();
+               else {
+                       NETDATA.chartLibraries.dygraph.enabled = false;
+                       if(typeof callback == "function")
+                               callback();
+               }
        };
 
        NETDATA.dygraphChartUpdate = function(element, data) {
@@ -875,6 +889,21 @@
 
        NETDATA.morrisInitialize = function(callback) {
                if(typeof netdataStopMorris == 'undefined') {
+
+                       // morris requires raphael
+                       if(!NETDATA.chartLibraries.raphael.initialized) {
+                               if(NETDATA.chartLibraries.raphael.enabled) {
+                                       NETDATA.raphaelInitialize(function() {
+                                               NETDATA.morrisInitialize(callback);
+                                       });
+                               }
+                               else {
+                                       NETDATA.chartLibraries.morris.enabled = false;
+                                       if(typeof callback == "function")
+                                               callback();
+                               }
+                       }
+
                        var fileref = document.createElement("link");
                        fileref.setAttribute("rel", "stylesheet");
                        fileref.setAttribute("type", "text/css");
@@ -895,8 +924,11 @@
                                                callback();
                                })
                }
-               else if(typeof callback == "function")
-                       callback();
+               else {
+                       NETDATA.chartLibraries.morris.enabled = false;
+                       if(typeof callback == "function")
+                               callback();
+               }
        };
 
        NETDATA.morrisChartUpdate = function(element, data) {
@@ -971,8 +1003,11 @@
                                                callback();
                                })
                }
-               else if(typeof callback == "function")
-                       callback();
+               else {
+                       NETDATA.chartLibraries.raphael.enabled = false;
+                       if(typeof callback == "function")
+                               callback();
+               }
        };
 
        NETDATA.raphaelChartUpdate = function(element, data) {
@@ -998,13 +1033,27 @@
        // google charts
 
        NETDATA.googleInitialize = function(callback) {
-               if(typeof netdataStopGoogleCharts == 'undefined' && typeof google != 'undefined') {
-                       NETDATA.registerChartLibrary('google', NETDATA.google_js);
+               if(typeof netdataStopGoogleCharts == 'undefined') {
+                       $.getScript(NETDATA.google_js)
+                               .done(function() {
+                                       NETDATA.registerChartLibrary('google', NETDATA.google_js);
+
+                                       google.load('visualization', '1.1', {
+                                               'packages': ['corechart', 'controls'],
+                                               'callback': callback
+                                       });
+                               })
+                               .fail(function() {
+                                       NETDATA.error(100, NETDATA.google_js);
+                                       if(typeof callback == "function")
+                                               callback();
+                               })
+               }
+               else {
+                       NETDATA.chartLibraries.google.enabled = false;
                        if(typeof callback == "function")
                                callback();
                }
-               else if(typeof callback == "function")
-                       callback();
        };
 
        NETDATA.googleChartUpdate = function(element, data) {
@@ -1195,9 +1244,9 @@
        NETDATA.registerChartLibrary = function(library, url) {
                console.log("registering chart library: " + library);
 
-               NETDATA.chartLibraries[library]
-                       .url = url
-                       .initialized = new Date().getTime();
+               NETDATA.chartLibraries[library].url = url;
+               NETDATA.chartLibraries[library].initialized = true;
+               NETDATA.chartLibraries[library].enabled = true;
 
                console.log(NETDATA.chartLibraries);
        }
@@ -1209,19 +1258,7 @@
 
        NETDATA._loadjQuery(function() {
                $.getScript(NETDATA.serverDefault + 'lib/visible.js').then(function() {
-                       NETDATA.raphaelInitialize(function() {
-                               NETDATA.morrisInitialize(function() {
-                                       NETDATA.peityInitialize(function() {
-                                               NETDATA.sparklineInitialize(function() {
-                                                       NETDATA.dygraphInitialize(function() {
-                                                               NETDATA.googleInitialize(function() {
-                                                                       NETDATA.init();
-                                                               }) // google
-                                                       }) // dygraph.js
-                                               }) // sparkline.js
-                                       }) // piety.js
-                               }) // morris.js
-                       }) // raphael.js
+                       NETDATA.init();
                })
        });