minor modification for clean exit; dashboard fixes for inheriting chart colors on...

diff --git a/src/common.c b/src/common.c
index bde93500b4ed0e654984f49c82cd777edf462ef0..e3c3afe3f421b3ac2199cbb80edeee2d85845776 100755 (executable)
--- a/src/common.c
+++ b/src/common.c
@@ -146,8 +146,11 @@ void *mymmap(const char *filename, size_t size, int flags, int ksm)
                                                        error("Cannot seek to beginning of file '%s'.", filename);
 
                                                // don't use MADV_SEQUENTIAL|MADV_DONTFORK, they disable MADV_MERGEABLE
+                                               if(madvise(mem, size, MADV_SEQUENTIAL|MADV_DONTFORK) != 0)
+                                                       error("Cannot advise the kernel about the memory usage (MADV_SEQUENTIAL|MADV_DONTFORK) of file '%s'.", filename);
+
                                                if(madvise(mem, size, MADV_MERGEABLE) != 0)
-                                                       error("Cannot advise the kernel about the memory usage of file '%s'.", filename);
+                                                       error("Cannot advise the kernel about the memory usage (MADV_MERGEABLE) of file '%s'.", filename);
                                        }
                                        else
                                                error("Cannot allocate PRIVATE ANONYMOUS memory for KSM for file '%s'.", filename);

