This is a mode of operation that the SVG Rose chart has but the canvas Rose chart does not. It's a stacked non-equi-angular variation. It's appropriate for when you have data that has an extra dimension and which goes beyond just a straight-forward stacked or non-equi-angular 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="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: { backgroundGridRadialsCount: 0, colorsOpacity: 0.8, colors: ['red', 'blue','#f6f'], colorsStroke: 'rgba(0,0,0,0)', linewidth: 1, variant: 'non-equi-angular', amargin: 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();