CVI
gauge.js 1.4 allows you to add gauges (with shading and reflection) to your webpages. It uses unobtrusive javascript to keep your code clean.

It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+. On older browsers, it'll degrade and your visitors won't notice a thing.

Demonstration

Shows some of the things gauge.js does.

8 inbuilt colors available (if are more colors required - the palette will be repeated)
Custom palette via argument   colors: ['#ff0000',...]
Different dimensions via arguments   width: 48, height: 12   (minimum dimension)
Height is divided into 2/3 gauge and 1/3 reflection   width: 600, height: 60
Different values via argument   values: [1210,2095.74,6400,3545.2]
Different tick marks via argument   scale: 10   (default is scale: null)
No tick marks via argument   noscale: true   and no round corner via   radius: 0.001
Different behavior via argument   limit: true   (last value equals max value)
Empty area definition via arguments   empty: '#ff0000', opacity: 0.5   (only visible if limit==true)
Different behavior via argument   gradient: true   (#1-#2 color gradient)
Different behavior via argument   busy: true   (#1-#2 color pulsation)
Different orientation via argument   vertical: true

Setting Up

Download gauge.js and include it into your webpage.

<script type="text/javascript" src="gauge.js"></script>

Using It

To add a gauge just execute the function "gauge.add(element);" to a block-level element.

Usage

Set defaults
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

Add gauge
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']
(Advice: By adding a gauge to a block-level element, the former content of the element will be overwritten)

Modify gauge
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

Get some informations
STRING = gauge.add(element); (returns current canvas|var name|id)
FLOAT  = gauge.version;
STRING = gauge.released;

Remove gauge
gauge.remove(canvas|var);

Examples
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'));

Why use Javascript Gauges?

In older browsers, the script degrades and your visitors won't notice a thing.

Download

Please read the license before you download gauge.js 1.4

F.A.Q.

Please read the Frequently Asked Questions before you contact the author.

Restrictions

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.

History

Version 1.40

Version 1.33 Version 1.32 Version 1.3 Version 1.2 Version 1.1 Version 1.0

Contact

Please leave any comments at this contact formular.

License

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.

YOU AGREE TO ALL CONDITIONS OF THIS LICENCE AGREEMENT CONCERNING THE USE OF THE SOFTWARE BY ACCEPTING THIS LICENCE.
IF YOU DO NOT AGREE TO ALL CONDITIONS OF THIS AGREEMENT, YOU SHALL NOT INSTALL THE SOFTWARE, OR USE IT IN OTHER WAYS.

Other Projects

gauge.netzgesta.de © 2014 by Christian Effenberger feed   twitter   facebook   myspace   delicious   digg   reddit   magnoliacom   newsvine   furl   google   yahoo   blinklist   mister-wong