An SVG Wind Rose chart

This goes in the documents header:
<script src="RGraph.svg.common.core.js"></script>
<script src="RGraph.svg.rose.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.Rose({
        id: 'chart-container',
        data: [
            [3,1,1,2,1],[2,1,1,1,2],[3,1,1,2,2],[2,1,1,1,1],
            [1,1,1,1,1],[2,1,2,1,2],[3,2,1,1,1],[3,2,2,1,4],
            [3,4,3,1,4],[2,4,4,2,2],[1,2,2,3,3],[2,2,2,2,2],
            [2,3,1,3,4],[1,2,5,3,3],[2,4,3,3,3],[1,2,3,2,1]
        ],
        options: {
            backgroundGridColor: '#ccc',
            colors: ['red', 'yellow', 'cyan','green','#006','blue'],
            colorsOpacity: 0.35,
            scaleMax: 15,
            scaleUnitsPost: 'm/s',
            labels: ['N','NNE','NE','ENE','E','ESE','SE','SSE','S','SSW','SW','WSW','W','WNW','NW','NNW'],
            labelsSize: 10,
            labelsAngleOffset: -1 * (3.1415927 / 16),
            segmentsAngleOffset: -1 * (3.1415927 / 16),
            textColor: '#666'
        }
    }).draw();
</script>