Javascript Horizontal Bar Gauge

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.

I am releasing this under the MIT license because I find it to be the most useful for free and non-free software. As a commercial Developer I need to be able to use open source in closed projects. The License is at the top of each of the javascript files.

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.
<script type="text/javascript" src="ROHBar.js"></script>

The following code shows how to call the script to draw the gauge. You can also look at the javascript on this page to see how it is done.

<script type="text/javascript">
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";
} catch(err)

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