Fuel gauge API reference

• Example
• Properties
• Methods
• The coordinates properties
• Events
• Effects

Example

See all of the 1200+ demos in the download archive.

<script>
    // Create the Fuel chart. The arguments are: the minimum value, the maximum value, and the actual value.
    new RGraph.Fuel({
        id: 'cvs',
        min: 0,
        max: 100,
        value: 77,
        options: {
            needleColor: 'blue',
            colors: ['#ddf'],
            labelsEmpty: 'Empty!',
            labelsFull: 'Full',
            icon: '/images/water-droplet.png',
            centery: '-50',
            radius: '-50'
        }
    }).grow();
</script>

Properties

You can use these properties to control how the chart appears. You can set them by including them in the options section of the configuration as shown above.

• Chart configuration properties
• Color properties
• Margin properties
• Needle properties
• Labels and text properties
• Scale properties
• Interactive features properties
• Miscellaneous properties

<div style="margin-left: 50px; display: inline-block">
    <canvas id="cvs" width="650" height="250"></canvas>
</div>

Methods

.on('draw', function (obj)
{
   // Put your code here. Depending on the event, you can sometimes
   // get meta information from the RGraph registry. See the list
   // of event types below for more detail.
});

new RGraph.Fuel({
    id: 'cvs',
    min: 0,
    max: 100,
    value: 67,
    options: {
        events: {
            beforedraw: function () {alert('The beforedraw event fired');},
            draw: [
                function (obj) {alert('The first draw event listener function.');},
                function (obj) {alert('The second draw event listener function.');}
            ]
        }
    }
}).draw();

The coordinates properties

As with the majority of the RGraph objects the coordinates of the various shapes are recorded and stored in various properties on the RGraph chart object. In the case of the Fuel chart the coordinates of text are recorded as usual in the obj.coordsText variable and the start angle, the end angle and the radius are recorded in the obj.angles property.

• obj.angles This is an object the holds the following properties:
  • start The start angle (measured in radians) of the scale.
  • end The end angle (measured in radians) of the scale.
  • needle The angle (measured in radians) that the needle is positioned at.
• obj.coordsText This holds the coordinates of all of the text that has been added to the chart. Even if the text is blank (ie no text) then the coordinates will be added to this variable.

Events

RGraph supports custom events that allow you to easily add interactivity to your charts if required. The following events are available:

new RGraph.Fuel({
    id: 'cvs',
    min: 0,
    max: 50,
    value: 34,
    options: {
        events: {
            draw: function (obj){console.log('The draw event has fired');},
            
            // Alternatively you can give an array of functions to run
            firstdraw: [
                function (obj) {console.log('First function');},
                function (obj) {console.log('Second function');}
            ]
        }
    }
}).draw();

Effects

There's a stopAnimation() function that you can use to stop an animation immediately if you need to. There's a line chart demo called demos/line-effects-stop-animation.html in the download archive that demonstrates the use of this function.

• The grow effect (effects-fuel-grow.html in the download archive

<script>
    //
    // Optional callback function that's called when the effect is complete
    //
    function myCallback (obj)
    {
        // ...
    }

    new RGraph.Fuel({
        id: 'cvs',
        min: 0,
        max: 100,
        value: 56,
        options: {
        }
    }).grow({frames: 60}, myCallback);
</script>