An SVG stacked Rose chart with tooltips

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: 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: [
            [4,8,6,5],
            [4,5,1,2],
            [2,5,9,1],
            [6,5,8,8],
            [1,3,5,9],
            [4,6,8,5],
            [4,5,6,3]
        ],
        options: {
            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'
            ],
            colors: ['blue','green','red','#aaa'],
            linewidth: 3
        }
    }).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>

« Back