Activity meter API reference

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

Example

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

<script>
    activity = new RGraph.Activity({
        id: 'cvs',
        min: 0,
        max: 100,
        value: [12,38,65],
        options: {
            width: 30,
            labelsCenter: true,
            marginLeft: 5,
            marginRight: 5,
            marginTop: 5,
            marginBottom: 5
        }
    }).grow();
    

    setInterval(function ()
    {
        for (var i=0,rand=[]; i<3; ++i) {
            rand[i] = RGraph.random(-10,10);
            activity.value[i] += rand[i];
        }
    
        activity.grow();
    },2500);
</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
• Margin properties
• Background properties
• Color properties
• Labels and text properties
• Interactive features properties
• Miscellaneous properties

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

tooltipsFormattedKeyColorsCss : {
    border: "1px solid #ddd";
}

tooltipsFormattedListItems: [
    ['Bill','Jerry','Berty'],// First tooltip
    ['Gill','Carrie','Lucy'],// Second tooltip
    ['Pob','Nobby','Hilda']  // Third tooltip
]

.RGraph_tooltip ul#rgraph_formatted_tooltips_list li {
    text-align: left;
    color: yellow;
}

tooltipsPointerCss: {
    borderLeft: 'gray 2px solid',
    borderBottom: 'gray 2px solid'
}

tooltipsCss: {
    fontFamily: 'Verdana',
    fontSize: '20pt',
    backgroundColor: 'black',
    color: 'white'
}

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.Activity({
    id: 'cvs',
    min: 0,
    max: 100,
    value: 38,
    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();

<script>
    obj.canvas.onclick = function (e)
    {
        RGraph.redraw();
    
        var canvas  = e.target,
            obj     = canvas.__object__,
            shape   = obj.getShape(e);

        if (shape) {
            var x           = shape.x,
                y           = shape.y,
                start       = shape.angleStart,
                end         = shape.angleEnd,
                radiusInner = shape.radiusInner,
                radiusInner = shape.radiusOuter;
            
            obj.path(
                'b    a % % % % % false    a % % % % % true    s black f red',
                x, y, radiusInner, start, end,
                x, y, radiusOuter, end, start
            );
        }
    }
</script>

obj.canvas.onclick = function (e)
{
    var obj   = e.target.__object__;
    var value = obj.getValue(e);
    
    // ...
}

The coordinates properties

As with the majority of the RGraph objects the coordinates of the shapes are recorded and stored in various properties on the RGraph chart object. The Activity meter is no different and has these properties available to you:

• obj.coords A straight-forward single dimension array of objects - one for each ring on the chart - which each contain the following properties:
  • x
  • y
  • angleStart (measured in radians)
  • angleEnd (measured in radians)
  • radiusInner
  • radiusOuter
  • color
  
  
• 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.Activity({
    id: 'cvs',
    min: 0,
    max: 100,
    value:[26,35,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-activity-grow.html in the download archive)

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

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