diff --git a/src/plugin_nfacct.c b/src/plugin_nfacct.c
index c088069a3284f11fa0a15f5ee94318a10b3365a6..8c613c4c28b008cbbf7c00e4abd84002c23b43d3 100644 (file)
--- a/src/plugin_nfacct.c
+++ b/src/plugin_nfacct.c
@@ -119,6 +119,8 @@ void *nfacct_main(void *ptr) {
        // ------------------------------------------------------------------------
 
        while(1) {
+               if(unlikely(netdata_exit)) break;
+
                seq++;
 
                nlh = nfacct_nlmsg_build_hdr(buf, NFNL_MSG_ACCT_GET, NLM_F_DUMP, seq);

diff --git a/src/plugin_proc.c b/src/plugin_proc.c
index 6a9d47bce760e17add8bc3b0342747b32b257981..7f79364e3b54e6b911a659d43fe34eae13fe8ca2 100755 (executable)
--- a/src/plugin_proc.c
+++ b/src/plugin_proc.c
@@ -13,6 +13,7 @@
 #include "log.h"
 #include "rrd.h"
 #include "plugin_proc.h"
+#include "main.h"
 
 void *proc_main(void *ptr)
 {
@@ -59,6 +60,7 @@ void *proc_main(void *ptr)
 
        unsigned long long usec = 0, susec = 0;
        for(;1;) {
+               if(unlikely(netdata_exit)) break;
 
                // BEGIN -- the job to be done
 
@@ -129,6 +131,8 @@ void *proc_main(void *ptr)
 
                // END -- the job is done
 
+               if(unlikely(netdata_exit)) break;
+
                // find the time to sleep in order to wait exactly update_every seconds
                gettimeofday(&now, NULL);
                usec = usecdiff(&now, &last) - susec;

diff --git a/src/plugin_tc.c b/src/plugin_tc.c
index ae6f4ad11079063ec67294a54bd99a6ee5ac427c..15b8077c40af2105acf0c621b7fbba72bdae09c7 100755 (executable)
--- a/src/plugin_tc.c
+++ b/src/plugin_tc.c
@@ -509,6 +509,8 @@ void *tc_main(void *ptr)
        uint32_t first_hash;
 
        for(;1;) {
+               if(unlikely(netdata_exit)) break;
+
                FILE *fp;
                struct tc_device *device = NULL;
                struct tc_class *class = NULL;
@@ -523,7 +525,7 @@ void *tc_main(void *ptr)
                }
 
                while(fgets(buffer, TC_LINE_MAX, fp) != NULL) {
-                       if(netdata_exit) break;
+                       if(unlikely(netdata_exit)) break;
 
                        buffer[TC_LINE_MAX] = '\0';
                        // debug(D_TC_LOOP, "TC: read '%s'", buffer);

diff --git a/src/plugins_d.c b/src/plugins_d.c
index ef43ab1a04ab48e6cc1c47ea8dff8e91cb2cedff..767ca27c062665320a052c9be111b5409ddd9fb3 100755 (executable)
--- a/src/plugins_d.c
+++ b/src/plugins_d.c
@@ -125,6 +125,8 @@ void *pluginsd_worker_thread(void *arg)
 #endif
 
        while(likely(1)) {
+               if(unlikely(netdata_exit)) break;
+
                FILE *fp = mypopen(cd->cmd, &cd->pid);
                if(unlikely(!fp)) {
                        error("Cannot popen(\"%s\", \"r\").", cd->cmd);
@@ -139,7 +141,7 @@ void *pluginsd_worker_thread(void *arg)
                uint32_t hash;
 
                while(likely(fgets(line, PLUGINSD_LINE_MAX, fp) != NULL)) {
-                       if(netdata_exit) break;
+                       if(unlikely(netdata_exit)) break;
 
                        line[PLUGINSD_LINE_MAX] = '\0';
 
@@ -439,7 +441,7 @@ void *pluginsd_main(void *ptr)
        if(scan_frequency < 1) scan_frequency = 1;
 
        while(likely(1)) {
-               if(netdata_exit) break;
+               if(unlikely(netdata_exit)) break;
 
                dir = opendir(dir_name);
                if(unlikely(!dir)) {
@@ -448,7 +450,7 @@ void *pluginsd_main(void *ptr)
                }
 
                while(likely((file = readdir(dir)))) {
-                       if(netdata_exit) break;
+                       if(unlikely(netdata_exit)) break;
 
                        debug(D_PLUGINSD, "PLUGINSD: Examining file '%s'", file->d_name);
 

diff --git a/web/Makefile.am b/web/Makefile.am
index 1010dbdf71a818aba0b253cfe906a9a39ef0702c..9bd67cdf311a3506e18ab326660de4c7a44a17fb 100644 (file)
--- a/web/Makefile.am
+++ b/web/Makefile.am
@@ -7,6 +7,7 @@ dist_web_DATA = \
         robots.txt \
         index.html \
        demo.html \
+       demo2.html \
         dashboard.html \
         dashboard.js \
         dashboard.css \

diff --git a/web/dashboard.html b/web/dashboard.html
index 82f8128cdb16ec241810e9b4a45e7abe0928fa80..8b8a69900844537b6ebf4821a7e7efd4e6b2b57a 100755 (executable)
--- a/web/dashboard.html
+++ b/web/dashboard.html
@@ -598,7 +598,7 @@ C3 charts are not usable in large scale. They suffer from the following issues:
  <li>lack of a <code>raw</code> data format, so every time a chart is updated, data convertion in javascript is required</li>
  <li>lack of <code>stacked</code> charts support</li>
 </ul>
-So, we avoid flashing the charts, here we destroy and re-create the charts on each update. Also, since they manipulate the data with javascript we were forced to lower the detail they render to get acceptable results.
+So, to avoid flashing the charts, we destroy and re-create the charts on each update. Also, since they manipulate the data with javascript we were forced to lower the detail they render to get acceptable speeds.
 <br/>
 <div style="width: 33%; display: inline-block;">
        <div data-netdata="system.processes"
@@ -606,10 +606,10 @@ So, we avoid flashing the charts, here we destroy and re-create the charts on ea
                data-width="100%"
                data-height="200"
                data-after="-300"
-               data-dt-element-name="time701"
+               data-dt-element-name="time801"
                ></div>
        <br/>
-       <small>rendered in <span id="time701">X</span> ms</small>
+       <small>rendered in <span id="time801">X</span> ms</small>
 </div>
 <div style="width: 33%; display: inline-block;">
        <div data-netdata="system.ipv4"
@@ -617,10 +617,10 @@ So, we avoid flashing the charts, here we destroy and re-create the charts on ea
                data-width="100%"
                data-height="200"
                data-after="-300"
-               data-dt-element-name="time702"
+               data-dt-element-name="time802"
                ></div>
        <br/>
-       <small>rendered in <span id="time702">X</span> ms</small>
+       <small>rendered in <span id="time802">X</span> ms</small>
 </div>
 <div style="width: 33%; display: inline-block;">
        <div data-netdata="system.cpu"
@@ -628,10 +628,10 @@ So, we avoid flashing the charts, here we destroy and re-create the charts on ea
                data-width="100%"
                data-height="200"
                data-after="-300"
-               data-dt-element-name="time703"
+               data-dt-element-name="time803"
                ></div>
        <br/>
-       <small>rendered in <span id="time703">X</span> ms</small>
+       <small>rendered in <span id="time803">X</span> ms</small>
 </div>
 
 

diff --git a/web/dashboard.js b/web/dashboard.js
index aa114a37ba78774af556120501b72380254b12c4..066613e636867993d12dad62592e7388308bb123 100755 (executable)
--- a/web/dashboard.js
+++ b/web/dashboard.js
@@ -216,6 +216,8 @@
 
                        smooth_plot: true,                      // enable smooth plot, where possible
 
+                       charts_selection_animation_delay: 50, // delay to animate charts when syncing selection
+
                        color_fill_opacity_line: 1.0,
                        color_fill_opacity_area: 0.2,
                        color_fill_opacity_stacked: 0.8,
@@ -1886,7 +1888,7 @@
                        }
 
                        var show_undefined = true;
-                       if(Math.abs(this.data.last_entry - this.data.before) <= this.data.view_update_every)
+                       if(Math.abs(this.netdata_last - this.view_before) <= this.data_update_every)
                                show_undefined = false;
 
                        if(show_undefined) {
@@ -1894,7 +1896,7 @@
                                return;
                        }
 
-                       this.legendSetDate(this.data.before * 1000);
+                       this.legendSetDate(this.view_before);
 
                        var labels = this.data.dimension_names;
                        var i = labels.length;
@@ -1944,17 +1946,24 @@
 
                        this.colors = new Array();
                        this.colors_available = new Array();
-                       // this.colors_assigned = {};
 
                        var c = $(this.element).data('colors');
+                       // this.log('read colors: ' + c);
                        if(typeof c !== 'undefined' && c !== null) {
                                if(typeof c !== 'string') {
                                        this.log('invalid color given: ' + c + ' (give a space separated list of colors)');
                                }
                                else {
                                        c = c.split(' ');
-                                       for(var i = 0, len = c.length; i < len ; i++)
-                                               this.colors_available.push(c[i]);
+                                       var added = 0;
+
+                                       while(added < 20) {
+                                               for(var i = 0, len = c.length; i < len ; i++) {
+                                                       added++;
+                                                       this.colors_available.push(c[i]);
+                                                       // this.log('adding color: ' + c[i]);
+                                               }
+                                       }
                                }
                        }
 
@@ -1996,9 +2005,9 @@
 
                                // do we have to update the current values?
                                // we do this, only when the visible chart is current
-                               if(Math.abs(this.data.last_entry - this.data.before) <= this.data.view_update_every) {
+                               if(Math.abs(this.netdata_last - this.view_before) <= this.data_update_every) {
                                        if(this.debug === true)
-                                               this.log('chart in running... updating values on legend...');
+                                               this.log('chart is in latest position... updating values on legend...');
 
                                        //var labels = this.data.dimension_names;
                                        //var i = labels.length;
@@ -2015,6 +2024,7 @@
                                                this._chartDimensionColor(this.chart.dimensions[dim].name);
                        }
                        // we will re-generate the colors for the chart
+                       // based on the selected dimensions
                        this.colors = null;
 
                        if(this.debug === true)
@@ -2332,12 +2342,12 @@
 
                        if(NETDATA.options.current.pan_and_zoom_data_padding === true && this.requested_padding !== null) {
                                if(this.view_after < this.data_after) {
-                                       console.log('adusting view_after from ' + this.view_after + ' to ' + this.data_after);
+                                       // console.log('adusting view_after from ' + this.view_after + ' to ' + this.data_after);
                                        this.view_after = this.data_after;
                                }
                                
                                if(this.view_before > this.data_before) {
-                                       console.log('adusting view_before from ' + this.view_before + ' to ' + this.data_before);
+                                       // console.log('adusting view_before from ' + this.view_before + ' to ' + this.data_before);
                                        this.view_before = this.data_before;
                                }
                        }
@@ -3273,14 +3283,14 @@
                }
 
                return true;
-       }
+       };
 
        NETDATA.dygraphClearSelection = function(state, t) {
                if(typeof state.dygraph_instance !== 'undefined') {
                        state.dygraph_instance.clearSelection();
                }
                return true;
-       }
+       };
 
        NETDATA.dygraphSmoothInitialize = function(callback) {
                $.ajax({
@@ -3521,14 +3531,11 @@
                                        if(NETDATA.options.debug.dygraph === true)
                                                state.log('dygraphDrawCallback()');
 
-                                       var first = state.data.first_entry * 1000;
-                                       var last = state.data.last_entry * 1000;
-
                                        var x_range = dygraph.xAxisRange();
                                        var after = Math.round(x_range[0]);
                                        var before = Math.round(x_range[1]);
 
-                                       if(before <= last && after >= first)
+                                       if(before <= state.netdata_last && after >= state.netdata_first)
                                                state.updateChartPanOrZoom(after, before);
                                }
                        },
@@ -3739,8 +3746,8 @@
                                                var after = new_x_range[0];
                                                var before = new_x_range[1];
 
-                                               var first = (state.data.first_entry + state.data.view_update_every) * 1000;
-                                               var last = (state.data.last_entry + state.data.view_update_every) * 1000;
+                                               var first = state.netdata_first + state.data_update_every;
+                                               var last = state.netdata_last + state.data_update_every;
 
                                                if(before > last) {
                                                        after -= (before - last);
@@ -4319,10 +4326,10 @@
        };
 
        NETDATA.easypiechartSetSelection = function(state, t) {
-               if(t < state.data_after || t > state.data_before)
+               if(state.timeIsVisible(t) !== true)
                        return NETDATA.easypiechartClearSelection(state);
 
-               var slot = Math.floor(state.data.result.length - 1 - (t - state.data_after) / state.data_update_every);
+               var slot = state.calculateRowForTime(t);
                if(slot < 0 || slot >= state.data.result.length)
                        return NETDATA.easypiechartClearSelection(state);
 
@@ -4334,7 +4341,7 @@
                        };
                }
 
-               var value = state.data.result[slot];
+               var value = state.data.result[state.data.result.length - 1 - slot];
                var max = (state.easyPieChartMax === null)?state.data.max:state.easyPieChartMax;
                var pcent = NETDATA.percentFromValueMax(value, max);
 
@@ -4348,7 +4355,7 @@
                        state.easyPieChartEvent.timer = setTimeout(function() {
                                state.easyPieChartEvent.timer = null;
                                state.easyPieChart_instance.update(state.easyPieChartEvent.pcent);
-                       }, 100);
+                       }, NETDATA.options.current.charts_selection_animation_delay);
                }
 
                return true;
@@ -4507,26 +4514,25 @@
                if(typeof max !== 'number') max = 0;
                if(value > max) max = value;
                if(value < min) min = value;
+               if(min > max) {
+                       var t = min;
+                       min = max;
+                       max = t;
+               }
+               else if(min == max)
+                       max = min + 1;
 
-               var dvalue = state.gauge_instance.displayedValue;
+               // gauge.js has an issue if the needle
+               // is smaller than min or larger than max
+               // when we set the new values
+               // the needle will go crazy
 
-               if(dvalue >= min && dvalue <= max) {
-                       state.gauge_instance.minValue = min;
-                       state.gauge_instance.maxValue = max;
-                       state.gauge_instance.set(value);
-               }
-               else {
-                       // the current display value of the gauge
-                       // is outside min-max.
-                       // we have to disable animation
-                       // otherwise, the gauge will go crazy
-                       var old_speed = state.___gaugeOld__.speed;
-                       NETDATA.gaugeAnimation(state, false);
-                       state.gauge_instance.minValue = min;
-                       state.gauge_instance.maxValue = max;
-                       state.gauge_instance.set(value);
-                       NETDATA.gaugeAnimation(state, old_speed);
-               }
+               // to prevent it, we always feed it
+               // with a percentage, so that the needle
+               // is always between min and max
+               var pcent = (value - min) * 100 / (max - min);
+
+               state.gauge_instance.set(pcent);
 
                state.___gaugeOld__.value = value;
                state.___gaugeOld__.min = min;
@@ -4570,10 +4576,10 @@
        };
 
        NETDATA.gaugeSetSelection = function(state, t) {
-               if(t < state.data_after || t > state.data_before)
+               if(state.timeIsVisible(t) !== true)
                        return NETDATA.gaugeClearSelection(state);
 
-               var slot = Math.floor(state.data.result.length - 1 - (t - state.data_after) / state.data_update_every);
+               var slot = state.calculateRowForTime(t);
                if(slot < 0 || slot >= state.data.result.length)
                        return NETDATA.gaugeClearSelection(state);
 
@@ -4586,7 +4592,7 @@
                        };
                }
 
-               var value = state.data.result[slot];
+               var value = state.data.result[state.data.result.length - 1 - slot];
                var max = (state.gaugeMax === null)?state.data.max:state.gaugeMax;
                var min = 0;
 
@@ -4601,7 +4607,7 @@
                        state.gaugeEvent.timer = setTimeout(function() {
                                state.gaugeEvent.timer = null;
                                NETDATA.gaugeSet(state, state.gaugeEvent.value, state.gaugeEvent.min, state.gaugeEvent.max);
-                       }, 100);
+                       }, NETDATA.options.current.charts_selection_animation_delay);
                }
 
                return true;
