jQuery Speedometer

This is a jQuery plugin that displays a speedometer-style gauge on your page. The plugin features an animated needle indicator, rendered as a vector in real-time. The challenges of this were twofold:

  1. Render the needle in native JavaScript; no dependence on Flash or Silverlight support
  2. Compatibility with Internet Explorer 7 and 8, which don't support <canvas> elements. (IE9 does)

The former was achieved with simple geometry coded into a canvas element; rendering a straight line and employing ctx.rotate() to achieve the desired angle. The needle animation is a loop of gradual canvas rotations at 50 millisecond intervals. The source code is documented for those desiring further explanation.

The latter was accomplished with excanvas, a library written by Google for IE compatibility (e.g. drawing lines for your driving directions in the Maps web app). Because the plugin supports IE6 and above, jquery.speedometer is suitable for mainstream use. Because the plugin is entirely JavaScript, it even works on iPhone and Android browsers.

Please note that this plugin is not licensed for third-party use.