Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>


<div id="container" style="max-width: 1000px"></div>
<button id="setdata">Set data</button>

CSS

#container {
  height: 500px;
  min-width: 310px;
  max-width: 800px;
  margin: 0 auto;
}

.loading {
  margin-top: 10em;
  text-align: center;
  color: gray;
}

JavaScript

$.getJSON('https://api.myjson.com/bins/c2vix', function(data1) {

  $.getJSON('https://api.myjson.com/bins/iz2pl', function(data2) {

    Highcharts.mapChart('container', {

      title: {
        text: 'Population without access to electricity (millions)'
      },

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

      colorAxis: {
        type: 'logarithmic'
      },

      series: [{
        data: data2,
        mapData: Highcharts.maps['custom/world'],
        joinBy: ['iso-a2', 'code'],
        name: 'Population without access to electricity',
        borderColor: 'black',
        borderWidth: 0.2,
        states: {
          hover: {
            borderWidth: 1
          }
        },
        tooltip: {
          valueSuffix: ' million'
        }
      }]
    });

$('#setdata').click(function() {
Highcharts.mapChart.series[0].setData(data1);
});

});
});