@@ -4635,7 +4641,12 @@
                var value = data.result[0];
                var max = self.data('gauge-max-value') || null;
                var adjust = self.data('gauge-adjust') || null;
-               
+               var pointerColor = self.data('gauge-pointer-color') || '#C0C0C0';
+               var strokeColor = self.data('gauge-stroke-color') || '#F0F0F0';
+               var startColor = self.data('gauge-start-color') || state.chartColors()[0];
+               var stopColor = self.data('gauge-stop-color') || void 0;
+               var generateGradient = self.data('gauge-generate-gradient') || false;
+
                if(max === null) {
                        max = data.max;
                        state.gaugeMax = null;
@@ -4661,13 +4672,13 @@
                        pointer: {
                                length: 0.8,                    // 0.9 The radius of the inner circle
                                strokeWidth: 0.035,             // The rotation offset
-                               color: '#C0C0C0'                // Fill color
+                               color: pointerColor             // Fill color
                        },
-                       colorStart: state.chartColors()[0],     // Colors
-                       colorStop: void 0,                      // just experiment with them
-                       strokeColor: '#F0F0F0',         // to see which ones work best for you
+                       colorStart: startColor,         // Colors
+                       colorStop: stopColor,           // just experiment with them
+                       strokeColor: strokeColor,       // to see which ones work best for you
                        limitMax: true,
-                       generateGradient: false,
+                       generateGradient: generateGradient,
                        gradientType: 0,
                        percentColors: [
                                [0.0, NETDATA.colorLuminance(state.chartColors()[0], (lum_d * 10) - (lum_d * 0))],
@@ -4742,6 +4753,10 @@
                        maxLabel: null
                };
                
+               // we will always feed a percentage
+               state.gauge_instance.minValue = 0;
+               state.gauge_instance.maxValue = 100;
+
                NETDATA.gaugeAnimation(state, animate);
                NETDATA.gaugeSet(state, value, 0, max);
                NETDATA.gaugeSetLabels(state, value, 0, max);
@@ -4927,7 +4942,7 @@
                        legend: function(state) { return null; },
                        autoresize: function(state) { return false; },
                        max_updates_to_recreate: function(state) { return 5000; },
-                       track_colors: function(state) { return false; },
+                       track_colors: function(state) { return true; },
                        pixels_per_point: function(state) { return 3; },
                        aspect_ratio: 100
                },
