Here we have a Rose chart that has been configured with unrqual segment sizes, a key, sequential colors, tooltips and margins around the segments.
This goes in the documents header:<script src="RGraph.svg.common.core.js"></script> <script src="RGraph.svg.common.key.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: 500px; height: 500px" id="chart-container"></div>This is the code that generates the chart:
<script> rose = new RGraph.SVG.Rose({ id: 'chart-container', data: [8,6,4,3,8,6,3], options: { tooltips: ['Alf','Bertie','Charlie','Doug','Edgar','Frankie','Gary'], colors: ['blue','green','red','#aaa','black','brown','pink'], colorsSequential: true, //backgroundGridRadialsCount: 0, linewidth: 2, margin: '3deg', key: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'], keyOffsety: 455 } }).draw().on('tooltip', function (obj) { var tooltip = RGraph.SVG.REG.get('tooltip'); var colors = rose.properties.colors; tooltip.style.border = '4px solid ' + colors[tooltip.__index__] }); RGraph.SVG.tooltips.style.backgroundColor = 'white'; RGraph.SVG.tooltips.style.color = 'black'; RGraph.SVG.tooltips.style.fontWeight = 'bold'; RGraph.SVG.tooltips.style.boxShadow = 'none'; </script>