BubbleMap with multiple series

by amrutaJgtp

HTML

<script src="http://code.highcharts.com/maps/highmaps.js"></script>
<script src="http://code.highcharts.com/mapdata/custom/world.js"></script>


<div id="container" style="max-width: 1000px"></div>

JavaScript

$(function() {

  // Prepare demo data
  var data = [{
    'hc-key': 'us',
    'z': 10

  }, {
    'hc-key': 'cn',
    'z': 20

  }, {
    'hc-key': 'in',
    'z': 30

  }];

  var data1 = [{
    'hc-key': 'us',
    'z': 5

  }, {
    'hc-key': 'cn',
    'z': 2

  }, {
    'hc-key': 'in',
    'z': 9

  }];


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

    title: {
      text: 'Year'
    },

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

    legend: {
      enabled: false
    },

    series: [{
      mapData: Highcharts.maps['custom/world'],
    }, {
      type: 'mapbubble',
      data: data,
      mapData: Highcharts.maps['custom/world'],
      joinBy: 'hc-key',
      name: 'Random data',
      tooltip: {
        headerFormat: '',
        pointFormat: '{point.name}: <b>{point.z}</b>'
      }
    }, {
      type: 'mapbubble',
      data: data1,
      mapData: Highcharts.maps['custom/world'],
      joinBy: 'hc-key',
      name: 'Sales',

      tooltip: {
        headerFormat: '',
        pointFormat: '{point.name}: <b>{point.z}</b>'
      }
    }]
  });
});