added up/down indicators in legend values

3 files changed, 374 insertions, 327 deletions

diff --git a/web/dashboard.css b/web/dashboard.css
index cbdfbe03e6..36b08960e1 100755
--- a/web/dashboard.css
+++ b/web/dashboard.css
@@ -1,301 +1,317 @@
-html {

-    font-family: sans-serif;

-}

-

-.netdata-chart-alignment {

-	margin-left: 55px;

-}

-

-.netdata-container {

-	display: -webkit-flex; /* Safari */

-	-webkit-flex-wrap: wrap; /* Safari 6.1+ */

-	display: inline-block;

-	flex-wrap: wrap;

-	overflow: hidden;

-

-	/* required for child elements to have absolute position */

-	position: relative;

-	

-	/* width and height is given per chart with data-width and data-height */

-}

-

-.netdata-legend-resize-handler {

-	display: block;

-	position: absolute;

-	bottom: 0px;

-	right: 0px;

-	height: 15px;

-	width: 30px;

-	background-color: White;

-	font-size: 12px;

-	vertical-align: middle;

-	line-height: 15px;

-	cursor: ns-resize;

-	color: #DDDDDD;

-	text-align: center;

-	overflow: hidden;

-	z-index: 11;

-	padding: 0px;

-	margin: 0px;

-}

-

-.netdata-message {

-	display: none;

-	font-size: x-small;

-	width: 100%;

-	height: calc(100% - 10px); /* for the resize handler */

-	overflow: hidden;

-	background: inherit;

-	z-index: 10000;

-}

-

-.netdata-chart-is-loading {

-	display: none;

-	font-size: x-small;

-	width: 100%;

-	overflow: hidden;

-	background: white;

-	z-index: 10000;

-}

-

-.netdata-error-message {

-	background: #EEEEEE;

-}

-

-.netdata-info-message {

-}

-

-.netdata-chart-legend {

-	position: absolute;			/* within .netdata-container */

-	top: 0;

-	right: 0;

-	background-color: white;

-	overflow: hidden;

-	text-overflow: ellipsis;

-	line-height: 14px;

-	display: block;

-	width: 120px;				/* --legend-width */

-	height: calc(100% - 15px);	/* 10px for the resize handler and 5px for the top margin */

-	font-size: 10px;

-	margin-top: 5px;

-	/* width and height is calculated (depends on the appearance of the legend) */

-}

-

-.netdata-legend-title-date {

-	font-size: 10px;

-	font-weight: normal;

-	margin-top: 0px;

-}

-.netdata-legend-title-time {

-	font-size: 11px;

-	font-weight: bold;

-	margin-top: 0px;

-}

-.netdata-legend-title-units {

-	position: absolute;

-	right: 5px;

-	float: right;

-	font-size: 10px;

-	vertical-align: top;

-	font-weight: normal;

-	margin-top: 0px;

-}

-.netdata-legend-series {

-	position: absolute;

-	width: 120px;				/* --legend-width */

-	height: calc(100% - 50px);

-	overflow: hidden;

-	text-overflow: ellipsis;

-	line-height: 14px;

-	display: block;

-	font-size: 10px;

-	margin-top: 0px;

-}

-

-.netdata-legend-series > .netdata-legend-series-content {

-	position      : absolute;

-	overflow      : scroll;

-	overflow-x    : hidden;

-	top           : 0;

-	right         : 0;

-	bottom        : 0;

-	left          : 0;

-	text-overflow: ellipsis;

-}

-.netdata-legend-series > .netdata-legend-series-content:focus {

-	outline: thin dotted;

-}

-.netdata-legend-series > .netdata-legend-series-content::-webkit-scrollbar {

-	display: block; /* was 'none', but chrome was hidding content with it */

-}

-.has-scrollbar > .netdata-legend-series-content::-webkit-scrollbar {

-	display: block;

-}

