An unfilled SVG Radar chart

This goes in the documents header:

<script src="RGraph.svg.common.core.js"></script>
<script src="RGraph.svg.radar.js"></script>

Put this where you want the chart to show up:

<div style="width: 600px; height: 500px" id="chart-container"></div>

This is the code that generates the chart:

<script>
    data = [
        [8,7,9,9,8,8,8],
        [4,8,5,6,3,5,6]
    ];
    
    // Make the tooltips
    tooltips = [];
    seq      = 0;
    data.forEach(function (v,k,arr)
    {
        data[k].forEach(function (v2,k2,arr2)
        {
            tooltips[seq++] = v2 + '%';
        });
    });

    new RGraph.SVG.Radar({
        id: 'chart-container',
        data: data,
        options: {
            backgroundGridColor: 'gray',
            backgroundGridConcentricsCount: 0,
            colors: ['red','black'],
            highlightLinewidth: 2,
            linewidth: 3,
            labels: ['Bob','Reg','Dug','Lou','Joe','Kev','Jon'],
            tooltips: tooltips,
            tickmarks: 'filledrect',
            tickmarksSize: 10
        }
    }).draw();
</script>

« Back