World - Highmaps

Highmaps demo

by Sajeetharan Sinnathurai

HTML

<script src="http://code.highcharts.com/maps/highmaps.js"></script>
<script src="http://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="http://code.highcharts.com/mapdata/custom/world.js"></script>

<div id="container"></div>
<input type="text" id="stateCode" />

CSS

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

JavaScript

$(function () {
    
    $('#stateCode').on('change', function () {
        data[99].value = Number(this.value);
        chart = Highcharts.charts[0];
        chart.series[0].setData(data, true);
        chart.redraw();
    });

    // Prepare demo data
    var data = [
        {
            "hc-key": "dz",
            "value": 0
        },
        {
            "hc-key": "ao",
            "value": 1
        },
        {
            "hc-key": "eg",
            "value": 2
        },
        {
            "hc-key": "bd",
            "value": 3
        },
        {
            "hc-key": "ne",
            "value": 4
        },
        {
            "hc-key": "qa",
            "value": 5
        },
        {
            "hc-key": "na",
            "value": 6
        },
        {
            "hc-key": "bg",
            "value": 7
        },
        {
            "hc-key": "bo",
            "value": 8
        },
        {
            "hc-key": "gh",
            "value": 9
        },
        {
            "hc-key": "pk",
            "value": 10
        },
        {
            "hc-key": "pa",
            "value": 11
        },
        {
            "hc-key": "jo",
            "value": 12
        },
        {
            "hc-key": "eh",
            "value": 13
        },
        {
            "hc-key": "ly",
            "value": 14
        },
        {
            "hc-key": "my",
            "value": 15
        },
        {
            "hc-key": "pr",
            "value": 16
        },
        {
            "hc-key": "kp",
            "value": 17
        },
        {
            "hc-key": "tz",
            "value": 18
        },
        {
            "hc-key": "pt",
            "value": 19
        },
        {
            "hc-key": "kh",
            "value": 20
        },
        {
            "hc-key": "py",
            "value": 21
        },
        {
            "hc-key": "sa",
            "value": 22
        },
        {
            "hc-key": "me",
           ...