Australia - Highmaps

Highmaps demo

by hakan

HTML

<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://highcharts.github.io/pattern-fill/pattern-fill-v2.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/au/au-all.js"></script>

<div id="container"></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 () {

    // Prepare demo data
    var data = [
        {
            "hc-key": "au-nt",
            "value": 0,
            "color": "url(#highcharts-default-pattern-1)"
        },
        {
            "hc-key": "au-wa",
            "value": 1,
            "color": "url(#highcharts-default-pattern-1)"
        },
        {
            "hc-key": "au-ct",
            "value": 2,
            "color": "url(#highcharts-default-pattern-2)"
        },
        {
            "hc-key": "au-sa",
            "value": 3,
            "color": "url(#highcharts-default-pattern-3)"
        },
        {
            "hc-key": "au-ql",
            "value": 4,
            "color": "url(#highcharts-default-pattern-4)"
        },
        {
            "hc-key": "au-2557",
            "value": 5,
            "color": "url(#highcharts-default-pattern-5)"
        },
        {
            "hc-key": "au-ts",
            "value": 6,
            "color": "url(#highcharts-default-pattern-6)"
        },
        {
            "hc-key": "au-jb",
            "value": 7,
            "color": "url(#highcharts-default-pattern-7)"
        },
        {
            "hc-key": "au-ns",
            "value": 8,
            "color": "url(#highcharts-default-pattern-8)"
        },
        {
            "hc-key": "au-vi",
            "value": 9,
            "color": "url(#highcharts-default-pattern-9)"
        }
    ];

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

        title : {
            text : 'Highmaps with patterns'
        },

        subtitle : {
            text : 'Source map: <a href="http://code.highcharts.com/mapdata/countries/au/au-all.js">Australia</a>'
        },

        mapNavigation: {
            enabled: true,
            buttonOptions: {
                verticalAlign: 'bottom'
            }
        },

        series : [{
            data : data,
            mapData: Highcharts.maps['countries/au/au-all'],
            joinBy: 'hc-key',
            name:...