# An SVG Radar chart with background coloring

This is an example of a Radar chart that is actually made up of two Radar charts. The first is used to create the gray background rings and the second displays the actual 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>
        new RGraph.SVG.Radar({
            id: 'chart-container',
            data: [
                [1,1,1,1,1,1],
                [1,1,1,1,1,1],
                [1,1,1,1,1,1],
                [1,1,1,1,1,1],
                [1,1,1,1,1,1]
            ],
            options: {
                filled: true,
                filledAccumulative: true,
                colors: ['#ddd','transparent','#ddd','transparent','#ddd'],
                tickmarks: null,
                scaleVisible: false,
                backgroundGridColor: '#eee'
            }
        }).draw();

        new RGraph.SVG.Radar({
            id: 'chart-container',
            data: [
                [8,9,7,8,9,8],
                [10,8,9,9,10,9]
            ],
            options: {
                backgroundGrid: false,
                colors: ['red', 'black'],
                tickmarks: null,
                linewidth: 3,
                labels: ['John','Greg','Luis','Pete','Rich','Todd']
            }
        }).draw();
    </script>