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.slice(),
        dataSetNo: '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() {
      var chart = Highcharts.charts[0],
        data,
        dataSetNo;

      if (chart.series[0].options.dataSetNo === 'data1') {
        data = data2.slice();
        dataSetNo = 'data2';
      } else {
        data = data1.slice();
        dataSetNo = 'data1';
      }

      chart.series[0].update({
        data: data,
        dataSetNo: dataSetNo
      });
    });
  });
});