Rose chart

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

Example

<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

Chart configuration properties

Background properties

Margin properties

Color properties

Labels and text properties

scaleFormatter: function (obj, num)
{
},

scaleFormatter: function (obj, num)
{
},

Title properties

Key properties

Tooltip properties

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

tooltipsFormattedKeyColorsCss : {
    border: "1 px 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'
}

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

tooltipsFormattedKeyColorsCss : {
    border: "1 px 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'
}

Highlight properties

Other properties

Methods

This can be used to get properties if necessary. It's normally used after the chart is drawn if you need to get parameters (if you're doing custom coding for example).

This can be used to set properties if necessary. It's normally used after the chart is drawn if you need to set additional configuration properties or change them.

This function adds an event listener (such as beforedraw or draw) to the chart object. For example:

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

This function can be used to execute a function (immediately). It's not event-based (ie it doesn't run when something happens) - it just runs immediately - and only once. You might use it when you need to get something from the chart when it's drawn and then call the redraw function. Because this function only runs once the RGraph.SVG.redraw function would not cause a loop - which would happen if you used the draw event.

obj.exec(function (obj)
{
    // Put your code here
});

The responsive function helps your charts respond to different browser window sizes and screen resolutions. For example, for smaller screens, you might want to have angled labels or show shorter versions of them completely.

The responsive function is documented on its own page 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:

• beforedraw This event fires at the start of the draw method before anything has been done.
• draw This event fires at the end of the draw function.
• firstdraw This event fires at the end of the draw function - but only the first time and so it fires only once after the first draw call.
• beforetooltip This event fires at the start of the tooltip showing process.
• tooltip This event fires after a tooltip has been shown.

new RGraph.SVG.Rose({
    id: 'chart-container',
    data: [4,8,6,3,5,8,9],
    options: {
    }
}).on('tooltip', function (obj)
{
    console.log('The draw event has fired');
    
}).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)