Please note this is an alpha release. Version 0.3.0 is still under development use with caution! 😉

If you find jGauge useful a link back to the home page jgauge.com or my blog dariancabot.com is appreciated.

See the main project page for more information and downloads.

Getting Started

Include these files in the head of your HTML:

<link rel="stylesheet" href="css/gauge_screen.css" type="text/css" />
<!--[if IE]><script type="text/javascript" language="javascript" src="js/excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jQueryRotate.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jgauge-0.3.0.a3.js"></script>

In the body of your HTML include a placeholder DIV:

<div id="jGaugeDemo" class="jgauge"></div>

Use JavaScript to create new jGauge instance and point it to our placeholder DIV.

Then use the jQuery ready() function to initialise the jGauge:

<script type="text/javascript">
        var myGauge = new jGauge(); // Create a new jGauge.
        myGauge.id = 'jGaugeDemo'; // Link the new jGauge to the placeholder DIV.

        // This function is called by jQuery once the page has finished loading.
        $(document).ready(function(){
                myGauge.init(); // Put the jGauge on the page by initialising it.
        });
</script>

We’re done! Now you can change the gauge value like this (obviously this works well with AJAX):

myGauge.setValue(7.35);

Parameters

This table lists all the available parameters to customise jGauge. When a new jGauge is created, the default values are used unless you override them with your own settings.

Please note: .gaugeId must be set and unique for each jGauge instance!

Functions

This table lists the functions to use jGauge. The most important function is .init() which must be called on each new jGauge. Once this is done .setValue() can be used to change gauge value (this updates the value label and animates the needle).

myGauge.init();

myGauge.setValue(5.2);

var myValue = myGauge.getValue();

// Make a change to the ticks.
myGauge.tickCount = 6;
// Now we must update ticks.
myGauge.updateTicks();

// Make a change to the range.
myGauge.rangeStart = -20;
// Now we must update range.
myGauge.updateRange();