Fuel Gauge in JavaScript?

Question

Looking for a fuel gauge in JavaScript (no flash please).
I founf this site, anyone try it?
FREE - Bindows™ Ajax Gauges Library

Any other recommendations?

Thank You,
Greg

Answer 1

Dojo has an Analog Guage.
It is a very extensive toolkit for javascript programming.
I recommend it.

Answer 2

I'm not familiar with the library you mentioned. If you don't need to do anything too fancy, I would recommend the Gauge visualization that is part of the Google Visualization API. It's Javascript and uses SVG or VML based on the browser. And having it hosted and maintained by Google is a plus.

Answer 3

There are some pretty sweet gauges available here using pure JS (and SVG/VML):

http://www.janapriya.net/vis/

Answer 4

There are some interesting HTML5 solutions, like RGraph (which does have a fuel-gauge). You probably can't use this now unless you have full control over your visitors' browser choice, but it's an approach to keep an eye on.

Answer 5

I made my own javascript gauge, maybe you'll find it useful. Uses canvas but works pretty well in IE too using a custom build of excanvas. No 3rd party library needed.

Answer 6

Client-side dashboard gauges can be difficult to pull off, especially since you don't want to use Flash.

Depending on your requirements and how much time you have, you have many options, but only a few that look visually appealing:

Animated jQuery/CSS Gauges
First, the Animated jQuery/CSS Gauges from Perq (See, 1st reply to Question) look like a good option. Everything from the colors to the text seem controllable. The code also seems pretty lightweight. For example:

//Invoke Gauges when page loads
gauge('v');
gauge('s');
gauge('p');

PROS: jQuery, Unobstruive (CSS/JS), Sexy
CONS: Made for HR (but, should be easy to "rebrand for what you need"

jQuery Dashboard Gauges using Raphael
Finally, the jQuery Dashboard Gauges using Raphael from TechOctave look like another good option since they specifically have a Fuel Gauge component and it looks free. Plus, it looks like they have a Speedometer and Temperature Gauge too.

The code here is also pretty OO, sweet and familiar. For example:

var speedGauge = new Speedometer("speedometer");
speedGauge.SetMPH(50);
speedGauge.Accelerate();

PROS: jQuery, Raphael.js, Unobstruive CSS/JS, Semantic XHTML, Sexy, Use Out-of-the-Box
CONS: Based on fixed base image, so you might be stuck with the gauge size

Answer 7

Here are some circular sliders... can be used for input and are somewhat gauge like:

http://www.thewebmasterservice.com/dev-blog/curved-rounded-or-circular-sliders-javascript-jquery-ui