Highcharts Demo

author(s): Torstein Hønsi

by wergeld

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/mapdata/custom/world.js"></script>


<div id="container"></div>

<button id="getselectedpoints">Get selected points</button>

CSS

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

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

JavaScript

Highcharts.Chart.prototype.unselectAll = function() {
  for (var i = 0; i < this.series[0].data.length; i++) {
    this.series[0].points[i].select(false);
  }
};

$.getJSON('https://cdn.jsdelivr.net/gh/highcharts/highcharts@v7.0.0/samples/data/world-population-density.json', function(data) {

  // Initiate the chart
  var chart = Highcharts.mapChart('container', {
    chart: {
      events: {
        selection: function(event) {
          for (var i = 0; i < this.series[0].data.length; i++) {
            var point = this.series[0].data[i];
            if (point.x > event.xAxis[0].min &&
              point.x < event.xAxis[0].max &&
              point.y > event.yAxis[0].min &&
              point.y < event.yAxis[0].max) {
              console.log(point);
              point.select(true, true);
            }
          }
          return false;
        }
      },
      zoomType: 'xy'
    },
    title: {
      text: 'Allow point select'
    },

    legend: {
      title: {
        text: 'Population density per km²'
      }
    },

    plotOptions: {
      series: {
        point: {
          events: {
            select: function() {
              var text = 'Selected ' + this.name + ' (' + this.value + '/km²)',
                chart = this.series.chart;
              if (!chart.selectedLabel) {
                chart.selectedLabel = chart.renderer.label(text, 0, 320)
                  .add();
              } else {
                chart.selectedLabel.attr({
                  text: text
                });
              }
            },
            unselect: function() {
              var text = 'Unselected ' + this.name + ' (' + this.value + '/km²)',
                chart = this.series.chart;
              if (!chart.unselectedLabel) {
                chart.unselectedLabel = chart.renderer.label(text, 0, 300)
                  .add();
              } else {
                chart.unselectedLabel.attr({
                  text: text
                });
             ...