Shows some of the things gauge.js does.
8 inbuilt colors available (if are more colors required - the palette will be repeated)Download gauge.js and include it into your webpage.
<script type="text/javascript" src="gauge.js"></script>
To add a gauge just execute the function "gauge.add(element);" to a block-level element.
gauge.defaultWidth = 400; //INT 48|12-n (px) canvas|var width
gauge.defaultHeight = 30; //INT 12|48-n (px) canvas|var height
gauge.defaultRadius = 1.0; //FLOAT 0.001-1.0 radius of the corners
gauge.defaultReflex = 0.5; //FLOAT 0.001-1.0 transparency of the reflection
gauge.defaultOpacity = 0.25; //FLOAT 0.001-1.0 opacity (only visible with limit==true)
gauge.defaultLimit = false; //BOOLEAN limited value mode
gauge.defaultGradient = false; //BOOLEAN color gradient for limit==true and values length==2
gauge.defaultVertical = false; //BOOLEAN vertical orientation
gauge.defaultNoscale = false; //BOOLEAN no vertical tick marks
gauge.defaultBusy = false; //BOOLEAN no pulsating busy bar
gauge.defaultScale = null; //INT 2-n null==auto (number of scale areas)
gauge.defaultPulse = 100; //INT 30-1000 (pulsation speed in milliseconds)
gauge.defaultName = null; //STR canvas|var name|id
gauge.defaultValues = null; //OBJ array of numeric values
gauge.defaultEmpty = '#cccccc'; //STR empty area color
gauge.defaultColors = ['#3765D9', ... ,'#008000']; //OBJ array of colors
STRING = gauge.add(element[, options]);
element == block-level element
options e.g. {width: 128, height: 33, ...}
width == INT 48 - n Default: 400
height == INT 12 - n Default: 30
name == STRING Default: null
vertical == BOOLEAN true or false Default: false
radius == FLOAT 0.001 - 1.0 Default: 1.0
reflex == FLOAT 0.001 - 1.0 Default: 0.5
opacity == FLOAT 0.001 - 1.0 Default: 0.25
limit == BOOLEAN true or false Default: false
gradient == BOOLEAN true or false Default: false
noscale == BOOLEAN true or false Default: false
busy == BOOLEAN true or false Default: false
scale == INT 2 - n Default: null
pulse == INT 30 - 1000 Default: 100
values == ARRAY Default: null
empty == STRING Default: '#cccccc'
colors == ARRAY Default: ['#3765D9','#9EDE7C','#9E42EE','#EC7612','#00aaaa','#cc0000','#aaaa00','#008000']
gauge.modify(canvas|var, options);
options
radius == FLOAT 0.001 - 1.0
reflex == FLOAT 0.001 - 1.0
opacity == FLOAT 0.001 - 1.0
limit == BOOLEAN true or false
gradient == BOOLEAN true or false
noscale == BOOLEAN true or false
busy == BOOLEAN true or false
scale == INT 2 - n
pulse == INT 30 - 1000
values == ARRAY
empty == STRING
colors == ARRAY
STRING = gauge.add(element);
(returns current canvas|var name|id
)FLOAT = gauge.version;
STRING = gauge.released;
gauge.remove(canvas|var);
var my_gauge = gauge.add(document.getElementById('my_div'));
if(typeof $=='undefined') {function $(v) {return(document.getElementById(v));}}
gauge.add($('my_div'));
gauge.add($('my_div'), {name:'my_gauge', values:[144,1202.8]});
gauge.modify($('my_gauge'), {colors:['#ff0000','#00ff00']});
alert('gauge: '+gauge.version+' ('+gauge.released+')');
gauge.remove($('my_gauge'));
In older browsers, the script degrades and your visitors won't notice a thing.
Please read the license before you download gauge.js 1.4
Please read the Frequently Asked Questions before you contact the author.
The Internet Explorer implementation has a limitation of a maximum of 14 values for reasons that are inherent in the used vml fill parameter "colors".
Because of Operas different behavior (in comparison with gecko and webkit) when using "globalCompositeOperation", the presentation differs. It could be corrected, but for the price of a blown up source code.
Version 1.40
Please leave any comments at this contact formular.
gauge.js is distributed under the Netzgestade Non-commercial Software License Agreement.
License permits free of charge use on non-commercial and private web sites only under special conditions (as described in the license).
This license equals neither "open source" nor "public domain".
There are also Commercial Software Licenses available.