Animated SVG Rose charts using the roundrobin() effect


A regular Rose chart

A stacked Rose chart

 


A non-equi-angular Rose chart

A stacked non-equi-angular Rose chart

This goes in the documents header:
<script src="RGraph.svg.common.core.js"></script>
<script src="RGraph.svg.common.tooltips.js"></script>
<script src="RGraph.svg.rose.js"></script>
Put this where you want the chart to show up:
<div style="text-align: center; display: inline-block">
    <div style="width: 450px; height: 400px" id="chart-container1"></div><br />
    <b>A regular Rose chart</b>
</div>

<div style="text-align: center; display: inline-block">
    <div style="width: 450px; height: 400px" id="chart-container2"></div><br />
    <b>A stacked Rose chart</b>
</div>

<p>&nbsp;</p>

<div style="text-align: center; display: inline-block">
    <div style="width: 450px; height: 400px" id="chart-container3"></div><br />
    <b>A non-equi-angular Rose chart</b>
</div>

<div style="text-align: center; display: inline-block">
    <div style="width: 450px; height: 400px" id="chart-container4"></div><br />
    <b>A stacked non-equi-angular Rose chart</b>
</div>
This is the code that generates the chart:
<script>
    rose1 = new RGraph.SVG.Rose({
        id: 'chart-container1',
        data: [8,6,4,3,8,6,3],
        options: {
            colors: [ 'rgba(255,0,0,0.5)', 'rgba(0,255,0,0.5)', 'rgba(0,0,255,0.5)' ],
            backgroundGridRadialsCount: 0,
            linewidth: 2,
            amargin: '5deg',
            labels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
            tooltips: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
            linewidth: .5
        }
    }).roundrobin();




    rose2 = new RGraph.SVG.Rose({
        id: 'chart-container2',
        data: [[4,8,3],[4,3,5],[2,6,8],[5,8,3],[7,5,4],[4,6,2],[3,3,7]],
        options: {
            colors: [ 'rgba(255,0,0,0.5)', 'rgba(0,255,0,0.5)', 'rgba(0,0,255,0.5)' ],
            backgroundGridRadialsCount: 0,
            linewidth: 2,
            amargin: '5deg',
            labels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
            tooltips: [
                'Mon morning', 'Mon afternoon', 'Mon evening',
                'Tue morning', 'Tue afternoon', 'Tue evening',
                'Wed morning', 'Wed afternoon', 'Wed evening',
                'Thu morning', 'Thu afternoon', 'Thu evening',
                'Fri morning', 'Fri afternoon', 'Fri evening',
                'Sat morning', 'Sat afternoon', 'Sat evening',
                'Sun morning', 'Sun afternoon', 'Sun evening'
            ],
            linewidth: .5
        }
    }).roundrobin();




    rose3 = new RGraph.SVG.Rose({
        id: 'chart-container3',
        data: [[4,6],[7,5],[8,3],[8,3],[4,8],[7,7],[4,9]],
        options: {
            colors: [ 'rgba(255,0,0,0.5)', 'rgba(0,255,0,0.5)', 'rgba(0,0,255,0.5)' ],
            backgroundGridRadialsCount: 0,
            linewidth: 2,
            amargin: '5deg',
            labels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
            tooltips: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
            linewidth: .5,
            variant: 'non-equi-angular'
        }
    }).roundrobin();





    rose4 = new RGraph.SVG.Rose({
        id: 'chart-container4',
        data: [ [[4,8,6],4], [[8,6,6],8], [[3,5,6],2], [[8,9,4],6], [[6,3,5],8], [[4,8,5],4], [[8,4,4],4] ],
        options: {
            colors: [ 'rgba(255,0,0,0.5)', 'rgba(0,255,0,0.5)', 'rgba(0,0,255,0.5)' ],
            backgroundGridRadialsCount: 0,
            linewidth: 2,
            amargin: '5deg',
            labels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
            tooltips: [
                'Mon morning', 'Mon afternoon', 'Mon evening',
                'Tue morning', 'Tue afternoon', 'Tue evening',
                'Wed morning', 'Wed afternoon', 'Wed evening',
                'Thu morning', 'Thu afternoon', 'Thu evening',
                'Fri morning', 'Fri afternoon', 'Fri evening',
                'Sat morning', 'Sat afternoon', 'Sat evening',
                'Sun morning', 'Sun afternoon', 'Sun evening'
            ],
            linewidth: .5,
            variant: 'non-equi-angular'
        }
    }).roundrobin();
</script>