-.netdata-legend-series > .netdata-legend-series-pane {

-/*	background : rgba(0,0,0,.25);*/

-	background : #DDD;

-	position   : absolute;

-	width      : 4px;

-	right      : 0;

-	top        : 0;

-	bottom     : 0;

-/*	visibility : hidden\9; */ /* Target only IE7 and IE8 with this hack */

-/*	opacity    : .01; */

-/*	-webkit-transition    : .2s; */

-/*	-moz-transition       : .2s; */

-/*	-o-transition         : .2s; */

-/*	transition            : .2s; */

-	-moz-border-radius    : 4px;

-	-webkit-border-radius : 4px;

-	border-radius         : 4px;

-}

-.netdata-legend-series > .netdata-legend-series-pane > .netdata-legend-series-slider {

-	background            : #444;

-/*	background            : rgba(0,0,0,.5);*/

-	position              : relative;

-	margin                : 0 1px;

-	-moz-border-radius    : 2px;

-	-webkit-border-radius : 2px;

-	border-radius         : 2px;

-}

-.netdata-legend-series:hover > .netdata-legend-series-pane, .netdata-legend-series-pane.active, .netdata-legend-series-pane.flashed {

-/*  visibility : visible\9; */ /* Target only IE7 and IE8 with this hack */

-/*  opacity    : 0.99;*/

-}

-

-.netdata-legend-name-table-line {

-	display: inline-block;

-	width: 13px;

-	height: 4px;

-	border-width: 0px;

-	border-bottom-width: 2px;

-	border-bottom-style: solid;

-	border-bottom-color: white;

-}

-.netdata-legend-name-table-area {

-	display: inline-block;

-	width: 13px;

-	height: 5px;

-	border-width: 1px;

-	border-top-width: 1px;

-	border-top-style: solid;

-	border-top-color: inherit;

-}

-.netdata-legend-name-table-stacked {

-	display: inline-block;

-	width: 13px;

-	height: 5px;

-	border-width: 1px;

-	border-top-width: 1px;

-	border-top-style: solid;

-	border-top-color: inherit;

-}

-.netdata-legend-name-tr {

-}

-.netdata-legend-name-td {

-}

-.netdata-legend-name {

-	text-align: left;

-	font-size: 10px;

-	font-weight: bold;

-	vertical-align: bottom;

-	margin-top: 0px;

-	z-index: 9;

-	padding: 0px;

-	width: 80px !important;

-	max-width: 80px !important;

-	text-overflow: ellipsis;

-	overflow: hidden;

-	white-space: nowrap;

-	display: inline-block;

-	cursor: pointer;

-}

-

-.netdata-legend-value {

-	/*margin-left: 14px;*/

-	position: absolute;

-	right: 5px;

-	float: right;

-	text-align: right;

-	font-size: 10px;

-	font-weight: bold;

-	vertical-align: bottom;

-	background-color: White;

-	margin-top: 0px;

-	z-index: 10;

-	padding: 0px;

-	padding-left: 15px;

-	cursor: pointer;

-}

-.netdata-legend-name.not-selected {

-	font-weight: normal;

-	opacity: 0.3;

-}

-

-.netdata-chart {

-	position: absolute;		/* within .netdata-container */

-	top: 0;					/* within .netdata-container */

-	left: 0;				/* within .netdata-container */

-	display: inline-block;

-	overflow: hidden;

-	width: 100%;

-	height: 100%;

-

-	/* width and height is calculated (depends on the appearance of the legend) */

-}

-

-.netdata-chart-with-legend-right {

-	position: absolute;		/* within .netdata-container */

-	top: 0;					/* within .netdata-container */

-	left: 0;				/* within .netdata-container */

-	display: block;

-	overflow: hidden;

-	margin-right: 120px;		/* --legend-width */

-	width: calc(100% - 120px);	/* --legend-width */

-	height: 100%;

-	flex-grow: 1;

-

-	/* width and height is calculated (depends on the appearance of the legend) */

-}

-

-.netdata-peity-chart {

-

-}

-

-.netdata-sparkline-chart {

-

-}

-

-.netdata-dygraph-chart {

-

-}

-

