Here is my very simple, resizable, html5 Fuel Gauge basically copied from the temperature gauge. 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='myFuel' 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 ROFuel.js or you can pull the latest from github at https://github.com/rostafichuk/JS_Gauges.git