#7182

by amcharts

HTML

<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/gauge.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<div id="chartdiv"></div>

CSS

#chartdiv {
	width	: 100%;
	height	: 500px;
}

JavaScript

var chart; 
var arrow; 
var axis;

AmCharts.ready(function () { 
// create angular gauge 
chart = new AmCharts.AmAngularGauge(); 
chart.addTitle("Energymeter");

// create axis 
axis = new AmCharts.GaugeAxis(); 
axis.startValue = -10; 
axis.endValue = 5; 
// color bands 
var band1 = new AmCharts.GaugeBand(); 
band1.startValue = -10; 
band1.endValue = 0; 
band1.color = "#ea3838"; 
band1.innerRadius = "95%";

var band2 = new AmCharts.GaugeBand(); 
band2.startValue = 0; 
band2.endValue = 2; 
band2.color = "#ffac29"; 
band2.innerRadius = "95%";

var band3 = new AmCharts.GaugeBand(); 
band3.startValue = 2; 
band3.endValue = 5; 
band3.color = "#00CC00"; 
band3.innerRadius = "95%";

axis.bands = [band1, band2, band3]; 
axis.gridCount = 15; 
axis.startAngle = -130; 
axis.endAngle = 130;

// bottom text 
axis.bottomTextYOffset = -20; 
axis.setBottomText("0 kWh"); 
axis.bottomTextFontSize = 24; 
chart.addAxis(axis);

// gauge arrow 
arrow = new AmCharts.GaugeArrow(); 
chart.addArrow(arrow); 
arrow.axis = axis; 
arrow.setValue(1); 
axis.setBottomText(0 + " kWh"); 
chart.write("chartdiv"); 
// change value every 2 seconds 
// setInterval(randomValue, 2000); 
});