@@ -4945,7 +4960,7 @@
                        legend: function(state) { return null; },
                        autoresize: function(state) { return false; },
                        max_updates_to_recreate: function(state) { return 5000; },
-                       track_colors: function(state) { return false; },
+                       track_colors: function(state) { return true; },
                        pixels_per_point: function(state) { return 3; },
                        aspect_ratio: 70
                }

diff --git a/web/demo2.html b/web/demo2.html
new file mode 100755 (executable)
index 0000000..8c3a202
--- /dev/null
+++ b/web/demo2.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>\r
+<html lang="en">\r
+<head>\r
+       <title>NetData Dashboard</title>\r
+\r
+       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />\r
+       <meta charset="utf-8">\r
+       <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">\r
+       <meta name="viewport" content="width=device-width, initial-scale=1">\r
+       <meta name="apple-mobile-web-app-capable" content="yes">\r
+       <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">\r
+       <meta name="author" content="costa@tsaousis.gr">\r
+\r
+       <style>\r
+       .easyPieChartLabel {\r
+               color: #222 !important;\r
+               font-weight: normal;\r
+               text-shadow: #333 0px 0px 1px !important;\r
+               -webkit-font-smoothing: none;\r
+       }\r
+       </style>\r
+\r
+       <script type="text/javascript" src="dashboard.js"></script>\r
+</head>\r
+<body style="background-color: #444;">\r
+\r
+<div style="width: 100%; padding-top: 10px; text-align: center; color: #AAA">\r
+       <div style="font-size: 8vw;">why netdata?</div>\r
+       <br/>\r
+       <div style="font-size: 2vw;">These charts update the same data...</div>\r
+       <div data-netdata="example.random"\r
+                       data-dimensions="random1"\r
+                       data-chart-library="easypiechart"\r
+                       data-easypiechart-max-value="100"\r
+                       data-width="25%"\r
+                       data-after="-600"\r
+                       data-points="600"\r
+                       data-title="1/second (netdata&nbsp;default)"\r
+                       data-units="something"\r
+                       data-colors="#CCC"\r
+                       data-easypiechart-trackcolor="#555"\r
+                       data-easypiechart-scalecolor="#555"\r
+                       ></div>\r
+       <div data-netdata="example.random"\r
+                       data-dimensions="random1"\r
+                       data-chart-library="easypiechart"\r
+                       data-easypiechart-max-value="100"\r
+                       data-width="20%"\r
+                       data-after="-600"\r
+                       data-points="300"\r
+                       data-title="Updates Every 2&nbsp;Seconds"\r
+                       data-units="something"\r
+                       data-colors="#AAA"\r
+                       data-easypiechart-trackcolor="#555"\r
+                       data-easypiechart-scalecolor="#555"\r
+                       ></div>\r
+       <div data-netdata="example.random"\r
+                       data-dimensions="random1"\r
+                       data-chart-library="easypiechart"\r
+                       data-easypiechart-max-value="100"\r
+                       data-width="17.5%"\r
+                       data-after="-600"\r
+                       data-points="120"\r
+                       data-title="Updates Every 5&nbsp;Seconds"\r
+                       data-units="something"\r
+                       data-colors="#999"\r
+                       data-easypiechart-trackcolor="#555"\r
+                       data-easypiechart-scalecolor="#555"\r
+                       ></div>\r
+       <div data-netdata="example.random"\r
+                       data-dimensions="random1"\r
+                       data-chart-library="easypiechart"\r
+                       data-easypiechart-max-value="100"\r
+                       data-width="15%"\r
+                       data-after="-600"\r
+                       data-points="10"\r
+                       data-title="Updates Every 1&nbsp;Minute"\r
+                       data-units="something"\r
+                       data-colors="#888"\r
+                       data-easypiechart-trackcolor="#555"\r
+                       data-easypiechart-scalecolor="#555"\r
+                       ></div>\r
+       <div style="font-size: 2vw;">Hover on the peaks and the lows of the chart below, to see the diff on the charts above!</div>\r
+       <div data-netdata="example.random"\r
+                       data-dimensions="random1"\r
+                       data-dygraph-theme="sparkline"\r
+                       data-width="90%"\r
+                       data-height="20vh"\r
+                       data-after="-600"\r
+                       data-points="600"\r
+                       data-title="1/second (netdata&nbsp;default)"\r
+                       data-units="something"\r
+                       data-colors="#CCC"\r
+                       ></div>\r
+</div>\r
+</body>\r
+</html>\r