-.netdata-morris-chart {

-

-}

-

-.netdata-google-chart {

-

-}

-

-.dygraph-ylabel {

-}

-

-.dygraph-title {

-	text-indent: 56px;

-	text-align: left;

-	position: absolute;

-	left: 0px;

-	top: 4px;

-	font-size: 11px;

-	font-weight: bold;

-	text-overflow: ellipsis;

-	overflow: hidden;

-	white-space: nowrap;

-}

-

-/* fix for sparkline tooltip under bootstrap */

-.jqstooltip {

-  width: auto !important;

-  height: auto !important;

-}

+html {
+    font-family: sans-serif;
+}
+
+.netdata-chart-alignment {
+	margin-left: 55px;
+}
+
+.netdata-container {
+	display: -webkit-flex; /* Safari */
+	-webkit-flex-wrap: wrap; /* Safari 6.1+ */
+	display: inline-block;
+	flex-wrap: wrap;
+	overflow: hidden;
+
+	/* required for child elements to have absolute position */
+	position: relative;
+	
+	/* width and height is given per chart with data-width and data-height */
+}
+
+.netdata-container-with-legend {
+	display: -webkit-flex; /* Safari */
+	-webkit-flex-wrap: wrap; /* Safari 6.1+ */
+	display: inline-block;
+	flex-wrap: wrap;
+	overflow: hidden;
+
+	/* fix minimum scrollbar issue in firefox */
+	min-height: 99px;
+
+	/* required for child elements to have absolute position */
+	position: relative;
+	
+	/* width and height is given per chart with data-width and data-height */
+}
+
+.netdata-legend-resize-handler {
+	display: block;
+	position: absolute;
+	bottom: 0px;
+	right: 0px;
+	height: 15px;
+	width: 30px;
+	background-color: White;
+	font-size: 12px;
+	vertical-align: middle;
+	line-height: 15px;
+	cursor: ns-resize;
+	color: #DDDDDD;
+	text-align: center;
+	overflow: hidden;
+	z-index: 11;
+	padding: 0px;
+	margin: 0px;
+}
+
+.netdata-message {
+	display: none;
+	font-size: x-small;
+	width: 100%;
+	height: calc(100% - 10px); /* for the resize handler */
+	overflow: hidden;
+	background: inherit;
+	z-index: 10000;
+}
+
+.netdata-chart-is-loading {
+	display: none;
+	font-size: x-small;
+	width: 100%;
+	overflow: hidden;
+	background: white;
+	z-index: 10000;
+}
+
+.netdata-error-message {
+	background: #EEEEEE;
+}
+
+.netdata-info-message {
+}
+
+.netdata-chart-legend {
+	position: absolute;			/* within .netdata-container */
+	top: 0;
+	right: 0;
+	background-color: white;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	line-height: 14px;
+	display: block;
+	width: 140px;				/* --legend-width */
+	height: calc(100% - 15px);	/* 10px for the resize handler and 5px for the top margin */
+	font-size: 10px;
+	margin-top: 5px;
+	/* width and height is calculated (depends on the appearance of the legend) */
+}
+
+.netdata-legend-title-date {
+	font-size: 10px;
+	font-weight: normal;
+	margin-top: 0px;
+}
+.netdata-legend-title-time {
+	font-size: 11px;
+	font-weight: bold;
+	margin-top: 0px;
+}
+.netdata-legend-title-units {
+	position: absolute;
+	right: 5px;
+	float: right;
+	font-size: 10px;
+	vertical-align: top;
+	font-weight: normal;
+	margin-top: 0px;
+}
+.netdata-legend-series {
+	position: absolute;
+	width: 140px;				/* --legend-width */
+	height: calc(100% - 50px);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	line-height: 14px;
+	display: block;
+	font-size: 10px;
+	margin-top: 0px;
+}
+
+.netdata-legend-series > .netdata-legend-series-content {
+	position      : absolute;
+	overflow      : scroll;
+	overflow-x    : hidden;
+	top           : 0;
+	right         : 0;
+	bottom        : 0;
+	left          : 0;
+	text-overflow: ellipsis;
+}
+.netdata-legend-series > .netdata-legend-series-content:focus {
+	outline: thin dotted;
+}
+.netdata-legend-series > .netdata-legend-series-content::-webkit-scrollbar {
+	display: block; /* was 'none', but chrome was hidding content with it */
+}
+.has-scrollbar > .netdata-legend-series-content::-webkit-scrollbar {
+	display: block;
+}
+.netdata-legend-series > .netdata-legend-series-pane {
+/*	background : rgba(0,0,0,.25);*/
+	background : #DDD;
+	position   : absolute;
+	width      : 4px;
+	right      : 0;
+	top        : 0;
+	bottom     : 0;
+/*	visibility : hidden\9; */ /* Target only IE7 and IE8 with this hack */
+/*	opacity    : .01; */
+/*	-webkit-transition    : .2s; */
+/*	-moz-transition       : .2s; */
+/*	-o-transition         : .2s; */
+/*	transition            : .2s; */
+	-moz-border-radius    : 4px;
+	-webkit-border-radius : 4px;
+	border-radius         : 4px;
+}
+.netdata-legend-series > .netdata-legend-series-pane > .netdata-legend-series-slider {
+	background            : #444;
+/*	background            : rgba(0,0,0,.5);*/
+	position              : relative;
+	margin                : 0 1px;
+	-moz-border-radius    : 2px;
+	-webkit-border-radius : 2px;
+	border-radius         : 2px;
+}
+.netdata-legend-series:hover > .netdata-legend-series-pane, .netdata-legend-series-pane.active, .netdata-legend-series-pane.flashed {
+/*  visibility : visible\9; */ /* Target only IE7 and IE8 with this hack */
+/*  opacity    : 0.99;*/
+}
+
+.netdata-legend-name-table-line {
+	display: inline-block;
+	width: 13px;
+	height: 4px;
+	border-width: 0px;
+	border-bottom-width: 2px;
+	border-bottom-style: solid;
+	border-bottom-color: white;
+}
+.netdata-legend-name-table-area {
+	display: inline-block;
+	width: 13px;
+	height: 5px;
+	border-width: 1px;
+	border-top-width: 1px;
+	border-top-style: solid;
+	border-top-color: inherit;
+}
+.netdata-legend-name-table-stacked {
+	display: inline-block;
+	width: 13px;
+	height: 5px;
+	border-width: 1px;
+	border-top-width: 1px;
+	border-top-style: solid;
+	border-top-color: inherit;
+}
+.netdata-legend-name-tr {
+}
+.netdata-legend-name-td {
+}
+.netdata-legend-name {
+	text-align: left;
+	font-size: 10px;
+	font-weight: bold;
+	vertical-align: bottom;
+	margin-top: 0px;
+	z-index: 9;
+	padding: 0px;
+	width: 80px !important;
+	max-width: 80px !important;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: nowrap;
+	display: inline-block;
+	cursor: pointer;
+}
+
+.netdata-legend-value {
+	/*margin-left: 14px;*/
+	position: absolute;
+	right: 5px;
+	float: right;
+	text-align: right;
+	font-size: 10px;
+	font-weight: bold;
+	vertical-align: bottom;
+	background-color: White;
+	margin-top: 0px;
+	z-index: 10;
+	padding: 0px;
+	padding-left: 15px;
+	cursor: pointer;
+}
+.netdata-legend-name.not-selected {
+	font-weight: normal;
+	opacity: 0.3;
+}
+
+.netdata-chart {
+	position: absolute;		/* within .netdata-container */
+	top: 0;					/* within .netdata-container */
+	left: 0;				/* within .netdata-container */
+	display: inline-block;
+	overflow: hidden;
+	width: 100%;
+	height: 100%;
+
+	/* width and height is calculated (depends on the appearance of the legend) */
+}
+
+.netdata-chart-with-legend-right {
+	position: absolute;		/* within .netdata-container */
+	top: 0;					/* within .netdata-container */
+	left: 0;				/* within .netdata-container */
+	display: block;
+	overflow: hidden;
+	margin-right: 140px;		/* --legend-width */
+	width: calc(100% - 140px);	/* --legend-width */
+	height: 100%;
+	flex-grow: 1;
+
+	/* width and height is calculated (depends on the appearance of the legend) */
+}
+
+.netdata-peity-chart {
+
+}
+
+.netdata-sparkline-chart {
+
+}
+
+.netdata-dygraph-chart {
+
+}
+
+.netdata-morris-chart {
+
+}
+
+.netdata-google-chart {
+
+}
+
+.dygraph-ylabel {
+}
+
+.dygraph-title {
+	text-indent: 56px;
+	text-align: left;
+	position: absolute;
+	left: 0px;
+	top: 4px;
+	font-size: 11px;
+	font-weight: bold;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: nowrap;
+}
+
+/* fix for sparkline tooltip under bootstrap */
+.jqstooltip {
+  width: auto !important;
+  height: auto !important;
+}
diff --git a/web/dashboard.js b/web/dashboard.js
index 779203ff3a..5b5e0b4b8c 100755
--- a/web/dashboard.js
+++ b/web/dashboard.js
@@ -945,6 +945,7 @@
 	// - resize the chart as the div changes height
 	// - update the scrollbar of the legend
 	chartState.prototype.resizeAndRedrawChart = function(h) {
+		// console.log(h);
 		this.element.style.height = h;
 
 		if(this.settings_id !== null)
@@ -1392,14 +1393,29 @@
 		if(typeof series === 'undefined') return;
 		if(series.value === null && series.user === null) return;
 
-		value = this.legendFormatValue(value);
-
 		// if the value has not changed, skip DOM update
-		if(series.last === value) return;
-		series.last = value;
+		//if(series.last === value) return;
+
+		var s, r;
+		if(typeof value === 'number') {
+			var v = Math.abs(value);
+			s = r = this.legendFormatValue(value);
 
-		if(series.value !== null) series.value.innerHTML = value;
-		if(series.user !== null) series.user.innerHTML = value;
+			if(typeof series.last === 'number') {
+				if(v > series.last) s += '<i class="fa fa-angle-up" style="width: 8px; text-align: center; overflow: hidden; vertical-align: middle;"></i>';
+				else if(v < series.last) s += '<i class="fa fa-angle-down" style="width: 8px; text-align: center; overflow: hidden; vertical-align: middle;"></i>';
+				else s += '<i class="fa fa-angle-left" style="width: 8px; text-align: center; overflow: hidden; vertical-align: middle;"></i>';
+			}
+			else s += '<i class="fa fa-angle-right" style="width: 8px; text-align: center; overflow: hidden; vertical-align: middle;"></i>';
+			series.last = v;
+		}
+		else {
+			s = r = value;
+			series.last = value;
+		}
+
+		if(series.value !== null) series.value.innerHTML = s;
+		if(series.user !== null) series.user.innerHTML = r;
 	}
 
 	chartState.prototype.legendSetDate = function(ms) {
@@ -1456,10 +1472,12 @@
 		if(Math.abs(this.data.last_entry - this.data.before) <= this.data.view_update_every)
 			show_undefined = false;
 
-		if(show_undefined)
+		if(show_undefined) {
 			this.legendShowUndefined();
-		else
-			this.legendSetDate(this.data.before * 1000);
+			return;
+		}
+
+		this.legendSetDate(this.data.before * 1000);
 
 		var labels = this.data.dimension_names;
 		var i = labels.length;
@@ -1565,10 +1583,10 @@
 				if(this.debug === true)
 					this.log('chart in running... updating values on legend...');
 
-				var labels = this.data.dimension_names;
-				var i = labels.length;
-				while(i--)
-					this.legendSetLabelValue(labels[i], this.data.latest_values[i]);
+				//var labels = this.data.dimension_names;
+				//var i = labels.length;
+				//while(i--)
+				//	this.legendSetLabelValue(labels[i], this.data.latest_values[i]);
 			}
 			return;
 		}
