Highcharts Demo

author(s): Torstein Hønsi

by Shenyi Bao

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/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/maps/modules/offline-exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>
<div style="display:block; position:absolute; width:1000px; height:700px">
<div id="container" style="max-width: 1000px"></div>
</div>

CSS

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

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

.menuContainer {
  position: absolute;
  top: 180px;
  left: 180px;
  text-align: right;
  z-index: 100;
  background-color: yellow;
}

#custom-div {
  position: absolute;
  top: 100px;
  left: 100px;
}

JavaScript

var dataToUpdate,
  chart;

$.getJSON('https://cdn.rawgit.com/highcharts/highcharts/680f5d50a47e90f53d814b53f80ce1850b9060c0/samples/data/world-population-density.json', function(data) {

  dataToUpdate = data.map(function(point) {
    var newPoint = Object.assign({}, point); // clone the point
    newPoint.value = Math.random() * 100;
    return newPoint;
  });

  // Prevent logarithmic errors in color calulcation
  $.each(data, function() {
    this.value = (this.value < 1 ? 1 : this.value);
  });

  // Initiate the chart<div class="menuContainer">…</div>
  chart = Highcharts.mapChart('container', {
    chart: {
      map: 'custom/world'
    },

    title: {
      text: 'Zoom in on country by double click'
    },

    mapNavigation: {
      enabled: true,
      enableDoubleClickZoomTo: true
    },

    colorAxis: {
      min: 1,
      max: 1000,
      type: 'logarithmic'
    },

    tooltip: {
      useHTML: true
    },

    series: [{
      data: data,
      joinBy: ['iso-a3', 'code3'],
      name: 'Population density',
      states: {
        hover: {
          color: '#a4edba',
          borderWidth: 2
        }
      },
      borderColor: '#FFFFFF',
      borderWidth: 0.2,
      tooltip: {
        valueSuffix: '/km²'
      }
    }]
  });

  var customDiv = document.createElement('div'),
    textNode = document.createTextNode("HTML text below the tooltip."),
    root = document.getElementsByClassName('highcharts-container')[0],
    title = document.getElementsByClassName('highcharts-title')[0];

  customDiv.setAttribute('id', 'custom-div');
  customDiv.appendChild(textNode);

  //root.insertBefore(customDiv, title);
  root.appendChild(customDiv);



});

setTimeout(function() {
  console.time('test');
  chart.series[0].setData(dataToUpdate, true, true, false);
  for (i = 0; i < self.chart.series[0].data.length; i++) {
  	if(chart.series[0].data[i].name === "China"){
    	chart.series[0].data[i].update({
                            borderColor: "black",
     ...