Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.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

var dataUK = [
    ['gb-wi', 5]
];
// Prepare random data
var data = [
    ['gb', 20, 'https://code.highcharts.com/mapdata/countries/gb/gb-all.geo.json', dataUK]
];



function getGeoJSON(url, chart, data) {
    $.getJSON(url, function(geojson) {
        updateChart(geojson, chart, data);
    });
}

function updateChart(geojson, chart, data) {
    if (!chart) {
        createChart(geojson)
    } else {
        chart.series[0].remove();

        chart.addSeries({
            data: data,
            mapData: geojson
        });
    }
}

function createChart(geojson) {
    Highcharts.mapChart('container', {
        mapNavigation: {
            enabled: true,
            buttonOptions: {
                verticalAlign: 'bottom'
            }
        },

        colorAxis: {
            tickPixelInterval: 100
        },

        series: [{
            point: {
                events: {
                    click: function() {
                        getGeoJSON(this.url, this.series.chart, this.newData)
                    }
                }
            },
            keys: ['hc-key', 'value', 'url', 'newData'],
            mapData: geojson,
            data: data,
            states: {
                hover: {
                    color: '#a4edba'
                }
            },
            dataLabels: {
                enabled: true
            }
        }]
    });
}

getGeoJSON('https://code.highcharts.com/mapdata/custom/europe.geo.json');