Segmented donut chart API reference

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

Example

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

<script>
    segmented = new RGraph.Segmented({
        id: 'cvs',
        min: 0,
        max: 100,
        value: 67,
        options: {
            width: '-20',
            labelsCenterUnitsPost: '%'
        }
    }).roundRobin({frames: 90});
    
    segmented.canvas.onclick = function (e)
    {
        var value = segmented.getValue(e);
        segmented.value = value;
    
        segmented.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
• Margin 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>

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

obj.canvas.onclick = function (e)
{
    var obj   = e.target.__object__;
    var value = obj.getValue(e);
    
    // You can give an angle to the function instead of an event object
    // var value = obj.getValue(angle);
    
    // ...
}

The coordinates properties

There's only the coordinates of the text available to in regards to coordinates that are maintained for you because there are no selectable ares on the Segmented Meter chart

• 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.Segmented({
    id: 'cvs',
    min: 0,
    max: 100,
    valllue: 45,
    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-segmented-grow.html in the download archive)
• The roundRobin effect (effects-segmented-roundRobin.html in the download archive)

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

    segmented = new RGraph.Segmented({
        id: 'cvs',
        min: 0,
        max: 100,
        value: 56,
        options: {
            marginLeft: 35
        }
    }).roundRobin({frames: 60}, myCallback);
    
    setInterval(function ()
    {
        segmented.value = segmented.value + RGraph.random(-10,10);
        segmented.grow();
    }, 2500);
</script>