Here is my very simple, resizable, html5 Horizontal Bar Gauge. It is slightly different than the other gauges because I use the gradient feature of the canvas. This feature is not supported in some browsers yet, so it may not work properly.
It is very easy to customize so you can change it up any way you like by modifying the code. The Gauge has the ability to show an upper and lower alarm and emergency level.
To use this control you simply need to include a canvas object on your page and the following script at the bottom of your web page.
<canvas id='myHBar' width='100px' height='200px' ></canvas>
Put this line at the bottom of the file to include the code.
var nReading = Math.floor(Math.random()* 100);
var sParams = "title=Demo;min=0;ll=10;l=20;h=90;hh=95;max=100;val="+nReading+";display="+nReading+" liters";
The sParams string contains the following keys and values: title= text string for top right of gauge min= integer, lowest value to show on gauge ll= integer, start of the low emergency level l= integer, start of the low caution level h= integer, start of the high caution hh= integer, start of the high emergency level max= integer, highest value to show on gauge val= integer, needle point level display= friendly text for display at bottom of gauge
Here is a link to the code ROHBar.js or you can pull the latest from github at https://github.com/rostafichuk/JS_Gauges.git