@@ -1647,7 +1665,8 @@
 					flashedClass: '__flashed',
 					activeClass: '__active',
 					tabIndex: -1,
-					alwaysVisible: true
+					alwaysVisible: true,
+					sliderMinHeight: 10
 				},
 				series: {}
 			};
@@ -1787,7 +1806,7 @@
 	}
 
 	chartState.prototype.legendWidth = function() {
-		return (this.hasLegend())?110:0;
+		return (this.hasLegend())?140:0;
 	}
 
 	chartState.prototype.legendHeight = function() {
@@ -1989,7 +2008,7 @@
 				}
 			}
 		}
-		this.legendShowLatestValues();
+		// this.legendShowLatestValues();
 
 		// update the performance counters
 		var now = new Date().getTime();
@@ -2415,7 +2434,10 @@
 	// resize the chart to its real dimensions
 	// as given by the caller
 	chartState.prototype.sizeChart = function() {
-		this.element.className += " netdata-container";
+		if(this.hasLegend() === true)
+			this.element.className += " netdata-container-with-legend";
+		else
+			this.element.className += " netdata-container";
 
 		if(this.debug === true)
 			this.log('sizing element');
@@ -2472,8 +2494,6 @@
 		if(this.debug === null)
 			this.log('created');
 
-		this.sizeChart();
-
 		// make sure the host does not end with /
 		// all netdata API requests use absolute paths
 		while(this.host.slice(-1) === '/')
@@ -2493,6 +2513,8 @@
 		else
 			this.library = NETDATA.chartLibraries[this.library_name];
 
+		this.sizeChart();
+
 		// if we need to report the rendering speed
 		// find the element that needs to be updated
 		if(this.refresh_dt_element_name)
@@ -3164,7 +3186,7 @@
 		if(NETDATA.dygraph.smooth === false)
 			smooth = false;
 
-		var strokeWidth = (chart_type === 'stacked')?0.0:((smooth)?1.5:1.0)
+		var strokeWidth = (chart_type === 'stacked')?0.1:((smooth)?1.5:0.7)
 		var highlightCircleSize = (NETDATA.chartLibraries.dygraph.isSparkline(state))?3:4;
 
 		state.dygraph_options = {
@@ -3181,7 +3203,7 @@
 			legend: self.data('dygraph-legend') || 'always', // 'onmouseover',
 			labels: data.result.labels,
 			labelsDiv: self.data('dygraph-labelsdiv') || state.element_legend_childs.hidden,
-			labelsDivStyles: self.data('dygraph-labelsdivstyles') || { 'fontSize':'10px', 'zIndex': 10000 },
+			labelsDivStyles: self.data('dygraph-labelsdivstyles') || { 'fontSize':'1px' },
 			labelsDivWidth: self.data('dygraph-labelsdivwidth') || state.chartWidth() - 70,
 			labelsSeparateLines: self.data('dygraph-labelsseparatelines') || true,
 			labelsShowZeroValues: self.data('dygraph-labelsshowzerovalues') || true,
@@ -3217,8 +3239,8 @@
 			strokeBorderColor: self.data('dygraph-strokebordercolor') || 'white',
 			strokeBorderWidth: self.data('dygraph-strokeborderwidth') || (chart_type === 'stacked')?0.0:0.0,
 
-			fillGraph: self.data('dygraph-fillgraph') || (chart_type === 'area')?true:false,
-			fillAlpha: self.data('dygraph-fillalpha') || (chart_type === 'stacked')?0.8:0.2,
+			fillGraph: self.data('dygraph-fillgraph') || (chart_type === 'area' || chart_type === 'stacked')?true:false,
+			fillAlpha: self.data('dygraph-fillalpha') || (chart_type === 'stacked')?NETDATA.options.current.color_fill_opacity_stacked:NETDATA.options.current.color_fill_opacity_area,
 			stackedGraph: self.data('dygraph-stackedgraph') || (chart_type === 'stacked')?true:false,
 			stackedGraphNaNFill: self.data('dygraph-stackedgraphnanfill') || 'none',
 			
@@ -3278,7 +3300,7 @@
 				if(elements.hidden === null) return;
 
 				if (typeof data.x === 'undefined') {
-					state.legendReset();
+					//state.legendReset();
 				}
 				else {
 					state.legendSetDate(data.x);
@@ -3788,6 +3810,8 @@
 		var datatable = new google.visualization.DataTable(data.result);
 
 		state.google_options = {
+			colors: state.chartColors(),
+
 			// do not set width, height - the chart resizes itself
 			//width: state.chartWidth(),
 			//height: state.chartHeight(),
@@ -3850,12 +3874,13 @@
 		switch(state.chart.chart_type) {
 			case "area":
 				state.google_options.vAxis.viewWindowMode = 'maximized';
+				state.google_options.areaOpacity = NETDATA.options.current.color_fill_opacity_area;
 				state.google_instance = new google.visualization.AreaChart(state.element_chart);
 				break;
 
 			case "stacked":
 				state.google_options.isStacked = true;
-				state.google_options.areaOpacity = 0.85;
+				state.google_options.areaOpacity = NETDATA.options.current.color_fill_opacity_stacked;
 				state.google_options.vAxis.viewWindowMode = 'maximized';
 				state.google_options.vAxis.minValue = null;
 				state.google_options.vAxis.maxValue = null;
@@ -3978,6 +4003,7 @@
 			initialize: NETDATA.sparklineInitialize,
 			create: NETDATA.sparklineChartCreate,
 			update: NETDATA.sparklineChartUpdate,
+			resize: null,
 			setSelection: function(t) { return true; },
 			clearSelection: function() { return true; },
 			initialized: false,
@@ -3994,6 +4020,7 @@
 			initialize: NETDATA.peityInitialize,
 			create: NETDATA.peityChartCreate,
 			update: NETDATA.peityChartUpdate,
+			resize: null,
 			setSelection: function(t) { return true; },
 			clearSelection: function() { return true; },
 			initialized: false,
@@ -4010,6 +4037,7 @@
 			initialize: NETDATA.morrisInitialize,
 			create: NETDATA.morrisChartCreate,
 			update: NETDATA.morrisChartUpdate,
+			resize: null,
 			setSelection: function(t) { return true; },
 			clearSelection: function() { return true; },
 			initialized: false,
@@ -4026,6 +4054,7 @@
 			initialize: NETDATA.googleInitialize,
 			create: NETDATA.googleChartCreate,
 			update: NETDATA.googleChartUpdate,
+			resize: null,
 			setSelection: function(t) { return true; },
 			clearSelection: function() { return true; },
 			initialized: false,
@@ -4042,6 +4071,7 @@
 			initialize: NETDATA.raphaelInitialize,
 			create: NETDATA.raphaelChartCreate,
 			update: NETDATA.raphaelChartUpdate,
+			resize: null,
 			setSelection: function(t) { return true; },
 			clearSelection: function() { return true; },
 			initialized: false,
@@ -4058,6 +4088,7 @@
 			initialize: NETDATA.easypiechartInitialize,
 			create: NETDATA.easypiechartChartCreate,
 			update: NETDATA.easypiechartChartUpdate,
+			resize: null,
 			setSelection: function(t) { return true; },
 			clearSelection: function() { return true; },
 			initialized: false,
diff --git a/web/index.html b/web/index.html
index cea9fa3fc9..82241760aa 100755
--- a/web/index.html
+++ b/web/index.html
@@ -253,7 +253,7 @@
 	<!-- <script> netdataServer = "http://box:19999"; </script> -->
 
 	<!-- load the dashboard manager - it will do the rest -->
-	<script type="text/javascript" src="dashboard.js?v7"></script>
+	<script type="text/javascript" src="dashboard.js?v8"></script>
 </head>
 
 <body data-spy="scroll" data-target="#sidebar">