Skip to content
JavaScript Gauges for data via HTML5 Canvas
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.gitattributes
.gitignore
LICENSE
README.md
gauge_example.png

README.md

JavaScript Gauges

Gauge Visualization done in Javascript via the HTML5 Canvas.

Example

alt text

Live Demo

http://www.dshifflet.com/gauges/

Setup

			var flow = new gauges.gauge("FLOW",270,180,0,350,3, 
			  new gauges.gaugeTitle("STREAM FLOW", "GPH"),
			[ 
				new gauges.gaugeTick(50,1,15,true),
			  	new gauges.gaugeTick(25,1,10,false), 
			  	new gauges.gaugeTick(5,1,5,false) 
			],
			[
				new gauges.gaugeShade("green", 91,236,7),
				new gauges.gaugeShade("red", 236,350,7),
				new gauges.gaugeShade("white", 64,130,3)
			],
			[
				new gauges.gaugeNeedle(new gauges.needlePainters.lineNeedle(), "blue", 95, 2, 0),
				new gauges.gaugeNeedle(new gauges.needlePainters.pointyNeedle(), "orange", 95, 2, 10)
			]);
			flow.paint();	

And in the HTML

<div id="FLOW" style="height:300px;width:300px;background-color:black;color:white;position:absolute;z-index:5;top:0;left:5;"></div>
You can’t perform that action at this time.