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 - so as well as being stacked the angles of the segments are
unequal too. 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
Rose chart.
As well as the data being different from a regular Rose chart the background grid has been tweaked
so that the radial lines that emanate from the center outwards have been turned off with the
backgroundGridRadialsCount
property.
The variant
property is the one that puts the chart into a non-equi-angular
mode:
variant: 'non-equi-angular'
The chart doesn't have to be stacked - you can also create a non-stacked
non-equi-angular
Rose if that suits your data better.
The tooltips
are formatted and also use the tooltipsCss
feature that allows CSS
values to be set as-and-when the tooltips
are shown.
<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="float: right"> <div style="width: 450px; height: 400px" id="chart-container"></div> </div>This is the code that generates the chart - it should be placed AFTER the
div
tag: