About
RGraph is a JavaScript charts library based on HTML5 SVG and canvas. RGraph is mature (over 15 years old) and has a wealth of features making it an ideal choice to show charts on your website.

More »

 

License
RGraph can be used for free under the GPL or if that doesn't suit your situation there's an inexpensive (£99) commercial license available.

More »

 

Download
Get the latest version of RGraph (version 6.17) from the download page. There's also older versions available, minified files and links to cdnjs.com hosted libraries.

More »

A 3D Rose chart

[No canvas support]

Here's a novel version of the more traditional 2D Rose chart - the 3D Rose chart. It doesn't add any advantages over the 2D version - though it might make your presentations look a little nicer!

There are tooltips, which you can see by clicking on the segments as usual. These tooltips were formerly built dynamically. They still are currently however the method that's used has changed to the new (version 5.22) formatted tooltips.

This means the amount of code has been both reduced and simplified. The tooltips are created by concatenating the name (the %{property:myNames[%{index}]} bit) and the value (the %{value} bit).

In terms of responsive features, on smaller screens, it switches from 3D to 2D and is slightly smaller. The labels are changed from the full names of the weekdays to the shorter three-letter variations.


This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.common.tooltips.js"></script>
<script src="RGraph.rose.js"></script>
Put this where you want the chart to show up:
<div style="float:right">
    <canvas id="cvs" width="600" height="300">[No canvas support]</canvas>
</div>
This is the code that generates the chart - it should be placed AFTER the canvas tag(s):
<script>
    labels_small = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'];
    labels_large = ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'];

    // This is a stacked 3D Rose chart. The data is the same as a regular stacked
    // Rose chart and looks just like the data that you'd pass to a grouped or
    // stacked Bar chart.

    new RGraph.Rose({
        id: 'cvs',
        data: [[4,8,7],[6,5,8],[4,5,3],[4,9,8],[3,8,6],[4,6,3],[1,5,8]],

        options: {
            // A custom property used in the tooltips
            myNames: ['Wilf','Harry','Gerrard'],

            colorsStroke: 'rgba(0,0,0,0)',
            margin: 7,
            variant: '3d',
            variantThreedDepth: 10,
            labelsAxes: 'n',
            colors: ['gradient(#faa:red)','Gradient(#afa:green)','gradient(#aaf:#ddf)'],
            
            // Tooltips, given as a template string
            tooltips: '%{property:myNames[%{index}]} on %{property:labels[%{dataset}]}: <b>%{value}%</b>',
            
            // Some CSS styles that are added to the tooltips
            tooltipsCss: {
                fontSize:'20pt'
            },

            labels: labels_large,
            responsive: [
                {maxWidth: null, width: 600, height: 300,options:{labels:labels_large,variant:'3d'},parentCss: {'float':'right',textAlign: 'center'}},
                {maxWidth: 800, width: 400, height: 350,options:{labels:labels_small,variant:'none'},parentCss: {'float':'none',textAlign: 'center'}}
            ]
        }
    }).grow({frames: 15});
</script>