An SVG stacked Rose chart with unequal segment sizes

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="width: 600px; height: 500px" id="chart-container"></div>

This is the code that generates the chart:

<script>
    new RGraph.SVG.Rose({
        id: 'chart-container',
        data: [ [[4,8,2],14], [[3,6,8],19], [[1,6,9],6], [[4,5,3],7], [[2,1,7],9], [[7,2,5],6], [[8,4,3],23], [[4,7,9],7], [[3,2,3],9], [[5,7,3],4] ],
        options: {
            colorsOpacity: 0.4,
            colors: ['red', 'blue','#f6f'],
            strokestyle: 'rgba(0,0,0,0)',
            linewidth: 1,
            variant: 'non-equi-angular',
            margin: 0.05,
            labels: ['Alf','Bert','Craig','Doug','Edgar','Fred','Gary','Harry','Indigo','Jay'],
            tooltips: [
                'a','b','c','d','e','f','g','h','i','j',
                'k','l','m','n','o','p','q','r','s','t',
                'u','v','w','x','y','z','aa','bb','cc','dd'
            ]
        }
    }).draw();

« Back