diff --git a/web/index.html b/web/index.html
index daafdaeb5aeb3f7c22caff537429407ebd5a9b39..8887b7a45870441e8a7b6311a2ff86d33ed8f3ac 100755 (executable)
--- a/web/index.html
+++ b/web/index.html
@@ -979,7 +979,6 @@ function prepareScreen(data) {
                                                        + ' data-before="0"'
                                                        + ' data-after="-' + duration.toString() + '"'
                                                        + ' data-points="' + duration.toString() + '"'
-                                                       + ' data-colors="' + NETDATA.colors[0] + '"'
                                                        + ' role="application"></div>';
 
                                                        head += '<div data-netdata="' + f.id + '"'
@@ -991,7 +990,6 @@ function prepareScreen(data) {
                                                        + ' data-before="0"'
                                                        + ' data-after="-' + duration.toString() + '"'
                                                        + ' data-points="' + duration.toString() + '"'
-                                                       + ' data-colors="' + NETDATA.colors[1] + '"'
                                                        + ' role="application"></div>';
                                                        break;
 
@@ -1063,7 +1061,6 @@ function prepareScreen(data) {
                                                                + ' data-before="0"'
                                                                + ' data-after="-' + duration.toString() + '"'
                                                                + ' data-points="' + duration.toString() + '"'
-                                                               + ' data-colors="' + NETDATA.colors[0] + '"'
                                                                + ' role="application"></div>';
 
                                                                head += '<div data-netdata="' + f.id + '"'
@@ -1075,7 +1072,6 @@ function prepareScreen(data) {
                                                                + ' data-before="0"'
                                                                + ' data-after="-' + duration.toString() + '"'
                                                                + ' data-points="' + duration.toString() + '"'
-                                                               + ' data-colors="' + NETDATA.colors[1] + '"'
                                                                + ' role="application"></div>';
                                                                break;
                                                case 'disk_backlog': c = '#DD4477'; break;
@@ -1159,7 +1155,6 @@ function prepareScreen(data) {
                                + ' data-before="0"'
                                + ' data-after="-' + duration.toString() + '"'
                                + ' data-points="' + duration.toString() + '"'
-                               + ' data-colors="' + NETDATA.colors[0] + '"'
                                + ' role="application"></div>';
 
                                head += '<div style="margin-right: 10px;" data-netdata="system.io"'
@@ -1171,7 +1166,6 @@ function prepareScreen(data) {
                                + ' data-before="0"'
                                + ' data-after="-' + duration.toString() + '"'
                                + ' data-points="' + duration.toString() + '"'
-                               + ' data-colors="' + NETDATA.colors[1] + '"'
                                + ' role="application"></div>';
                        }
 
@@ -1197,7 +1191,6 @@ function prepareScreen(data) {
                                + ' data-before="0"'
                                + ' data-after="-' + duration.toString() + '"'
                                + ' data-points="' + duration.toString() + '"'
-                               + ' data-colors="' + NETDATA.colors[0] + '"'
                                + ' role="application"></div>';
 
                                head += '<div style="margin-right: 10px;" data-netdata="system.ipv4"'
@@ -1209,7 +1202,6 @@ function prepareScreen(data) {
                                + ' data-before="0"'
                                + ' data-after="-' + duration.toString() + '"'
                                + ' data-points="' + duration.toString() + '"'
-                               + ' data-colors="' + NETDATA.colors[1] + '"'
                                + ' role="application"></div>';
                        }