gauges.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="scripts/gauge.min.js"></script>
		<title>Gauges</title>
	</head>
	<body>
		<canvas id="foo" width="200" height="100" style="border:0px solid #000000;">
</canvas>
<div id="gauge"></div>
	</body>
	<script>
document.onreadystatechange = function () {
  if (document.readyState == "complete") {		
		var opts = {
		  lines: 12, // The number of lines to draw
		  angle: 0.15, // The length of each line
		  lineWidth: 0.44, // The line thickness
		  pointer: {
		    length: 0.9, // The radius of the inner circle
		    strokeWidth: 0.035, // The rotation offset
		    color: '#000000' // Fill color
		  },
		  limitMax: 'false',   // If true, the pointer will not go past the end of the gauge
		  colorStart: '#6FADCF',   // Colors
		  colorStop: '#8FC0DA',    // just experiment with them
		  strokeColor: '#E0E0E0',   // to see which ones work best for you
		  generateGradient: true
		};
		var target = document.getElementById('foo'); // your canvas element
		var gauge = new Gauge(target).setOptions(opts); // create sexy gauge!
		gauge.maxValue = 3000; // set max gauge value
		gauge.animationSpeed = 32; // set animation speed (32 is default value)
		gauge.setTextField(document.getElementById("gauge"));
		gauge.set(1250); // set actual value
		}
}
	</script>
</html>