added gauge.js and adapted dashboard to use it

6 files changed, 545 insertions, 56 deletions

diff --git a/web/Makefile.am b/web/Makefile.am
index 248326b4cb..c7f75c9a2a 100644
--- a/web/Makefile.am
+++ b/web/Makefile.am
@@ -40,6 +40,7 @@ dist_weblib_DATA = \
         lib/bootstrap-toggle.min.js \
         lib/c3.min.js \
         lib/d3.min.js \
+        lib/gauge.min.js \
         $(NULL)
 
 webcssdir=$(webdir)/css
diff --git a/web/dashboard.css b/web/dashboard.css
index 98c877f7fb..937825d7f5 100755
--- a/web/dashboard.css
+++ b/web/dashboard.css
@@ -330,6 +330,7 @@ html {
 	display: inline-block;
 	position: absolute;
 	float: left;
+	left: 0;
 	width: 100%;
 	text-align: center;
 	color: #333333;
@@ -340,6 +341,7 @@ html {
 	display: inline-block;
 	position: absolute;
 	float: left;
+	left: 0;
 	width: 64%;
 	margin-left: 18%;
 	text-align: center;
@@ -351,9 +353,85 @@ html {
 	display: inline-block;
 	position: absolute;
 	float: left;
+	left: 0;
 	width: 60%;
 	margin-left: 20%;
 	text-align: center;
 	color: #999999;
 	font-weight: normal;
 }
+
+
+.gaugeChart {
+	position: relative;
+	text-align: center;
+}
+
+.gaugeChart canvas {
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 0;
+}
+
+.gaugeChartLabel {
+	display: inline-block;
+	position: absolute;
+	float: left;
+	left: 0;
+	width: 100%;
+	text-align: center;
+	color: #FFFFFF;
+	font-weight: bold;
+	z-index: 1;
+}
+
+.gaugeChartTitle {
+	display: inline-block;
+	position: absolute;
+	float: left;
+	left: 0;
+	width: 100%;
+	text-align: center;
+	color: #999999;
+	font-weight: bold;
+}
+
+.gaugeChartUnits {
+	display: inline-block;
+	position: absolute;
+	float: left;
+	left: 0;
+	bottom: 0;
+	width: 100%;
+	text-align: left;
+	margin-left: 5%;
+	color: #999999;
+	font-weight: normal;
+}
+
+.gaugeChartMin {
+	display: inline-block;
+	position: absolute;
+	float: left;
+	left: 0;
+	bottom: 10%;
+	width: 92%;
+	margin-left: 8%;
+	text-align: left;
+	color: #999999;
+	font-weight: normal;
+}
+
+.gaugeChartMax {
+	display: inline-block;
+	position: absolute;
+	float: left;
+	left: 0;
+	bottom: 10%;
+	width: 95%;
+	margin-right: 5%;
+	text-align: right;
+	color: #999999;
+	font-weight: normal;
+}
diff --git a/web/dashboard.html b/web/dashboard.html
index b8cc10e967..82f8128cdb 100755
--- a/web/dashboard.html
+++ b/web/dashboard.html
@@ -422,6 +422,90 @@ Sparklines using dygraphs
 	</div>
 </div>
 
+
+<hr>
+<h1>Gauge.js</h1>
+<br/>
+<div style="width: 33%; display: inline-block;">
+	<div style="display: inline-block; position: relative;">
+		<div data-netdata="system.processes"
+			data-chart-library="gauge"
+			data-width="250"
+			data-height="200"
+			data-after="-300"
+			data-points="300"
+			data-dt-element-name="time701"
+			></div>
+		<br/>
+		<small>rendered in <span id="time701">X</span> ms</small>
+	</div>
+	<div style="display: inline-block; position: relative;">
+		<div data-netdata="system.processes"
+			data-chart-library="gauge"
+			data-width="125"
+			data-height="100"
+			data-after="-300"
+			data-points="150"
+			data-dt-element-name="time701a"
+			></div>
+		<br/>
+		<small>rendered in <span id="time701a">X</span> ms</small>
+	</div>
+</div>
+<div style="width: 33%; display: inline-block;">
+	<div style="display: inline-block; position: relative;">
+		<div data-netdata="system.ipv4"
+			data-chart-library="gauge"
+			data-width="250"
+			data-height="200"
+			data-after="-300"
+			data-points="300"
+			data-dt-element-name="time702"
+			></div>
+		<br/>
+		<small>rendered in <span id="time702">X</span> ms</small>
+	</div>
+	<div style="display: inline-block; position: relative;">
+		<div data-netdata="system.ipv4"
+			data-chart-library="gauge"
+			data-width="125"
+			data-height="100"
+			data-after="-300"
+			data-points="150"
+			data-dt-element-name="time702a"
+			></div>
+		<br/>
+		<small>rendered in <span id="time702a">X</span> ms</small>
+	</div>
+</div>
+<div style="width: 33%; display: inline-block;">
+	<div style="display: inline-block; position: relative;">
+		<div data-netdata="system.cpu"
+			data-chart-library="gauge"
+			data-width="250"
+			data-height="200"
+			data-after="-300"
+			data-points="300"
+			data-dt-element-name="time703"
+			></div>
+		<br/>
+		<small>rendered in <span id="time703">X</span> ms</small>
+	</div>
+	<div style="display: inline-block; position: relative;">
+		<div data-netdata="system.cpu"
+			data-chart-library="gauge"
+			data-width="125"
+			data-height="100"
+			data-after="-300"
+			data-points="150"
+			data-dt-element-name="time703a"
+			></div>
+		<br/>
+		<small>rendered in <span id="time703a">X</span> ms</small>
+	</div>
+</div>
+
+
 <hr>
 <h1>Google Charts</h1>
 NetData was originaly developed with Google Charts.
diff --git a/web/dashboard.js b/web/dashboard.js
index 8c01700aac..c61e570ef4 100755
--- a/web/dashboard.js
+++ b/web/dashboard.js
@@ -6,6 +6,7 @@
 // var netdataNoGoogleCharts = true;	// do not use google
 // var netdataNoMorris = true;			// do not use morris
 // var netdataNoEasyPieChart = true;	// do not use easy pie chart
+// var netdataNoGauge = true;			// do not use gauge.js
 // var netdataNoD3 = true;				// do not use D3
 // var netdataNoC3 = true;				// do not use C3
 // var netdataNoBootstrap = true;		// do not load bootstrap
@@ -76,6 +77,7 @@
 	NETDATA.peity_js     		= NETDATA.serverDefault + 'lib/jquery.peity.min.js';
 	NETDATA.sparkline_js 		= NETDATA.serverDefault + 'lib/jquery.sparkline.min.js';
 	NETDATA.easypiechart_js 	= NETDATA.serverDefault + 'lib/jquery.easypiechart.min.js';
+	NETDATA.gauge_js 			= NETDATA.serverDefault + 'lib/gauge.min.js';
 	NETDATA.dygraph_js   		= NETDATA.serverDefault + 'lib/dygraph-combined.js';
 	NETDATA.dygraph_smooth_js   = NETDATA.serverDefault + 'lib/dygraph-smooth-plotter.js';
 	NETDATA.raphael_js   		= NETDATA.serverDefault + 'lib/raphael-min.js';
@@ -1356,6 +1358,7 @@
 
 
 		var noDataToShow = function() {
+			showMessageIcon('<i class="fa fa-warning"></i> empty');
 			that.legendUpdateDOM();
 			that.tm.last_autorefreshed = new Date().getTime();
 			that.data_update_every = 30 * 1000;
@@ -4145,6 +4148,21 @@
 	};
 
 	// ----------------------------------------------------------------------------------------------------------------
+
+	NETDATA.percentFromValueMax = function(value, max) {
+		if(value === null) value = 0;
+		if(max < value) max = value;
+		
+		var pcent = 0;
+		if(max !== 0) {
+			pcent = Math.round(value * 100 / max);
+			if(pcent === 0 && value > 0) pcent = 1;
+		}
+
+		return pcent;
+	}
+
+	// ----------------------------------------------------------------------------------------------------------------
 	// easy-pie-chart
 
 	NETDATA.easypiechartInitialize = function(callback) {
@@ -4200,20 +4218,6 @@
 		if(slot < 0 || slot >= state.data.result.length)
 			return NETDATA.easypiechartClearSelection(state);
 
-		var value = state.data.result[slot];
-		if(value === null) value = 0;
-
-		var max = (state.easyPieChartMax === null)?state.data.max:state.easyPieChartMax;
-		if(max < value) max = value;
-		
-		var pcent = 0;
-		if(max !== 0) {
-			pcent = Math.round(value * 100 / max);
-			if(pcent === 0 && value > 0) pcent = 1;
-		}
-
-		// console.log('slot = ' + slot + ' value = ' + value + ' max = ' + max + ' pcent = ' + pcent);
-
 		if(typeof state.easyPieChartEvent === 'undefined') {
 			state.easyPieChartEvent = {
 				timer: null,
@@ -4222,6 +4226,10 @@
 			};
 		}
 
+		var value = state.data.result[slot];
+		var max = (state.easyPieChartMax === null)?state.data.max:state.easyPieChartMax;
+		var pcent = NETDATA.percentFromValueMax(value, max);
+
 		state.easyPieChartEvent.value = value;
 		state.easyPieChartEvent.pcent = pcent;
 		state.easyPieChartLabel.innerHTML = state.legendFormatValue(value);
@@ -4248,16 +4256,8 @@
 		}
 		else {
 			value = data.result[0];
-			if(value === null) value = 0;
-
 			max = (state.easyPieChartMax === null)?data.max:state.easyPieChartMax;
-			if(max < value) max = value;
-
-			pcent = 0;
-			if(max !== 0) {
-				pcent = Math.round(value * 100 / max);
-				if(pcent === 0 && value > 0) pcent = 1;
-			}
+			pcent = NETDATA.percentFromValueMax(value, max);
 		}
 
 		state.easyPieChartLabel.innerHTML = state.legendFormatValue(value);
@@ -4270,29 +4270,28 @@
 		var chart = $(state.element_chart);
 
 		var value = data.result[0];
-		if(value === null) value = 0;
-
 		var max = self.data('easypiechart-max-value') || null;
+		var adjust = self.data('easypiechart-adjust') || null;
+		
 		if(max === null) {
 			max = data.max;
 			state.easyPieChartMax = null;
 		}
-		else {
+		else
 			state.easyPieChartMax = max;
-		}
-		if(max < value) max = value;
 
-		var pcent = 0;
-		if(max !== 0) {
-			pcent = Math.round(value * 100 / max);
-			if(pcent === 0 && value > 0) pcent = 1;
-		}
+		var pcent = NETDATA.percentFromValueMax(value, max);
 
-		// console.log('value = ' + value + ' max = ' + max + ' pcent = ' + pcent);
 		chart.data('data-percent', pcent);
 
-		var size = Math.min(state.chartWidth(), state.chartHeight());
-		if(size < 50) size = state.chartWidth();
+		var size;
+		switch(adjust) {
+			case 'width': size = state.chartHeight(); break;
+			case 'min': size = Math.min(state.chartWidth(), state.chartHeight()); break;
+			case 'max': size = Math.max(state.chartWidth(), state.chartHeight()); break;
+			case 'height':
+			default: size = state.chartWidth(); break;
+		}
 		state.element.style.width = size + 'px';
 		state.element.style.height = size + 'px';
 
@@ -4329,7 +4328,7 @@
 
 		chart.easyPieChart({
 			barColor: self.data('easypiechart-barcolor') || state.chartColors()[0], //'#ef1e25',
-			trackColor: self.data('easypiechart-trackcolor') || '#f2f2f2',
+			trackColor: self.data('easypiechart-trackcolor') || '#f0f0f0',
 			scaleColor: self.data('easypiechart-scalecolor') || '#dfe0e0',
 			scaleLength: self.data('easypiechart-scalelength') || 5,
 			lineCap: self.data('easypiechart-linecap') || 'round',
@@ -4355,6 +4354,237 @@
 	};
 
 	// ----------------------------------------------------------------------------------------------------------------
+	// gauge.js
+
+	NETDATA.gaugeInitialize = function(callback) {
+		if(typeof netdataNoGauge === 'undefined' || !netdataNoGauge) {
+			$.ajax({
+				url: NETDATA.gauge_js,
+				cache: true,
+				dataType: "script"
+			})
+				.done(function() {
+					NETDATA.registerChartLibrary('gauge', NETDATA.gauge_js);
+				})
+				.fail(function() {
+					NETDATA.error(100, NETDATA.gauge_js);
+				})
+				.always(function() {
+					if(typeof callback === "function")
+						callback();
+				})
+		}
+		else {
+			NETDATA.chartLibraries.gauge.enabled = false;
+			if(typeof callback === "function")
+				callback();
+		}
+	};
+
+	NETDATA.gaugeClearSelection = function(state) {
+		if(typeof state.gaugeEvent !== 'undefined') {
+			if(state.gaugeEvent.timer !== null)
+				clearTimeout(state.gaugeEvent.timer);
+
+			state.gaugeEvent.timer = null;
+		}
+
+		if(state.isAutoRefreshed() === true && state.data !== null) {
+			NETDATA.gaugeChartUpdate(state, state.data);
+		}
+		else {
+			state.gaugeChartLabel.innerHTML = state.legendFormatValue(null);
+			state.gaugeChartMax.innerHTML = state.legendFormatValue(null);
+			state.gauge_instance.animationSpeed = 1;
+			state.gauge_instance.set(0);
+		}
+		state.gauge_instance.animationSpeed = 32;
+
+		return true;
+	};
+
+	NETDATA.gaugeSetSelection = function(state, t) {
+		if(t < state.data_after || t > state.data_before)
+			return NETDATA.gaugeClearSelection(state);
+
+		var slot = Math.floor(state.data.result.length - 1 - (t - state.data_after) / state.data_update_every);
+		if(slot < 0 || slot >= state.data.result.length)
+			return NETDATA.gaugeClearSelection(state);
+
+		if(typeof state.gaugeEvent === 'undefined') {
+			state.gaugeEvent = {
+				timer: null,
+				value: 0,
+				max: 0,
+			};
+		}
+
+		var value = state.data.result[slot];
+		var max = (state.gaugeMax === null)?state.data.max:state.gaugeMax;
+		if(value > max) max = value;
+
+		state.gaugeEvent.value = value;
+		state.gaugeEvent.max = max;
+		state.gaugeChartLabel.innerHTML = state.legendFormatValue(value);
+		state.gaugeChartMax.innerHTML = state.legendFormatValue(max);
+
+		if(state.gaugeEvent.timer === null) {
+			state.gauge_instance.animationSpeed = 1;
+
+			state.gaugeEvent.timer = setTimeout(function() {
+				state.gaugeEvent.timer = null;
+				state.gauge_instance.maxValue = state.gaugeEvent.max;
+				state.gauge_instance.set(state.gaugeEvent.value);
+			}, 50);
+		}
+
+		return true;
+	};
+
+	NETDATA.gaugeChartUpdate = function(state, data) {
+		var value, max;
+
+		if(NETDATA.globalPanAndZoom.isActive() === true || state.isAutoRefreshed() === false) {
+			value = 0;
+			state.gaugeChartLabel.innerHTML = state.legendFormatValue(null);
+			state.gaugeChartMax.innerHTML = state.legendFormatValue(null);
+			state.gauge_instance.set(value);
+		}
+		else {
+			value = data.result[0];
+			max = (state.gaugeMax === null)?data.max:state.gaugeMax;
+			if(value > max) max = value;
+			state.gaugeChartLabel.innerHTML = state.legendFormatValue(value);
+			state.gaugeChartMax.innerHTML = state.legendFormatValue(max);
+			state.gauge_instance.maxValue = max;
+			state.gauge_instance.set(value);
+		}
+
+		return true;
+	};
+
+	NETDATA.gaugeChartCreate = function(state, data) {
+		var self = $(state.element);
+		var chart = $(state.element_chart);
+
+		var value = data.result[0];
+		var max = self.data('gauge-max-value') || null;
+		var adjust = self.data('gauge-adjust') || null;
+		
+		if(max === null) {
+			max = data.max;
+			state.gaugeMax = null;
+		}
+		else
+			state.gaugeMax = max;
+
+		var width = state.chartWidth(), height = state.chartHeight(), ratio = 1.5;
+		switch(adjust) {
+			case 'width': width = height * ratio; break;
+			case 'height':
+			default: height = width / ratio; break;
+		}
+		state.element.style.width = width.toString() + 'px';
+		state.element.style.height = height.toString() + 'px';
+
+		var lum_d = 0.05;
+
+		var options = {
+			lines: 12,					// The number of lines to draw
+			angle: 0.15,				// The length of each line
+			lineWidth: 0.44,			// 0.44 The line thickness
+			pointer: {
+				length: 0.8,			// 0.9 The radius of the inner circle
+				strokeWidth: 0.035,		// The rotation offset
+				color: '#C0C0C0'		// Fill color
+			},
+			colorStart: state.chartColors()[0],	// Colors
+			colorStop: state.chartColors()[0],	// just experiment with them
+			strokeColor: '#F0F0F0',		// to see which ones work best for you
+			generateGradient: false,
+			percentColors: [
+				[0.0, NETDATA.colorLuminance(state.chartColors()[0], (lum_d * 10) - (lum_d * 0))],
+				[0.1, NETDATA.colorLuminance(state.chartColors()[0], (lum_d * 10) - (lum_d * 1))],
+				[0.2, NETDATA.colorLuminance(state.chartColors()[0], (lum_d * 10) - (lum_d * 2))],
+				[0.3, NETDATA.colorLuminance(state.chartColors()[0], (lum_d * 10) - (lum_d * 3))],
+				[0.4, NETDATA.colorLuminance(state.chartColors()[0], (lum_d * 10) - (lum_d * 4))],
+				[0.5, NETDATA.colorLuminance(state.chartColors()[0], (lum_d * 10) - (lum_d * 5))],
+				[0.6, NETDATA.colorLuminance(state.chartColors()[0], (lum_d * 10) - (lum_d * 6))],
+				[0.7, NETDATA.colorLuminance(state.chartColors()[0], (lum_d * 10) - (lum_d * 7))],
+				[0.8, NETDATA.colorLuminance(state.chartColors()[0], (lum_d * 10) - (lum_d * 8))],
+				[0.9, NETDATA.colorLuminance(state.chartColors()[0], (lum_d * 10) - (lum_d * 9))],
+				[1.0, state.chartColors()[0]]]
+		};
+
+		state.gauge_canvas = document.createElement('canvas');
+		state.gauge_canvas.id = 'gauge-' + state.uuid + '-canvas';
+		state.gauge_canvas.className = 'gaugeChart';
+		state.gauge_canvas.width  = width;
+		state.gauge_canvas.height = height;
+		state.element_chart.appendChild(state.gauge_canvas);
+
+		var valuefontsize = Math.floor(height / 6);
+		var valuetop = Math.round((height - valuefontsize - (height / 6)) / 2);
+		state.gaugeChartLabel = document.createElement('span');
+		state.gaugeChartLabel.className = 'gaugeChartLabel';
+		state.gaugeChartLabel.innerHTML = state.legendFormatValue(value);
+		state.gaugeChartLabel.style.fontSize = valuefontsize + 'px';
+		state.gaugeChartLabel.style.top = valuetop.toString() + 'px';
+		state.element_chart.appendChild(state.gaugeChartLabel);
+
+		var titlefontsize = Math.round(valuefontsize / 2);
+		var titletop = 0;
+		state.gaugeChartTitle = document.createElement('span');
+		state.gaugeChartTitle.className = 'gaugeChartTitle';
+		state.gaugeChartTitle.innerHTML = state.title;
+		state.gaugeChartTitle.style.fontSize = titlefontsize + 'px';
+		state.gaugeChartTitle.style.lineHeight = titlefontsize + 'px';
+		state.gaugeChartTitle.style.top = titletop.toString() + 'px';
+		state.element_chart.appendChild(state.gaugeChartTitle);
+
+		var unitfontsize = Math.round(titlefontsize * 0.9);
+		state.gaugeChartUnits = document.createElement('span');
+		state.gaugeChartUnits.className = 'gaugeChartUnits';
+		state.gaugeChartUnits.innerHTML = state.units;
+		state.gaugeChartUnits.style.fontSize = unitfontsize + 'px';
+		state.element_chart.appendChild(state.gaugeChartUnits);
+
+		state.gaugeChartMin = document.createElement('span');
+		state.gaugeChartMin.className = 'gaugeChartMin';
+		state.gaugeChartMin.innerHTML = 0;
+		state.gaugeChartMin.style.fontSize = Math.round(valuefontsize * 0.75).toString() + 'px';
+		state.element_chart.appendChild(state.gaugeChartMin);
+
+		state.gaugeChartMax = document.createElement('span');
+		state.gaugeChartMax.className = 'gaugeChartMax';
+		state.gaugeChartMax.innerHTML = state.legendFormatValue(max);
+		state.gaugeChartMax.style.fontSize = Math.round(valuefontsize * 0.75).toString() + 'px';
+		state.element_chart.appendChild(state.gaugeChartMax);
+
+		// when we just re-create the chart
+		// do not animate the first update
+		var animate = true;
+		if(typeof state.gauge_instance !== 'undefined')
+			animate = false;
+
+		state.gauge_instance = new Gauge(state.gauge_canvas).setOptions(options); // create sexy gauge!
+		
+		// set max gauge value
+		state.gauge_instance.maxValue = max;
+
+		// set animation speed (32 is default value)
+		if(animate === false) state.gauge_instance.animationSpeed = 32;
+		else state.gauge_instance.animationSpeed = 1;
+
+		// set actual value
+		state.gauge_instance.set(value);
+		
+		// restore animation
+		state.gauge_instance.animationSpeed = 32;
+		return true;
+	};
+
+	// ----------------------------------------------------------------------------------------------------------------
 	// Charts Libraries Registration
 
 	NETDATA.chartLibraries = {
@@ -4534,6 +4764,23 @@
 			max_updates_to_recreate: function(state) { return 5000; },
 			track_colors: function(state) { return false; },
 			pixels_per_point: function(state) { return 3; }
+		},
+		"gauge": {
+			initialize: NETDATA.gaugeInitialize,
+			create: NETDATA.gaugeChartCreate,
+			update: NETDATA.gaugeChartUpdate,
+			resize: null,
+			setSelection: NETDATA.gaugeSetSelection,
+			clearSelection: NETDATA.gaugeClearSelection,
+			initialized: false,
+			enabled: true,
+			format: function(state) { return 'array'; },
+			options: function(state) { return 'absolute'; },
+			legend: function(state) { return null; },
+			autoresize: function(state) { return false; },
+			max_updates_to_recreate: function(state) { return 5000; },
+			track_colors: function(state) { return false; },
+			pixels_per_point: function(state) { return 3; }
 		}
 	};
 
diff --git a/web/index.html b/web/index.html
index a8d54531d7..11b71868a4 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?v15"></script>
+	<script type="text/javascript" src="dashboard.js?v16"></script>
 </head>
 
 <body data-spy="scroll" data-target="#sidebar">
@@ -342,6 +342,9 @@
 						<i class="fa fa-circle"></i> <a href="https://rendro.github.io/easy-pie-chart/" target="_blank">Easy Pie Chart</a> web chart library,
 						<i class="fa fa-copyright"></i> Copyright 2013, Robert Fleischmann, <a href="https://github.com/rendro/easy-pie-chart/blob/master/LICENSE" target="_blank">MIT License</a>
 
+						<i class="fa fa-circle"></i> <a href="http://bernii.github.io/gauge.js/" target="_blank">Gauge.js</a> web chart library,
+						<i class="fa fa-copyright"></i> Copyright, Bernard Kobos, <a href="http://bernii.github.io/gauge.js/" target="_blank">MIT License</a>
+
 						<i class="fa fa-circle"></i> <a href="https://jquery.org/" target="_blank">jQuery</a>,
 						<i class="fa fa-copyright"></i> Copyright 2015, jQuery Foundation, <a href="https://jquery.org/license/" target="_blank">MIT License</a>
 
@@ -923,31 +926,33 @@ function prepareScreen(data) {
 			$.each(disks, function(j, c) {
 				sidebar += '<li class><a href="#' + name2id(c.name) + '">' + c.name + '</a></li>';
 				html += '<div class="netdata-group-container" id="disk_' + name2id(c.name) + '" style="display: inline-block; width: ' + pcent_width.toString() + '%"><h2 id="' + name2id(c.name) + '" class="netdata-chart-alignment" role="heading">' + c.name + '</h2>';
-				var head = '<div class="netdata-chart-alignment">';
+				var head = '<div style="width: 100%; text-align: center;">';
 				var all = '';
 				$.each(c.values, function(x, f) {
 					var c = null;
 					var h = options.chartsHeight / 2;
 					switch(f.type) {
 						case 'disk'        : h = options.chartsHeight;
-								head += '<div style="margin-right: 10px;" data-netdata="' + f.id + '"'
+								head += '<div data-netdata="' + f.id + '"'
 								+ ' data-dimensions="reads"'
-								+ ' data-chart-library="easypiechart"'
+								+ ' data-chart-library="gauge"'
+								+ ' data-gauge-adjust="width"'
 								+ ' data-title="Read"'
-								+ ' data-width="120px"'
-								+ ' data-height="120px"'
+								+ ' data-width="100px"'
+								+ ' data-height="100px"'
 								+ ' 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="' + f.id + '"'
+								head += '<div data-netdata="' + f.id + '"'
 								+ ' data-dimensions="writes"'
-								+ ' data-chart-library="easypiechart"'
+								+ ' data-chart-library="gauge"'
+								+ ' data-gauge-adjust="width"'
 								+ ' data-title="Write"'
-								+ ' data-width="120px"'
-								+ ' data-height="120px"'
+								+ ' data-width="100px"'
+								+ ' data-height="100px"'
 								+ ' data-before="0"'
 								+ ' data-after="-' + duration.toString() + '"'
 								+ ' data-points="' + duration.toString() + '"'
@@ -956,12 +961,13 @@ function prepareScreen(data) {
 								break;
 						case 'disk_backlog': c = '#DD4477'; break;
 						case 'disk_util'   : c = '#109618';
-								head += '<div style="margin-right: 10px;" data-netdata="' + f.id + '"'
-								+ ' data-chart-library="easypiechart"'
+								head += '<div data-netdata="' + f.id + '"'
+								+ ' data-chart-library="gauge"'
 								+ ' data-title="Utilization"'
-								+ ' data-easypiechart-max-value="100"'
-								+ ' data-width="120px"'
-								+ ' data-height="120px"'
+								+ ' data-gauge-max-value="100"'
+								+ ' data-gauge-adjust="width"'
+								+ ' data-width="100px"'
+								+ ' data-height="100px"'
 								+ ' data-before="0"'
 								+ ' data-after="-' + duration.toString() + '"'
 								+ ' data-points="' + duration.toString() + '"'
@@ -1055,12 +1061,12 @@ function prepareScreen(data) {
 			}
 
 			if(typeof charts['system.cpu'] !== 'undefined')
-				head += '<div style="margin-right: 10px;" data-netdata="system.cpu"'
-				+ ' data-chart-library="easypiechart"'
+				head += '<div data-netdata="system.cpu"'
+				+ ' data-chart-library="gauge"'
 				+ ' data-title="CPU"'
 				+ ' data-units="%"'
-				+ ' data-easypiechart-max-value="100"'
-				+ ' data-width="11%"'
+				+ ' data-gauge-max-value="100"'
+				+ ' data-width="18%"'
 				+ ' data-height="49px"'
 				+ ' data-after="-' + duration.toString() + '"'
 				+ ' data-points="' + duration.toString() + '"'
@@ -1178,6 +1184,78 @@ function prepareScreen(data) {
 			});
 			html += head + all;
 		}
+		else if(t.name === 'netdata') {
+			var head = '<div style="width: 100%; text-align: center;">';
+			var all = '';
+
+			$.each(t.charts, function(x, f) {
+				switch(f.id) {
+					case 'netdata.net'   :
+							head += '<div data-netdata="' + f.id + '"'
+							+ ' data-dimensions="in"'
+							+ ' data-chart-library="gauge"'
+							+ ' data-title="Bytes In"'
+							+ ' data-gauge-adjust="width"'
+							+ ' data-width="100px"'
+							+ ' data-height="100px"'
+							+ ' data-before="0"'
+							+ ' data-after="-' + duration.toString() + '"'
+							+ ' data-points="' + duration.toString() + '"'
+							+ ' role="application"></div>';
+
+							head += '<div data-netdata="' + f.id + '"'
+							+ ' data-dimensions="out"'
+							+ ' data-chart-library="gauge"'
+							+ ' data-title="Bytes Out"'
+							+ ' data-gauge-adjust="width"'
+							+ ' data-width="100px"'
+							+ ' data-height="100px"'
+							+ ' data-before="0"'
+							+ ' data-after="-' + duration.toString() + '"'
+							+ ' data-points="' + duration.toString() + '"'
+							+ ' role="application"></div>';
+							break;
+
+					case 'netdata.requests'   : c = NETDATA.colors[2];
+							head += '<div data-netdata="' + f.id + '"'
+							+ ' data-chart-library="gauge"'
+							+ ' data-title="Requests / second"'
+							+ ' data-gauge-adjust="width"'
+							+ ' data-width="100px"'
+							+ ' data-height="100px"'
+							+ ' data-before="0"'
+							+ ' data-after="-' + duration.toString() + '"'
+							+ ' data-points="' + duration.toString() + '"'
+							+ ' data-colors="' + c + '"'
+							+ ' role="application"></div>';
+							break;
+
+					case 'netdata.clients'   : c = NETDATA.colors[3];
+							head += '<div data-netdata="' + f.id + '"'
+							+ ' data-chart-library="gauge"'
+							+ ' data-title="Connections"'
+							+ ' data-gauge-adjust="width"'
+							+ ' data-width="100px"'
+							+ ' data-height="100px"'
+							+ ' data-before="0"'
+							+ ' data-after="-' + duration.toString() + '"'
+							+ ' data-points="' + duration.toString() + '"'
+							+ ' data-colors="' + c + '"'
+							+ ' role="application"></div>';
+							break;
+				}
+
+				all += getMessage(f.id) + '<div data-netdata="' + f.id + '"'
+					+ ' data-width="' + pcent_width.toString() + '%"'
+					+ ' data-height="' + options.chartsHeight.toString() + 'px"'
+					+ ' data-before="0"'
+					+ ' data-after="-' + duration.toString() + '"'
+					+ ' data-id="' + name2id(options.hostname + '/' + f.id) + '"'
+					+ ' role="application"></div>';
+			});
+			head += '</div>';
+			html += head + all;
+		}
 		else {
 			$.each(t.charts, function(x, f) {
 				html += getMessage(f.id) + '<div data-netdata="' + f.id + '"'
diff --git a/web/lib/gauge.min.js b/web/lib/gauge.min.js
new file mode 100644
index 0000000000..733d502a22
--- /dev/null
+++ b/web/lib/gauge.min.js
@@ -0,0 +1 @@
+(function(){var a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q={}.hasOwnProperty,r=function(a,b){function c(){this.constructor=a}for(var d in b)q.call(b,d)&&(a[d]=b[d]);return c.prototype=b.prototype,a.prototype=new c,a.__super__=b.prototype,a};!function(){var a,b,c,d,e,f,g;for(g=["ms","moz","webkit","o"],c=0,e=g.length;e>c&&(f=g[c],!window.requestAnimationFrame);c++)window.requestAnimationFrame=window[f+"RequestAnimationFrame"],window.cancelAnimationFrame=window[f+"CancelAnimationFrame"]||window[f+"CancelRequestAnimationFrame"];return a=null,d=0,b={},requestAnimationFrame?window.cancelAnimationFrame?void 0:(a=window.requestAnimationFrame,window.requestAnimationFrame=function(c,e){var f;return f=++d,a(function(){return b[f]?void 0:c()},e),f},window.cancelAnimationFrame=function(a){return b[a]=!0}):(window.requestAnimationFrame=function(a,b){var c,d,e,f;return c=(new Date).getTime(),f=Math.max(0,16-(c-e)),d=window.setTimeout(function(){return a(c+f)},f),e=c+f,d},window.cancelAnimationFrame=function(a){return clearTimeout(a)})}(),String.prototype.hashCode=function(){var a,b,c,d,e;if(b=0,0===this.length)return b;for(c=d=0,e=this.length;e>=0?e>d:d>e;c=e>=0?++d:--d)a=this.charCodeAt(c),b=(b<<5)-b+a,b&=b;return b},o=function(a){var b,c;for(b=Math.floor(a/3600),c=Math.floor((a-3600*b)/60),a-=3600*b+60*c,a+="",c+="";c.length<2;)c="0"+c;for(;a.length<2;)a="0"+a;return b=b?b+":":"",b+c+":"+a},m=function(a){return k(a.toFixed(0))},p=function(a,b){var c,d;for(c in b)q.call(b,c)&&(d=b[c],a[c]=d);return a},n=function(a,b){var c,d,e;d={};for(c in a)q.call(a,c)&&(e=a[c],d[c]=e);for(c in b)q.call(b,c)&&(e=b[c],d[c]=e);return d},k=function(a){var b,c,d,e;for(a+="",c=a.split("."),d=c[0],e="",c.length>1&&(e="."+c[1]),b=/(\d+)(\d{3})/;b.test(d);)d=d.replace(b,"$1,$2");return d+e},l=function(a){return"#"===a.charAt(0)?a.substring(1,7):a},j=function(){function a(a,b){null==a&&(a=!0),this.clear=null!=b?b:!0,a&&AnimationUpdater.add(this)}return a.prototype.animationSpeed=32,a.prototype.update=function(a){var b;return null==a&&(a=!1),a||this.displayedValue!==this.value?(this.ctx&&this.clear&&this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height),b=this.value-this.displayedValue,Math.abs(b/this.animationSpeed)<=.001?this.displayedValue=this.value:this.displayedValue=this.displayedValue+b/this.animationSpeed,this.render(),!0):!1},a}(),e=function(a){function b(){return b.__super__.constructor.apply(this,arguments)}return r(b,a),b.prototype.displayScale=1,b.prototype.setTextField=function(a){return this.textField=a instanceof i?a:new i(a)},b.prototype.setMinValue=function(a,b){var c,d,e,f,g;if(this.minValue=a,null==b&&(b=!0),b){for(this.displayedValue=this.minValue,f=this.gp||[],g=[],d=0,e=f.length;e>d;d++)c=f[d],g.push(c.displayedValue=this.minValue);return g}},b.prototype.setOptions=function(a){return null==a&&(a=null),this.options=n(this.options,a),this.textField&&(this.textField.el.style.fontSize=a.fontSize+"px"),this.options.angle>.5&&(this.gauge.options.angle=.5),this.configDisplayScale(),this},b.prototype.configDisplayScale=function(){var a,b,c,d,e;return d=this.displayScale,this.options.highDpiSupport===!1?delete this.displayScale:(b=window.devicePixelRatio||1,a=this.ctx.webkitBackingStorePixelRatio||this.ctx.mozBackingStorePixelRatio||this.ctx.msBackingStorePixelRatio||this.ctx.oBackingStorePixelRatio||this.ctx.backingStorePixelRatio||1,this.displayScale=b/a),this.displayScale!==d&&(e=this.canvas.G__width||this.canvas.width,c=this.canvas.G__height||this.canvas.height,this.canvas.width=e*this.displayScale,this.canvas.height=c*this.displayScale,this.canvas.style.width=e+"px",this.canvas.style.height=c+"px",this.canvas.G__width=e,this.canvas.G__height=c),this},b}(j),i=function(){function a(a){this.el=a}return a.prototype.render=function(a){return this.el.innerHTML=m(a.displayedValue)},a}(),a=function(a){function b(a,b){this.elem=a,this.text=null!=b?b:!1,this.value=1*this.elem.innerHTML,this.text&&(this.value=0)}return r(b,a),b.prototype.displayedValue=0,b.prototype.value=0,b.prototype.setVal=function(a){return this.value=1*a},b.prototype.render=function(){var a;return a=this.text?o(this.displayedValue.toFixed(0)):k(m(this.displayedValue)),this.elem.innerHTML=a},b}(j),b={create:function(b){var c,d,e,f;for(f=[],d=0,e=b.length;e>d;d++)c=b[d],f.push(new a(c));return f}},h=function(a){function b(a){this.gauge=a,this.ctx=this.gauge.ctx,this.canvas=this.gauge.canvas,b.__super__.constructor.call(this,!1,!1),this.setOptions()}return r(b,a),b.prototype.displayedValue=0,b.prototype.value=0,b.prototype.options={strokeWidth:.035,length:.1,color:"#000000"},b.prototype.setOptions=function(a){return null==a&&(a=null),p(this.options,a),this.length=this.canvas.height*this.options.length,this.strokeWidth=this.canvas.height*this.options.strokeWidth,this.maxValue=this.gauge.maxValue,this.minValue=this.gauge.minValue,this.animationSpeed=this.gauge.animationSpeed,this.options.angle=this.gauge.options.angle},b.prototype.render=function(){var a,b,c,d,e,f,g,h,i;return a=this.gauge.getAngle.call(this,this.displayedValue),b=this.canvas.width/2,c=.9*this.canvas.height,h=Math.round(b+this.length*Math.cos(a)),i=Math.round(c+this.length*Math.sin(a)),f=Math.round(b+this.strokeWidth*Math.cos(a-Math.PI/2)),g=Math.round(c+this.strokeWidth*Math.sin(a-Math.PI/2)),d=Math.round(b+this.strokeWidth*Math.cos(a+Math.PI/2)),e=Math.round(c+this.strokeWidth*Math.sin(a+Math.PI/2)),this.ctx.fillStyle=this.options.color,this.ctx.beginPath(),this.ctx.arc(b,c,this.strokeWidth,0,2*Math.PI,!0),this.ctx.fill(),this.ctx.beginPath(),this.ctx.moveTo(f,g),this.ctx.lineTo(h,i),this.ctx.lineTo(d,e),this.ctx.fill()},b}(j),c=function(){function a(a){this.elem=a}return a.prototype.updateValues=function(a){return this.value=a[0],this.maxValue=a[1],this.avgValue=a[2],this.render()},a.prototype.render=function(){var a,b;return this.textField&&this.textField.text(m(this.value)),0===this.maxValue&&(this.maxValue=2*this.avgValue),b=this.value/this.maxValue*100,a=this.avgValue/this.maxValue*100,$(".bar-value",this.elem).css({width:b+"%"}),$(".typical-value",this.elem).css({width:a+"%"})},a}(),g=function(a){function b(a){this.canvas=a,b.__super__.constructor.call(this),this.percentColors=null,"undefined"!=typeof G_vmlCanvasManager&&(this.canvas=window.G_vmlCanvasManager.initElement(this.canvas)),this.ctx=this.canvas.getContext("2d"),this.gp=[new h(this)],this.setOptions(),this.render()}return r(b,a),b.prototype.elem=null,b.prototype.value=[20],b.prototype.maxValue=80,b.prototype.minValue=0,b.prototype.displayedAngle=0,b.prototype.displayedValue=0,b.prototype.lineWidth=40,b.prototype.paddingBottom=.1,b.prototype.percentColors=null,b.prototype.options={colorStart:"#6fadcf",colorStop:void 0,gradientType:0,strokeColor:"#e0e0e0",pointer:{length:.8,strokeWidth:.035},angle:.15,lineWidth:.44,fontSize:40,limitMax:!1},b.prototype.setOptions=function(a){var c,d,e,f;for(null==a&&(a=null),b.__super__.setOptions.call(this,a),this.configPercentColors(),this.lineWidth=this.canvas.height*(1-this.paddingBottom)*this.options.line