Impressive JavaScript + Canvas Gauge

In general, gauges are built with Flash as they require an animation.

Rather than Flash gauges, this is a pure JavaScript & canvas gauge.

JavaScript Canvas Gauge

How it works?

The code sets a starting and an end value. Using the HTML Canvas element, it draws the needle and simply rotates it according to the current data. For more information about Canvas element, check this WRD post.

As Internet Explorer does not support Canvas element natively, this Canvas gauge uses IECanvas for that.

Working demo can be found here.

Tip:

There is also a dynamic Flash gauge at the same page.

  • Takuan

    Works great in FF, doesn’t work (without errors) in IE7 though. I got three errors while attempting to run in IE7, two about invalid values (appending ‘px’ to a style value that already had that suffix) and another that I cannot remember.

    Still, cool stuff :)

  • http://www.webresourcesdepot.com Umut M.

    I got an error with IE too(invalid argument) but when I skip the error it works.

Search