Round speedometer with Jquery / CSS in a browser

Question

I need to make a round object much like a speedometer (with moving needle inside indicating a value) in a browser. currently for all other items on this page iam using jquery. I rather not use flash as it needs to be ipod / iphone usable.

Any experience others have had doing this is greatly appreciated.

Answer 1

You might consider using Processing.js, which was ported to JS by John Resig, the same guy who invented jQuery. It allows you to draw any sort of primitive on an HTML Canvas. It supports all major browsers (from the website):

Processing.js runs in FireFox, Safari, Opera, Chrome and will also work with Internet Explorer, using Explorer Canvas.

Answer 2

Check out this speedometer created using Javascript/css and some analog clocks in Javascript/css as well.

You can use the source in those as a starting point for what you are trying to accomplish.

Answer 3

There is also now a specific 'speedomiter' plug in for jquery - looks nice and simple also appears to have good cross browser compatability.

http://plugins.jquery.com/node/14397/release

Answer 4

You encountered the same requirement as I did. I've written a flot plugin by modifying the flot.pie.js, here is the code effect

http://dl.iteye.com/upload/attachment/469925/a6d6c376-d661-3fa5-bc23-ed15b803da10.jpg

and you can retrieve the source from: http://georgezeng.iteye.com/admin/blogs/1014349

note: You should use this js with flot.

Answer 5

Here is a speedometer which may work you. http://dejapong.com/?p=138. It does require raphael.js, but that is not a large library (61k).

The plugin allows you to adjust lighting, and face colors, along with a couple other features.