Reputation: 1631

Round speedometer with Jquery / CSS in a browser

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.

Upvotes: 0

Answers (5)

GerogeZeng

Reputation: 11

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.

Upvotes: 1

sparrow400

Reputation: 315

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.

Upvotes: 0

megaSteve4

Reputation: 1760

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

Upvotes: 1

cdmckay

Reputation: 32240

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.

Upvotes: 1

ichiban

Reputation: 6200

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.

Upvotes: 1

Round speedometer with Jquery / CSS in a browser

Answers (5)

Related Questions