Highcharts Demo

author(s): Torstein Hønsi

by Sundarapandiyan_pa

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<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>
<script src="https://code.highcharts.com/mapdata/countries/us/us-all.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

$(function() {
  var tmp_point_data;
  $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=world-population-density.json&callback=?', function(data) {

    // Initiate the chart
    $('#container').highcharts('Map', {

      title: {
        text: 'Allow point select'
      },

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

      plotOptions: {
        series: {
          point: {
            events: {
              mouseOver: function(e) {

                tmp_point_data = this;
                console.log("Point mouseover:");
                console.log(tmp_point_data);
              },
              select: function(e) {

                console.log("Point select:");
                console.log(this);
                this.zoomTo(); // error: zoomTo is not a function
                // this.point.zoomTo(); // same error below
              }
            }
          },
        }
      },

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

      series: [{
        data: data,
        mapData: Highcharts.maps['countries/us/us-all'],
        joinBy: ['iso-a2', 'code'],
        name: 'Population density',
        allowPointSelect: true,
        cursor: 'pointer',
        states: {
          hover: {
            color: '#BADA55'
          },
          select: {
            color: '#EFFFEF',
            borderColor: 'black',
            dashStyle: 'dot'
          }
        },
        tooltip: {
          valueSuffix: '/km²'
        }
      }]
    });

    $('#getselectedpoints').click(function() {
      var chart = $('#container').highcharts(),
        selectedPoints = chart.getSelectedPoints();
      alert('You selected ' + selectedPoints.length + ' points');
    });
  });
});