<canvas id="canvas1" width="300" height="50"></canvas>
<script>
	var gauge1 = new Gauge("canvas1", { 'color': "#0F0" ,'range': {'min':-50, 'max':50 } }); // gauge is not draw until Gauge.draw(value) runs; 
</script>
<div class="form-group">
	<button onClick="gauge1.draw( Math.floor(Math.random()*100)-50 );" class="btn btn-primary">Press to Draw</button>
</div>

<canvas id="canvas2" width="500" height="100"></canvas>
<script>
	var gauge2 = new Gauge("canvas2");
	gauge2.draw( Math.floor(Math.random()*100) );
	var run = setInterval(function() { gauge2.draw( Math.floor(Math.random()*100) ); }, 5000);
</script>

<canvas id="canvas3" width="200" height="200"></canvas>
<script>
	var gauge3 = new Gauge("canvas3", {'mode':'needle', 'range': {'min':-30, 'max':30 } });
	gauge3.draw( Math.floor(Math.random()*60)-30 );
	var run = setInterval(function() { gauge3.draw( Math.floor(Math.random()*60)-30 ); }, 5000);
</script>

<canvas id="canvas4" width="300" height="300"></canvas>
<script>
    var gauge4 = new Gauge("canvas4", {'mode':'needle', 'range': {'min':0, 'max':140 } });
    gauge4.draw( Math.floor(Math.random()*140) );
    var run = setInterval(function() { gauge4.draw( Math.floor(Math.random()*140) ); }, 5000);
</script>