Highcharts test tool

by christauff

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="width: 600px; height: 400px; margin: 0 auto"></div>

<div >
    <!-- 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">&lt; 0.5 m/s</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">N</td>
            <td class="data">1.81</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">NNE</td>
            <td class="data">0.62</td>
            <td class="data">1.09</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">0.00</td>
            <td class="data">1.71</td>
        </tr>
        <tr nowrap>
            <td class="dir">NE</td>
            <td class="data">0.82</td>
            <td...

JavaScript

$(function () {
    
    // Parse the data from an inline table using the Highcharts Data plugin
    Highcharts.data({
        table: 'freq',
        startRow: 1,
        endRow: 17,
        endColumn: 7,
        
        complete: function (options) {
            
            // Some further processing of the options
            options.series.reverse(); // to get the stacking right
                
            
            // Create the chart
            window.chart = new Highcharts.Chart(Highcharts.merge(options, {
                
                chart: {
                    renderTo: 'container',
                    polar: true,
                    type: 'column'
                },
                
                title: {
                    text: 'Wind rose for South Shore Met Station, Oregon'
                },
                
                subtitle: {
                    text: 'Source: or.water.usgs.gov'
                },
                
                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: '%'
                },
                    
                plotOptions: {
     ...