Chapter 6: Spider chart of web browsers statistic

Change polar presentation into spider chart with adjustment in axes, also includes plotband to demonstrate what it looks like in polar coordinates.

by JoeKuan

HTML

<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts-more.js"></script>
<body>
<div style="margin: 5px 60px 5px 5px; " id='container'></div>
</body>

JavaScript

$(document).ready(function() {
      var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'spline',
                polar: true
            },
            title: {
                text: 'Web browsers statistics'
            },
            credits: {
                enabled: false
            },
            subtitle: {
                text: null
            },
            xAxis: {
                categories: [ 
                              'Jan 2011', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
                ],
                tickmarkPlacement: 'on',
                labels: {
                    rotation: 'auto',
                },
                  lineWidth: 0,
                plotBands: [{
                    from: 10,
                    to: 11,
                    color: '#FF0000',
                }]
            },
            yAxis: {
                title: {
                    text: 'null'
                },
                gridLineInterpolation: 'polygon',
                  lineWidth: 0,
                min: 0,
                gridLineWidth: 2,
                minorTickInterval: 5,
                tickInterval: 10,
                minorGridLineWidth: 0,
                alternateGridColor: '#e6e7ff'
            },
            plotOptions: {
                series: {
                    lineWidth: 2
                }
            },
            series: [{
                name: 'Internet Explorer',
                data: [
                       26.6, 26.5, 25.8, 24.3, 24.9, 23.2, 22.0, 22.4, 22.9, 21.7, 21.2, 20.2,
                      ]
            }, {
                name: 'FireFox',
                data: [
                       42.8, 42.4, 42.2, 42.9, 42.4, 42.2, 42.0, 40.6, 39.7, 38.7, 38.1, 37.7,
                      ]
            }, {
                name: 'Chrome',
                data: [ 
                        23.8, 24.1, 25.0, 25.6, 25.9, 27.9,...