gauge.js (javascript programmable gauge)

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

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.

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

Fast and easy to implement and fully programmable.
It's dead easy to change the attributes of the gauges.
Free of charge use on non-commercial and private web sites.

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

Added support for Internet Explorer 9

Version 1.33

Fixed IE printing problem by the help of Bill Alexander

Version 1.32

Bug fixes

Version 1.3

Added support for pulsating busy gauge

Version 1.2

Added support for vertical orientation

Version 1.1

Added support for corner radius

Version 1.0

Initial Release

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.

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.

home
developer
laboratory
mapzoom.js
Supports zoom & pan for pixel & vector data! It's a conceptual combination of ShiftZoom and Mapper. Requires no plugin/extension or any other external resource!
shiftzoom.js
Supports zoom & pan functionality! The library allows you to add/remove zoom and pan functionality to oversized images on your webpages. Requires no plugin/extension or any other external resource!
snapfit.js
Supports jigsaw puzzle functionality! The script allows you to add jigsaw puzzles with individual options to images on your webpages. Requires no plugin/extension or any other external resource!
booklet.js
Simulates an authentic looking album or book presenting photos, images and pictures of all sizes and with any aspect ratio. Includes covering, navigation, information, linking and auto generated visual table of contents. Requires no plugin/extension or any other external resource!
tripleb.js
Simulates the CSS 3 beautifying features border-radius, box-shadow and background-gradient on your webpages. Requires no plugin/extension or any other external resource!
loupe.js
Simulates an authentic looking magnifying glass! The script allows you to add a loupe for magnifying (inc. start viewpoint) to an image on your webpage. Requires no plugin/extension but one external resource image!
busy.js
Supports native spinner animations! The library allows you to add/remove loading indicators to the viewport and to block-level elements on your webpages. Requires no plugin/extension or any other external resource!
mapper.js
Emulates native area highlighting! The script allows you to add automatic area highlighting to image maps on your webpages (inc. export to SVG). Requires no plugin/extension or any other external resource!
glossy.js
Simulates a glossy shaded and beveled button look! The script allows you to add individual corners, shadings and shadows to images on your webpages. Requires no plugin/extension or any other external resource!
slided.js
Simulates a slide frame look including gradients! The script allows you to add individual colors, shadings and shadows to images on your webpages. Requires no plugin/extension or any other external resource!
corner.js
Simulates a whole bunch of image effects! The script allows you to add individual corners, shadings and shadows to images on your webpages. Requires no plugin/extension or any other external resource!
transm.js
Supports programmable image transitions! Features 113 transitions, 32 tweenings, individual corners, overlay graphics and event actions. Requires no plugin/extension or any other external resource!
filmed.js
Simulates a film strip look including reflection! The script allows you to add individual colors, shining and shadows to images on your webpages. Requires no plugin/extension or any other external resource!
edge.js
Simulates masked image edges! The script allows you to add individual masks (inc. inbuilt mask) to images on your webpages. Requires no plugin/extension but zero or more external mask images!
sphere.js
Simulates a spherical image effect! The script allows you to add an spherical picture effect with individual zooming, shading, shining, transparency and colors to images on your webpages. Requires no plugin/extension or any other external resource!
bevel.js
Simulates a whole bunch of image effects! The script allows you to add bevels with individual glowing, shading and shining to images on your webpages. Requires no plugin/extension or any other external resource!
curl.js
Simulates a page curl image effect! The script allows you to add curls with individual paperback color, shadow opacity and size to images on your webpages. Requires no plugin/extension or any other external resource!
instant.js
Simulates an instant picture look including tilt! The script allows you to add individual colors, tiltings and shadows to images on your webpages. Requires no plugin/extension or any other external resource!
reflex.js
Simulates a Cover Flow^™ image effect! The script allows you to add individual borders, tiltings and reflections to images on your webpages. Requires no plugin/extension or any other external resource! *Cover Flow is a trademark of Apple Inc.