How to add data to a custom HighChart's HighMaps map? joinBy? - highcharts

Question

I created a custom map using Inkscape as described on the HighMaps docs pages at: http://www.highcharts.com/docs/maps/custom-maps
Everything up to step 16 seems to go smoothly.
Step 16 says that the only remaining thing to do is to add data or use the MapData option and this is where I am struggling.
How does one link the custom shapes in the map to data points? Using the shape name in a JoinBy?
http://jsfiddle.net/GeertClaes/aWJ2D/
$(function () {
// Initiate the chart
$('#container').highcharts('Map', {
title:{text:''},
subTitle:{text:''},
credits:{enabled:false},
legend:{enabled: false},
series:
[
{
"type": "map",
"data": [
{
"name": "Status1-CurrentPeriod",
"path": "M0,-695,0,-682C1,-682,2,-683,3,-683,15,-683,25,-672,25,-658,25,-645,15,-634,3,-634,2,-634,1,-634,1,-634L1,-622,108,-622,107,-694,0,-695z"
},
{
"name": "Status1-Period-1",
"path": "M0,-684,1,-633C15,-635,26,-646,26,-658,26,-672,14,-682,0,-684z"
},
{
"name": "Status2-CurrentPeriod",
"path": "M178,-695,178,-682C179,-682,180,-683,181,-683,193,-683,203,-672,203,-658,203,-645,193,-634,181,-634,180,-634,180,-634,179,-634L179,-622,286,-622,285,-694,178,-695z"
},
{
"name": "Status2-Period-1",
"path": "M178,-684,179,-633C193,-635,204,-646,204,-658,204,-672,193,-682,178,-684z"
},
{
"name": "Status3-CurrentPeriod",
"path": "M357,-695,357,-682C358,-682,359,-683,360,-683,372,-683,382,-672,382,-658,382,-645,372,-634,360,-634,359,-634,359,-634,358,-634L358,-622,465,-622,464,-694,357,-695z"
},
{
"name": "Status3-Period-1",
"path": "M357,-684,358,-633C372,-635,383,-646,383,-658,383,-672,372,-682,357,-684z"
},
{
"name": "Status4-CurrentPeriod",
"path": "M535,-695,535,-682C536,-682,537,-683,538,-683,550,-683,560,-672,560,-658,560,-645,550,-634,538,-634,537,-634,536,-634,536,-634L536,-622,643,-622,642,-694,535,-695z"
},
{
"name": "Status4-Period-1",
"path": "M535,-684,536,-633C550,-635,561,-646,561,-658,561,-672,549,-682,535,-684z"
},
{
"name": "Status5-CurrentPeriod",
"path": "M713,-695,713,-682C714,-682,715,-683,716,-683,728,-683,738,-672,738,-658,738,-645,728,-634,716,-634,715,-634,715,-634,714,-634L714,-622,821,-622,820,-694,713,-695z"
},
{
"name": "Status5-Period-1",
"path": "M713,-684,714,-633C728,-635,739,-646,739,-658,739,-672,728,-682,713,-684z"
},
{
"name": "Status6-CurrentPeriod",
"path": "M892,-695,892,-682C893,-682,894,-683,895,-683,907,-683,917,-672,917,-658,917,-645,907,-634,895,-634,894,-634,893,-634,893,-634L893,-622,1000,-622,999,-694,892,-695z"
},
{
"name": "Status6-Period-1",
"path": "M892,-684,893,-633C907,-635,918,-646,918,-658,918,-672,907,-682,892,-684z"
}
]
}
]
});
});

Answer 1

There's a couple of ways:
1.) The easiest is to add it into your data using the value property. This is discouraged because it hardcodes the value for the map paths:
"data": [
{
"name": "Status1-CurrentPeriod",
"path": "M0,-695,0,-682C1,-682,2,-683,3,-683,15,-683,25,-672,25,-658,25,-645,15,-634,3,-634,2,-634,1,-634,1,-634L1,-622,108,-622,107,-694,0,-695z",
"value": 6 // <-- here's a numerical value for this path
}
2.) Seperate your mapData from your data. Map the values in mapData to the values in data with a joinBy. This makes your map paths reusable:
series: [{
"type": "map",
"joinBy": ['name', 'name'], // <- mapping 'name' in data to 'name' in mapData
"data": [
{
"name": "Status1-CurrentPeriod",
"value": 6
}
],
"mapData": [
{
"name": "Status1-CurrentPeriod",
"path": "M0,-695,0,-682C1,-682,2,-683,3,-683,15,-683,25,-672,25,-658,25,-645,15,-634,3,-634,2,-634,1,-634,1,-634L1,-622,108,-622,107,-694,0,-695z"
}
...
}]
Update fiddle here.