# An SVG 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: 650px; height: 500px" id="chart-container"></div>

This is the code that generates the chart:

    <script>
        rose = new RGraph.SVG.Rose({
            id: 'chart-container',
            data: [[56,5],[48,3],[81,2],[68,9],[45,9],[45,1],[12,3],[43,8],[65,2],[42,3]],
            options: {
                strokestyle: 'white',
                linewidth: 3,
                variant: 'non-equi-angular',
                colorsSequential: true,
                colorsOpacity: 0.6,
                tooltips: ['Alf','Bert','Craig','Doug','Edgar','Fred','Gary','Harry','Indigo','Jack'],
                labels: ['Alf','Bert','Craig','Doug','Edgar','Fred','Gary','Harry','Indigo','Jack']
            }
        }).draw();

« Back