score:2

Accepted answer

The problem here mostly comes down to the use of joinBy. Also to correct it there are some required changes to your data and mapData.

Currently your joinBy is an array of strings, like ["al", "ak", ...]. This is quite simply not an accepted format of the joinBy option. You can read up on the details in the API documentation, but the simplest approach is to have a attribute in common in data and mapData and then supply a string in joinBy which then joins those two arrays by that attribute. For example:

series : [{
    data : data,
    mapData: mapData,
    joinBy: "hc-key",
]

Here the "hc-key" attribute must exist in both data and mapData.

Here's how I'd create the data variable in your code:

var data = [];
$.each(keys, function (i, key) {
    if(i != 0)
        data.push({
            "hc-key": "us-"+key,
            code: key.toUpperCase(),
            value: parseFloat(percent[i]),
            name: names[i],
            row: i
        });
});

This skips the first key, which is just "Key" (the title of the column). Here we make the "hc-key" fit the format of the "hc-key" in our map data. An example would be "us-al". The rest is just metadata that will be joined in. Note that you were referencing your data in the options prior to filling it with data, so this has to be moved prior to this.

This is how I'd create the mapData variable in your code:

var mapData = Highcharts.geojson(Highcharts.maps['countries/us/custom/us-small']);

// Process mapdata
$.each(mapData, function () {
    var path = this.path,
        copy = { path: path };

    // This point has a square legend to the right
    if (path[1] === 9727) {

        // Identify the box
        Highcharts.seriesTypes.map.prototype.getBox.call(0, [copy]);

        // Place the center of the data label in the center of the point legend box
        this.middleX = ((path[1] + path[4]) / 2 - copy._minX) / (copy._maxX - copy._minX);
        this.middleY = ((path[2] + path[7]) / 2 - copy._minY) / (copy._maxY - copy._minY);

    }
    // Tag it for joining
    this.ucName = this.name.toUpperCase();
});

The first part is your "standard map data". The rest is to correctly center the labels for the popout states, and gotten directly from the example.

And voila, see this JSFiddle demonstration to witness your map in action.

I suggest doing some console.log-ing to see how data and mapData have the hc-key in common and that leads to the joining of the data in the series.


Related Query

More Query from same tag