1 Nov 2010

jGauge a 100% JavaScript dial gauge

jGauge 0.3.0 alpha 3

jGauge is a 100% JavaScript dial gauge I created to be a free, lightweight, and powerful alternative to Flash-based gauges. It can be used on web based dashboards like a speedometer / fuel gauge.

Code base

Google code (archive): https://code.google.com/p/jgauge/

Github (future development): https://github.com/dariancabot/jGauge


jGauge 0.3.0 alpha 3


Version 0.4.0 – 20110511

Version 0.3.0 Alpha 3 – 20110303

Download the full source code here: jgauge-0.3.0-a3-package

View the documentation page

  • Added automatic ‘SI/binary prefix’ option for k, M, G, etc…
  • Added SI/binary prefix support for gauge auto-ranging.
  • Added auto-update off CSS from jGauge size settings.
  • Added label and ticks.label color setting.
  • Fixed findUpperLimit bug (not rounding value up).
  • Fixed tick values and needle position when tick.start isn’t 0 (zero).
  • Fixed needle z-index issue.
  • jGauge internals are more object oriented.
  • All spelling for functions, vars, etc. changed to American-English from Australian-English. This is to follow the general code standards and avoid confusion.

Version 0.3.0 Alpha 2 – 20101101

  • Angles now referenced with 0deg to the right (not to the top). This is the more common standard.
  • Defined ‘jG’ as base state for ‘this’ making code simpler and improving readability.
  • Fixed canvas element sizing. Now done through DOM, not CSS which never worked. This was only noticeable in gauges larger than 300×150 (the canvas element’s default size).
  • All offsets now relative to gauge centre point (not upper left corner). This has made positioning elements more intuitive for a dial/circle gauge.
  • Finished the .updateRange() function.
  • Created the .resetLayers() function to tidy up after gauge changes that would otherwise bring the modified layer to front causing design problems.
  • Consolidated number precision operations into a new .numberPrecision()function to eliminate code doubling-up.
  • The .findUpperLimit() function has been simplified and now allows for a ‘multiple’ to be specified to round up to.
  • Various other code tweaks.


jGauge version 0.4.0 is currently being developed and is a complete overhaul of version 0.3.0. So far there changes made are:

  • jQuery, jQueryRotate, and canvas have been dropped.
  • I’m now using the Raphael JavaScript framework which is much more suitable.
  • There is no longer dependency on the CSS reference making jGauge much more ‘self-contained’.
  • Graphics are vector by default.
  • I’ve shuffled around the internal object relationships to allow for multiple needles and lables.
  • So far all these changes have made jGauge’s total file size 30% smaller!
  • Version 0.4.0 also offers greater compatibility and does this without hacky JavaScript exceptions for IE.

Because of these fundamental changes version 0.3.0 Alpha 3 probably won’t be developed any further to make way for the much better version 0.4.0.

About the Author:

Hardware and software engineer with experience in product development and building automation. Director at Cabot Technologies and Product Manager at NEX Data Management Systems.

1 comment

  1. Sajjad

    My needle are out of graph.pleas look at http://awesomescreenshot.com/0cb67ffr5d and kindly guide me why this is happening.

    and how i can overrite css

Leave a Reply


This site uses Akismet to reduce spam. Learn how your comment data is processed.