Rose chart API reference

• Example
• Types of Rose charts
• The angles and angles2 properties
• Properties
• Methods
• Data properties that are used on the segments
• Events
• Effects

Example

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

<script>
    // This is the data for the Rose chart
    data = [
        [8,6,9], [4,8,5], [6,2,11], [8,5,3],
        [2,4,3], [8,6,4], [4,4,9], [4,8,9],
        [7,3,2], [8,4,6], [4,8,6], [7,5,9]
    ];

    rose = new RGraph.SVG.Rose({
        id: 'chart-container',
        data: data,
        options: {
            scaleUnitsPost: 'j',
            backgroundGridColor: '#aaa',
            backgroundGridRadialsCount: 0,
            names: ['Richard','Fred','Gloria'],
            tooltips: '%{property:names[%{index}]}:<br /><span style="font-size: 20pt">%{value_formatted}</span>',
            tooltipsFormattedUnitsPost: 'kg',
            tooltipsCss: {
                backgroundColor: '#333',
                fontWeight: 'bold',
                fontSize: '14pt',
                opacity: 0.85
            },
            marginTop: 70,
            colors: ['#faa', '#afa', '#aaf'],
            colorsOpacity: 0.75,
            colorsStroke: 'rgba(0,0,0,0)',
            labels: ['Jan','Feb', 'Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
            labelsRadialMargin: 20,
            exploded: 5
        }
    }).draw();
</script>

Types of Rose charts

There are four main types of Rose charts available:

• The basic Rose chart:
  The basic Rose chart is simply a set of segments representing values - similar to a Pie chart except that the values are represented using the radius of each segment and the angle of each segment is equal.
  
  
• The stacked Rose chart:
  Similar to the basic Rose chart but with each segment representing a set of values instead of one. Similar in concept to a regular Bar chart vs a stacked Bar chart.
  
  
• The non-equi-angular Rose chart:
  In the above two types of Rose chart the angle used for each segment is constant - what varies is the radius. In a non-equi-angular Rose chart though the angle used by each segment can be different too. Thus enabling you to represent two values per segment instead of just one.
  
  
• The stacked non-equi-angular Rose chart:
  Similar to how the regular Rose chart has a stacked variation the non-equi-angular chart segments can be stacked too.

The angles and angles2 properties

Formerly this array contained details of the segment. However, as of version 5, this has now changed so that the only element is one called element. This is a reference to the SVG path element which has various data attributes set on it which can give you the details of the segment. These data attributes are:

• data-tooltip The tooltip for the element.
• data-index The index of the segment (or the group)
• data-centerx The center x-axis coordinate
• data-centery The center y-axis coordinate
• data-group The group for the segment
• data-subindex The subindex (within any group) of the segment
• data-value The value that the segment represents
• data-start-angle The start-angle of the segment
• data-end-angle The end-angle of the segment
• data-radius The radius of the segment.
• data-radius-inner If this is part of a stack this is the inner radius value
• data-sequential-index The sequential index of the segment

The difference between the angles and angles2 arrays is how they're indexed. So with a stacked chart that has four stacks and 3 segments per stack the obj.coords array would be arranged like this:

• obj.coords[0]
• obj.coords[1]
• obj.coords[2]
• obj.coords[3]
• obj.coords[4]
• obj.coords[5]
• obj.coords[6]
• obj.coords[7]
• obj.coords[8]
• obj.coords[9]
• obj.coords[10]
• obj.coords[11]

The coordinates are appended to the array. The obj.coords2 on the other hand is arranged two dimensionally:

• obj.coords2[0][0]
• obj.coords2[0][1]
• obj.coords2[0][2]
• obj.coords2[0][3]
• obj.coords2[1][0]
• obj.coords2[1][1]
• obj.coords2[1][2]
• obj.coords2[1][3]
• obj.coords2[2][0]
• obj.coords2[2][1]
• obj.coords2[2][2]
• obj.coords2[2][3]

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
• Margin properties
• Color properties
• Labels and text properties
• Title properties
• Key properties
• Tooltip properties
• Highlight properties
• Other properties

scaleFormatter: function (obj, num)
{
},

tooltipsOverride: function (obj, opt)
{
    // Show tooltip
}

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;
}

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

tooltipsCss: {
    fontFamily: 'Verdana',
    fontSize: '20pt'
}

Methods

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

<script>
    new RGraph.SVG.Rose({
        id: 'chart-container',
        data: [4,8,6,6,3,5,5],
        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.exec(function (obj)
{
    // Put your code here
});

Data properties that are used on the segments

The SVG path elements that represent the segments on the Rose chart have various data attributes added to them that hold various bits of information. These are:

• data-group (stacked)
• data-subindex (stacked, non-equi-angular stacked)
• data-index (regular, stacked, non-equi-angular, non-equi-angular stacked)
• data-sequential (regular, non-equi-angular, non-equi-angular stacked)
• data-sequential-index (stacked)
• data-tooltip (regular, stacked, non-equi-angular, non-equi-angular stacked)
• data-value (regular, stacked, non-equi-angular, non-equi-angular stacked)
• data-centerx (regular, stacked, non-equi-angular, non-equi-angular stacked)
• data-centery (regular, stacked, non-equi-angular, non-equi-angular stacked)
• data-start-angle (regular, stacked, non-equi-angular, non-equi-angular stacked)
• data-end-angle (regular, stacked, non-equi-angular, non-equi-angular stacked)
• data-radius (regular, stacked, non-equi-angular, non-equi-angular stacked)
• data-radius-inner (stacked, non-equi-angular stacked)

These can be retrieved by using standard dom methods:

obj.angles[0].element.getAttribute('data-radius');

Events

RGraph supports custom events that allow you to easily add interactivity to your charts if required. The following events are available:

new RGraph.SVG.Rose({
    id: 'chart-container',
    data: [4,8,6,3,5,8,9],
    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

Two effects are available to you. These effects work with all of the modes of operation that the Rose chart has:

• Regular Rose charts
• Regular stacked Rose charts
• Non-equi-angular Rose charts
• Non-equi-angular stacked Rose charts

The demo pages are:

• The grow effect (demo available in the download archive)
• The roundrobin effect (demo available in the download archive)