RGraph: HTML5 Javascript charts library - Rose charts documentation

The example file is here.

<script>
    window.onload = function ()
    {
        var data = [41,37,16,3,3];
    
        var rose = new RGraph.Rose('myRose', data);
        rose.Set('chart.labels', ['MSIE 7 (41%)',
                                  'MSIE 6 (37%)',
                                  'Firefox (16%)',
                                  'Safari (3%)',
                                  'Other (3%)']);
        rose.Draw();
    }
</script>

• Properties
• Methods
• Stacked Rose charts
• Non-equi-angular Rose charts
• Rose chart specific animations

Properties

You can use these properties to control how the Rose chart appears. You can set them by using the Set() method. Eg:

myRose.Set('name', 'value');

• Margins
• Colors
• Labels and text
• Titles
• Axis properties
• Scale
• Key
• Interactive features
• Zoom
• Miscellaneous

Margins

Colors

Labels and text

Titles

Axis properties

Scale

Key

Interactive features

Zoom

Miscellaneous

A regular Rose chart

myRose = new RGraph.Rose('myCanvas', [8,5,4,8,6,7,2,3,5,8]);

A stacked Rose chart

myRose = new RGraph.Rose('myCanvas', [[2,6],[2,4],[1,5],[4,3],[7,5],[8,3],[4,5],[3,4],[2,6],[4,5]]);

A non-equi-angular Rose chart

myRose = new RGraph.Rose('myCanvas', [[45,23],[45,23],[5,26],[78,4],[49,12],[49,21],[40,18],[48,12],[43,23],[45,12]]);
myRose.Set('chart.variant', 'non-equi-angular');

It is important to note that with a non-equi-angular each "value" is actually an array consisting of two values, as shown. The first value represents the magnitude of the segment (ie how far the segment extends outwards), and the second value represents the size of the segment. The second value is relative to all the other second values - it is not the absolute angle used. The angle is calculated for you.

Methods

• Originating X coordinate
• Originating Y coordinate
• The starting radius of the segment
• The ending radius of the segment
• The starting angle (in degrees)
• The ending angle (in degrees)
• The numerical index of the segment

<script>
    RGraph.Register(myGraph);
    
    myGraph.canvas.onclick = function (e)
    {
        RGraph.FixEventObject(e);
        RGraph.Redraw();

        var canvas  = e.target;
        var context = canvas.getContext('2d');
        var obj     = canvas.__object__;
        var segment = obj.getSegment(e);
        
        if (segment) {
            context.fillStyle = 'rgba(255,255,255,0.5)';
            context.beginPath();
                
                // Angles are provided in degrees, so convert them to radians
                segment[4] /= 57.29;
                segment[5] /= 57.29;
            
                context.moveTo(segment[0], segment[1]);
                context.arc(segment[0], segment[1], segment[3], segment[4], segment[5], 0);
                context.arc(segment[0], segment[1], segment[2], segment[5], segment[4], true);
            context.stroke();
            context.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.

Stacked Rose charts

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

myRose = new RGraph.Rose('myCanvas', [[4,6,2],[8,4,7],[4,3,6],[1,5,6]]);

Non-equi-angular Rose charts

Rose charts can be displayed in a non-equi-angular mode. For an example see the Rose chart example 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 degrees used - these are calculated. For example:

<script>
    myRose = new RGraph.Rose('myCanvas', [[47,6],[48,2],[40,4],[43,5],[45,6]]);
    myRose.Set('chart.variant', 'non-equi-angular');
    myRose.Draw();
</script>

Rose chart specific animations