javascripthighchartshighmaps

Highcharts Highmap world - color all countries within a continent

I cannot get the world map to work by coloring in country iso codes supplied by a back end app.

I have a fiddle here.

My code is:

var chartData = [{
  "name": "Africa",
  "data": ["DZ", "AO", "BJ", "BW", "BF", "BI", "CM", "CV", "CF", "TD", "CD", "CG", "KM", "DJ", "EG", "GQ", "ER", "ET", "GM", "GA", "GH", "GN", "GW", "CI", "KE", "XK", "LS", "LR", "LY", "MG", "MW", "ML", "MR", "MU", "YT", "MA", "MZ", "NA", "NE", "NG", "RW", "ST", "SN", "SC", "SL", "SO", "ZA", "SS", "SD", "SZ", "TZ", "TG", "TN", "UG", "EH", "ZM", "ZW"]
}, {
  "name": "Asia",
  "data": ["AF", "BH", "BD", "BT", "BN", "KH", "CN", "HK", "IN", "ID", "IR", "IQ", "IL", "JP", "JO", "KZ", "KW", "KG", "LA", "LB", "MO", "MY", "MV", "MN", "MM", "NP", "KP", "OM", "PK", "PH", "WA", "SA", "SG", "KR", "LK", "SY", "TW", "TJ", "TH", "TR", "TM", "AE", "UZ", "VN", "PS", "YE"]
}, {
  "name": "Europe",
  "data": ["AL", "AD", "AM", "AT", "AZ", "BY", "BE", "BA", "BG", "HR", "CY", "CZ", "DK", "EE", "FO", "FI", "FR", "GE", "DE", "GR", "HU", "IS", "IE", "IM", "IT", "LV", "LI", "LT", "LU", "MK", "MT", "MD", "MC", "ME", "NL", "NO", "PL", "PT", "RO", "RU", "SM", "RS", "SK", "SI", "ES", "SE", "CH", "UA", "GB", "VA"]
}, {
  "name": "North America",
  "data": ["AI", "AR", "AW", "BS", "BB", "BZ", "BM", "BO", "BR", "CA", "KY", "CL", "CO", "CR", "CU", "CW", "DM", "DO", "EC", "SV", "PF", "GL", "GD", "GT", "GY", "HT", "HN"]
}, {
  "name": "South America",
  "data": ["JM", "MX", "FM", "NI", "PA", "PY", "PE", "PR", "KN", "LC", "VC", "MF", "SR", "TT", "TC", "US", "UY", "VE", "VI", "VG"]
}, {
  "name": "Oceania",
  "data": ["AS", "AU", "FJ", "GU", "KI", "MH", "NC", "NZ", "MP", "PW", "PG", "WS", "SB", "TP", "TO", "TV", "VU"]
}];

// Instantiate the map
Highcharts.mapChart('container', {

  credits: {
    enabled: false
  },

  chart: {
    map: 'custom/world-highres',
    spacingTop: 20,
    spacingBottom: 20,
    backgroundColor: '#DEEFF5'
  },

  title: {
    text: 'Continents'
  },

  legend: {
    enabled: true
  },

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

  plotOptions: {
    map: {
      // joinBy: 'hc-key',
      dataLabels: {
        enabled: true,
        color: '#FFFFFF',
        style: {
          fontWeight: 'bold'
        },
        states: {
          hover: {
            color: Highcharts.getOptions().colors[2]
          }
        },
      },
      tooltip: {
        headerFormat: '',
        pointFormat: '{point.name}: <b>{series.name}</b>'
      }
    }
  },

  series: chartData

});

What have I missed? Thanks!

Solution

  • I modified the things below in order to get working your code:

    var data = []; for (var k in chartData) { data.push({ name: chartData[k].name, data: chartData[k].data.map(function (code) { return { code: code }; }) }); }

    Here is the jsfiddle updated: http://jsfiddle.net/beaver71/nccwpmen/

    var chartData = [{
  "name": "Africa",
  "data": ["DZ", "AO", "BJ", "BW", "BF", "BI", "CM", "CV", "CF", "TD", "CD", "CG", "KM", "DJ", "EG", "GQ", "ER", "ET", "GM", "GA", "GH", "GN", "GW", "CI", "KE", "XK", "LS", "LR", "LY", "MG", "MW", "ML", "MR", "MU", "YT", "MA", "MZ", "NA", "NE", "NG", "RW", "ST", "SN", "SC", "SL", "SO", "ZA", "SS", "SD", "SZ", "TZ", "TG", "TN", "UG", "EH", "ZM", "ZW"]
}, {
  "name": "Asia",
  "data": ["AF", "BH", "BD", "BT", "BN", "KH", "CN", "HK", "IN", "ID", "IR", "IQ", "IL", "JP", "JO", "KZ", "KW", "KG", "LA", "LB", "MO", "MY", "MV", "MN", "MM", "NP", "KP", "OM", "PK", "PH", "WA", "SA", "SG", "KR", "LK", "SY", "TW", "TJ", "TH", "TR", "TM", "AE", "UZ", "VN", "PS", "YE"]
}, {
  "name": "Europe",
  "data": ["AL", "AD", "AM", "AT", "AZ", "BY", "BE", "BA", "BG", "HR", "CY", "CZ", "DK", "EE", "FO", "FI", "FR", "GE", "DE", "GR", "HU", "IS", "IE", "IM", "IT", "LV", "LI", "LT", "LU", "MK", "MT", "MD", "MC", "ME", "NL", "NO", "PL", "PT", "RO", "RU", "SM", "RS", "SK", "SI", "ES", "SE", "CH", "UA", "GB", "VA"]
}, {
  "name": "North America",
  "data": ["AI", "AR", "AW", "BS", "BB", "BZ", "BM", "BO", "BR", "CA", "KY", "CL", "CO", "CR", "CU", "CW", "DM", "DO", "EC", "SV", "PF", "GL", "GD", "GT", "GY", "HT", "HN"]
}, {
  "name": "South America",
  "data": ["JM", "MX", "FM", "NI", "PA", "PY", "PE", "PR", "KN", "LC", "VC", "MF", "SR", "TT", "TC", "US", "UY", "VE", "VI", "VG"]
}, {
  "name": "Oceania",
  "data": ["AS", "AU", "FJ", "GU", "KI", "MH", "NC", "NZ", "MP", "PW", "PG", "WS", "SB", "TP", "TO", "TV", "VU"]
}];
var data = [];
for (var k in chartData) {
	data.push({
  	name: chartData[k].name,
  	data: chartData[k].data.map(function (code) {
            return { code: code };
        })
  });
}
console.log(data);

// Instantiate the map
var chart = Highcharts.mapChart('container', {

  credits: {
    enabled: false
  },

  chart: {
    map: 'custom/world',
    spacingTop: 20,
    spacingBottom: 20,
    backgroundColor: '#DEEFF5'
  },

  title: {
    text: 'Continents'
  },

  legend: {
    enabled: true
  },

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

  plotOptions: {
    map: {
    	allAreas: false,
      joinBy: ['iso-a2', 'code'],
      dataLabels: {
        enabled: true,
        color: '#FFFFFF',
        style: {
          fontWeight: 'bold'
        },
        states: {
          hover: {
            color: Highcharts.getOptions().colors[2]
          }
        },
      },
      tooltip: {
        headerFormat: '',
        pointFormat: '{point.name}: <b>{series.name}</b>'
      }
    }
  },

  series: data

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

.loading {
  margin-top: 10em;
  text-align: center;
  color: gray;
}
    <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/mapdata/custom/world.js"></script>
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">


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