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>