home

download

svg

canvas

examples

support

blog

donate

• HOME
• DOWNLOAD
• EXAMPLES
• SVG CHARTS
• CANVAS CHARTS
• SUPPORT
• BLOG
• DONATE


• SHARE ON FACEBOOK
• SHARE ON TWITTER

Canvas Rose chart API reference

Summary
Documentation about the Rose chart including information on all the options available to you. The Rose chart may be more familiar to you as a Wind Rose chart. It can be regular, stacked or non-equi-angular in appearance.

• Example
• Properties
• Methods
• Stacked Rose charts
• Non-equi-angular Rose charts
• Animation effects

Example

<script>
    var data = [41,37,32,35,36];
    
    // To show a stacked Rose chart you specify the data like this. non-equi-angular
    // Rose charts are very similar to this but with only two elements to
    // each array - the magnitude of the segment and the (relative) size of the angle.
    // var rose = new RGraph.Rose({id: 'cvs', data: [[4,5], [6,8], [4,3]], ...

    // Create the rose chart.
    var rose = new RGraph.Rose({
        id: 'cvs',
        data: data,
        options: {
            labels: ['MSIE 7 (41%)', 'MSIE 6 (37%)', 'Firefox (16%)', 'Safari (3%)', 'Other (3%)'],
            margin: 3,
            textSize: 16
        }
    }).draw()
</script>

The example pages are here.

Properties

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

• Background
• Chart configuration
• Margins
• Colors
• Shadow
• Labels and text
• Titles
• Axis properties
• Scale
• Key
• Interactive features
• Zoom
• Events
• Miscellaneous

Background

Chart configuration

Margins

Shadow

Labels and text

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

Titles

Axis properties

Scale

Key

Interactive features

Zoom

Events

Miscellaneous

var rose = new RGraph.Rose({
    id: 'cvs',
    data: [8,5,4,8,6,7,2,3,5,8],
    options: {
        // variant: '3d'
    }
}).draw();

var rose = new RGraph.Rose({
    id: 'cvs',
    data: [[2,6],[2,4],[1,5],[4,3],[7,5],[8,3],[4,5],[3,4],[2,6],[4,5]],
    options: {
        variant: 'stacked'
        // variant: 'stacked3d'
    }
}).draw();

var rose = new RGraph.Rose({
    id: 'cvs',
    data: [[45,23],[45,23],[5,26],[78,4],[49,12],[49,21],[40,18],[48,12],[43,23],[45,12]],
    options: {
        variant: 'non-equi-angular'
        //variant: 'non-equi-angular3d'
    }
}).draw();

Methods

obj.getShape(event)

obj.getShape() makes it easy to determine which segment of the Rose chart was clicked on. It provides:

• The start angle (measured in radians)
• The end angle (measured in radians)
• Start radius of the segment
• End radius of the segment
• The origins X coordinate
• The origins Y coordinate
• The numerical index of the segment

The shape also includes textual indexes like this: shape['object'] And they are:

• object
• x
• y
• angle.start
• angle.end
• radius.start
• radius.end
tooltip index

<script>
    RGraph.register(myGraph);
    
    myGraph.canvas.onclick = function (e)
    {
        RGraph.fixEventObject(e);
        RGraph.redraw();

        var ca  = e.target;
        var co  = ca.getContext('2d');
        var obj = ca.__object__;
        var segment = obj.getShape(e);
        
        if (segment) {
            co.fillStyle = 'rgba(255,255,255,0.5)';
            co.beginPath();            
                co.moveTo(segment[0], segment[1]);
                co.arc(segment[0], segment[1], segment[3], segment[4], segment[5], 0);
                co.arc(segment[0], segment[1], segment[2], segment[5], segment[4], true);
            co.stroke();
            co.fill();
            
            e.stopPropagation();
        }
    }
    
    window.onclick = function (e)
    {
        RGraph.redraw();
    }
</script>

This method was formerly a common object method, called RGraph.getSegment(e), but has now (6th March 2011) been moved to be part of the Rose chart object.

This method can be used to get the relevant radius for a given scale value.

This method can be used to set an event listener on an object. It operates in a similar way to the jQuery .on() function - the first argument is the event you wish to attach to and the second is the handler function. For example:

.on('draw', function (obj)
{
    // Put event code here
});

The function is useful if you use method chaining when creating your charts:

var obj = new RGraph.Rose({
    id: 'cvs',
    data: [4,8,6,3,5,8,4,6]
}).on('draw', function (e, shape)
{
    // Put ondraw code here
}).on('click', function (e, shape)
{
    // Handle click event
}).draw();

The exec function is documented here.

Stacked Rose charts

Rose charts can now be stacked, much like stacked Bar charts. For an example see this Rose chart demo page. The data should be supplied in the same format as a stacked Bar chart:

<script>
    rose = new RGraph.Rose({
        id: 'cvs',
        data: [[4,6,2],[8,4,7],[4,3,6],[1,5,6]],
        options: {
        }
    }).draw();
</script>

Non-equi-angular Rose charts

Rose charts can be displayed in a non-equi-angular mode. For an example see this Rose chart demo page. Instead of a plain array of values (as with a regular Rose chart), each data point should itself be a two element array consisting of the magnitude value and also a relative circular size. This second value is not the actual size of the angle - this is calculated. For example:

<script>
    rose = new RGraph.Rose({
        id: 'cvs',
        data: [[47,6],[48,2],[40,4],[43,5],[45,6]],
        options: {
            variant: 'non-equi-angular'
        }
    }).draw();
</script>

Animation effects

• Grow effect
• RoundRobin effect
• Implode effect
• Explode effect

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

    var obj = new RGraph.Rose({
        id: 'cvs',
        data: [8,6,3,5,2,4,8],
        options: {
            gutterLeft: 35
        }
    }).grow({frames: 60}, myCallback)
    // .roundRobin({frames: 60}, myCallback)
    // .implode({frames: 60}, myCallback)
    // .explode({frames: 60}, myCallback)
</script>