I've been wrestling with this for a day and a half now and I can't seem to quite get it. Been trying to incorporate code from several examples but not getting anywhere with it.
I want to show two pieces of data for each country. This code as it stands with joinby:null only shows two countries - and the UK data shows on the map for Japan. I'm only doing a few countries while testing. Will have at least 40-50 more when live.
If I use joinby:id then I get the map but no data loads.
Am I doing something wrong in the joinby? It feels like it's not reading the keys for some reason.
Thanks for any guidance you can provide.
Code: Select all
jQuery(document).ready(function($) {
//
// Country codes seem to be these ISO a2 not FIPS codes like states
// https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2
var data = [
['ca',21,19],
['cn',115,22],
['us',4015,9],
['uk',15,9],
['de',88,9],
];
// Create the chart
Highcharts.mapChart('world', {
chart: {
map: 'custom/world-highres'
},
title: {
text: '2020 Enrollment'
},
subtitle: {
text: 'by Country'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
type: 'linear',
dataClassColor: 'category',
min: 0,
max: 100,
minColor: '#d9e9f4',
maxColor: '#6093ca'
},
tooltip: {
useHTML: true
},
series: [{
data: data,
mapData: Highcharts.maps['custom/world'],
name: 'countries',
keys: ['id', 'primary', 'secondary'],
// joinBy: ['id'],
joinBy: null,
tooltip: {
headerFormat: '',
pointFormatter: function() {
var hoverVotes = this.hoverVotes; // Used by pie only
return '<b>Enrollment</b><br/>' +
Highcharts.map([
['Primary', this.primary],
['Secondary', this.secondary]
], function(line) {
return '<span style="color:' + line[2] +
// Colorized bullet
'">\u25CF</span> ' +
// Party and votes
(line[0] === hoverVotes ? '<b>' : '') +
line[0] + ': ' +
Highcharts.numberFormat(line[1], 0) +
(line[0] === hoverVotes ? '</b>' : '') +
'<br/>';
}).join('')
}
},
dataLabels: {
enabled: false,
format: '{point.name}'
}
}]
});
});