WOT - Char Chap Freq

Highcharts High Wind Rose

by Nivaldo

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 420px; max-width: 600px; height: 400px; margin: 0 auto"></div>

<div style="display:none">
	<!-- Source: http://or.water.usgs.gov/cgi-bin/grapher/graph_windrose.pl -->
	<table id="freq" border="0" cellspacing="0" cellpadding="0">
		<tr nowrap bgcolor="#CCCCFF">
			<th colspan="9" class="hdr">Table of Frequencies (percent)</th>
		</tr>
		<tr nowrap bgcolor="#CCCCFF">
			<th class="freq">Direction</th>
			<th class="freq">No. of Chapters</th>
			<th class="freq">0.5-2 m/s</th>
			<th class="freq">2-4 m/s</th>
			<th class="freq">4-6 m/s</th>
			<th class="freq">6-8 m/s</th>
			<th class="freq">8-10 m/s</th>
			<th class="freq">&gt; 10 m/s</th>
			<th class="freq">Total</th>
		</tr>
		<tr nowrap>
			<td class="dir">Rand</td>
			<td class="data">6</td>
			<td class="data">1.78</td>
			<td class="data">0.16</td>
			<td class="data">0.00</td>
			<td class="data">0.00</td>
			<td class="data">0.00</td>
			<td class="data">0.00</td>
			<td class="data">3.75</td>
		</tr>		
		<tr nowrap bgcolor="#DDDDDD">
			<td class="dir">Perrin</td>
			<td class="data">5</td>
			<td class="data">1.78</td>
			<td class="data">0.16</td>
			<td class="data">0.00</td>
			<td class="data">0.00</td>
			<td class="data">0.00</td>
			<td class="data">0.00</td>
			<td class="data">3.75</td>
		</tr>
		<tr nowrap>
			<td class="dir">.</td>
			<td class="data"></td>
			<td class="data"></td>
			<td class="data"></td>
			<td class="data"></td>
			<td class="data"></td>
			<td class="data"></td>
			<td class="data"></td>
			<td class="data"></td>
		</tr>
		<tr nowrap bgcolor="#DDDDDD">
			<td class="dir">.</td>
			<td class="data"></td>
			<td class="data"></td>
			<td...

JavaScript

$(function () {
    
    // Parse the data from an inline table using the Highcharts Data plugin
    $('#container').highcharts({
    	data: {
	    	table: 'freq',
	    	startRow: 1,
	    	endRow: 17,
            endColumn: 1 // original 7: no. of categories
	    },
	    
	    chart: {
	        polar: true,
	        type: 'column'
	    },
	    
	    title: {
	        text: 'The Eye of the World'
	    },
	    
	    subtitle: {
	    	text: 'Number of Chapter Apperances'
	    },
	    
	    pane: {
	    	size: '85%'
	    },
	    
	    legend: {
	    	reversed: true,
	    	align: 'right',
	    	verticalAlign: 'top',
	    	y: 100,
	    	layout: 'vertical'
	    },
	    
	    xAxis: {
	    	tickmarkPlacement: 'on'
	    },
	        
	    yAxis: {
	        min: 0,
	        endOnTick: false,
	        showLastLabel: true,
	        title: {
	        	text: 'Frequency (%)'
	        },
	        labels: {
	        	formatter: function () {
	        		return this.value + '%';
	        	}
	        }
	    },
	    
	    tooltip: {
	    	valueSuffix: '%',
	    	followPointer: true
	    },
	        
	    plotOptions: {
	        series: {
	        	stacking: 'normal',
	        	shadow: false,
	        	groupPadding: 0,
	        	pointPlacement: 'on'
	        }
	    }
	});
});