Rose chart API reference

Documentation about the Rose chart including information about all of the options that are 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. The SVG Rose chart can also show non-equi-angular stacked charts too.

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

Example

<script>
    data = [41,37,32,35,36];

    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>

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
• Background properties
• Axes properties
• Margin properties
• Color properties
• Shadow properties
• Labels and text properties
• Title properties
• Scale properties
• Key properties
• Interactive features properties
• Event properties
• Miscellaneous properties

Chart configuration properties

Background properties

Axes properties

Margin properties

Color properties

Shadow properties

Labels and text properties

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

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

Title properties

Scale properties

Key properties

Interactive features properties

Event properties

Miscellaneous properties

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();

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.set(name, value)
An accessor that you can use to set the values of properties.

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 that 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 examples see the Rose chart example pages in the download archive. The data for a stacked Rose chart should be supplied in the same format as a stacked Bar chart:

<script>
    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 in the download archive: rose-non-equi-angular.html. 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 size of the angle - this is calculated. For example:

<script>
    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

• The Grow effect (effects-rose-grow.html in the download archive)
• The RoundRobin effect (effects-rose-roundrobin.html in the download archive)
• The Implode effect (effects-rose-implode.html in the download archive)
• The Explode effect (effects-rose-explode.html in the download archive)

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

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