An SVG Rose chart with tooltips

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>

« Back