How can I switch between JSON data sets in HighMaps using setData?

Question

I have a Highmap that's populated with data fetched using getJSON. What I want to achieve is have a button (or dropdown) that allows me to switch between two or more data sets.

I've seen this question asked a few times in different ways (such as this one), and reading the answers I think have a general idea of what I need to do, but I remain stuck. FWIW I'm a complete novice just trying to make something work for my colleagues, so my mistake might be fundamental or could just be a matter of syntax.

For now to prove to myself that I can make it work I've tried to implement a button that, once clicked, simply switches to a second data set using setData. While the map is displaying correctly, and I know that both JSON files are being loaded, I can't get the switch to work.

Here is my attempt in full: http://jsfiddle.net/osc9m3e7/4/

And the part that I'm sure is incorrect somehow:

$('#setdata').click(function() {
Highcharts.mapChart.series[0].setData(data1);
});

I'd appreciate any tips to get me on the right track.

Answer 1

You have probably noticed how borders of countries are getting thicker every time you set new data. It happens because the data object is not copied but used directly, so it is modified. To copy specific object you can use for example slice() function. Below you can find an example where switching between sets of data works as it should.

API Reference:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

Example:
http://jsfiddle.net/4ub0z408/

Answer 2

Answered by ewolden in the comments. My issue was that I wasn't naming the chart, and therefore not able to manipulate it using setData. The working example is now here: http://jsfiddle.net/osc9m3e7/7/

var AccessMap = Highcharts.mapChart('container', {
...
$('#setdata').click(function() {
AccessMap.series[0].setData(data2);
});