generated html elements now get a uuid

diff --git a/web/dashboard.html b/web/dashboard.html
index 07799ba6e3da7ae910319807e5ad7786f9d1162d..21de8402fc48190c64c0f94be0cf4c923bdbe768 100755 (executable)
--- a/web/dashboard.html
+++ b/web/dashboard.html
@@ -94,6 +94,33 @@ This is a template for building custom dashboards. To build a dashboard you just
                Sparkline charts support 'NULL' values, so the charts can indicate that values are missing.\r
                Sparkline charts stretch the values to show the variations between values in more detail.\r
                They also have mouse-hover support.\r
+               <br/>\r
+               Sparklines are fantastic. You can inline charts in text. For example this \r
+                       <div    style="display: inline; position: relative;"\r
+                                       data-netdata="system.cpu"\r
+                                       data-chart-library="sparkline"\r
+                                       data-width="60"\r
+                                       data-height="15"\r
+                                       data-after="-30"\r
+                                       </div> is my current cpu usage,\r
+                       <br/>\r
+                       while this\r
+                       <div    style="display: inline; position: relative;"\r
+                                       data-netdata="netdata.net"\r
+                                       data-dimensions="out"\r
+                                       data-chart-library="sparkline"\r
+                                       data-width="60"\r
+                                       data-height="15"\r
+                                       data-after="-30"\r
+                                       </div> is the bandwidth my netdata server is currently transmitting and this \r
+\r
+                       <div    style="display: inline; position: relative;"\r
+                                       data-netdata="netdata.requests"\r
+                                       data-chart-library="sparkline"\r
+                                       data-width="60"\r
+                                       data-height="15"\r
+                                       data-after="-30"\r
+                                       </div> is the requests/sec it serves.\r
                </td></tr>\r
        <tr>\r
                <td width="600" align="center">\r

diff --git a/web/dashboard.js b/web/dashboard.js
index 81a7ade4b271d7a2c3bbc7a91c367bdd6056df22..53ae2c1db8712a199575791440e306eb5442cf77 100755 (executable)
--- a/web/dashboard.js
+++ b/web/dashboard.js
@@ -86,7 +86,8 @@
        }\r
 \r
        NETDATA.all_url = 'all2.js';\r
-       NETDATA_idle_between_charts = 50;\r
+       NETDATA.idle_between_charts = 50;\r
+       NETDATA.idle_between_loops = 100;\r
        NETDATA.debug = 1;\r
 \r
        if(NETDATA.debug) console.log('welcome to NETDATA');\r
@@ -385,7 +386,7 @@
                        // finished, restart\r
                        setTimeout(function() {\r
                                netdataRefreshTargets(targets, 0);\r
-                       }, 1000);\r
+                       }, NETDATA.idle_between_loops);\r
                }\r
                else {\r
                        var self = $(target);\r
@@ -398,11 +399,20 @@
                                        netdataDownloadChartData.call(target, function() {\r
                                                netdataRefreshTargets(targets, ++index);\r
                                        });\r
-                               }, NETDATA_idle_between_charts);\r
+                               }, NETDATA.idle_between_charts);\r
                        }\r
                }\r
        }\r
 \r
+       NETDATA.guid = function() {\r
+               function s4() {\r
+                       return Math.floor((1 + Math.random()) * 0x10000)\r
+                                       .toString(16)\r
+                                       .substring(1);\r
+                       }\r
+\r
+                       return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();\r
+       }\r
 \r
        // ----------------------------------------------------------------------------------------------------------------\r
        // piety\r
@@ -574,8 +584,13 @@
                        height: height\r
                };\r
 \r
+               var uuid = NETDATA.guid();\r
+               this.innerHTML = '<div style="display: inline-block; position: relative;" id="' + uuid + '"></div>';\r
+               var div = document.getElementById(uuid);\r
+\r
                self.sparkline(data, options);\r
                self.data('sparkline-options', options)\r
+               .data('uuid', uuid)\r
                .data('created', true);\r
        };\r
 \r
@@ -757,13 +772,15 @@
                        }\r
                };\r
 \r
-               self.html('<div id="dygraph-' + chart.id + '"></div>');\r
+               var uuid = NETDATA.guid();\r
+               self.html('<div id="' + uuid + '"></div>');\r
 \r
-               var dchart = new Dygraph(document.getElementById('dygraph-' + chart.id),\r
+               var dchart = new Dygraph(document.getElementById(uuid),\r
                        data.data, options);\r
 \r
                self.data('dygraph-instance', dchart)\r
                .data('dygraph-options', options)\r
+               .data('uuid', uuid)\r
                .data('created', true);\r
 \r
                //NETDATA.dygraphAllCharts.push(dchart);\r