Highcharts Demo

author(s): Torstein Hønsi

by oysteinmoseng

HTML

<script src="http://code.highcharts.com/maps/highmaps.js"></script>
<script src="http://code.highcharts.com/maps/modules/data.js"></script>
<script src="http://code.highcharts.com/maps/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 600px"></div>

CSS

#container {
    height: 500px;
    min-width: 310px;
    max-width: 800px;
    margin: 0 auto;
}
.loading {
    margin-top: 10em;
    text-align: center;
    color: gray;
}

JavaScript

$(function () {

    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=australia.geo.json&callback=?', function (geojson) {

        // Prepare the geojson
        var states = Highcharts.geojson(geojson, 'map'),
            rivers = Highcharts.geojson(geojson, 'mapline'),
            riverData;

        // Create data for rivers
        riverData = [];
        $.each(rivers, function (i) {
            riverData.push({
                code: this.properties.NAME,
                value: i
            });
        });

        // Initiate the chart
        $('#container').highcharts('Map', {

            title: {
                text: 'Coloraxis for mapline'
            },

            colorAxis: {
                min: 0,                
                minColor: '#990040',
                maxColor: '#009940'
            },

            series: [           
            {
                name: 'States and territories',
                colorAxis: null,
                mapData: states,
                showInLegend: false
            }, {
                name: 'Rivers',
                type: 'mapline',
                data: riverData,
                mapData: rivers,
                joinBy: ['NAME', 'code']
            }]
        });
    });
});