How to Create a Javascript Speedometer

This is just a simple PoC of a Javascript speedometer for a colleague of mine.

At first I thought that a speedometer would be terrible for visualizing data, but after playing around with it for a while, I can see it could have uses where the minimum and maximum are known and you just want to be able to determine at a glance what the current status is.

A speedometer like visualization could also be useful if you are using something like Comet and the data is rapidly changing. I've included a digital readout¹, however you'll notice that with the high frequency of updates in the PoC it's not particularly easy to read compared to the speedo.

Firefox and Opera appear to be doing The Right Thing™ in term of caching the various images for the needle position, but I'm not so sure about IE. In both IE 6 and 7 you'll notice in the status bar that it will repeatedly report that it's downloading the same image and the needle blanks-out while loading far too often. You should be able to fix this by using Javascript to pre-fetch all the needle images.

Start Speedo

BTW, sorry about the programmer art :/

If you find this useful, feel free to use the code and images as you like:

• speedo.zip

1. Primarily for accessibility reasons [back]

The Secret of Super Fast Lightboxes »« The Secret of Keeping Web Apps Responsive