Load JSON Data into Highcharts Drilldown map Dynamicly

Question

I use PHP to generate JSON files for my main US map and for the drill down maps. I would like to incorporate both data points into the map using the following example:

Highcharts Map Drilldown

Someone on the Highcharts forum suggested this:

The simple idea is to not use drilldown, but to develop workaround by adding and removing series - those calls can be using ajax calls, so data will be included asynchronously.

I was able to incorporate the main map data using the following code:

main.js Code that gets called on my page

function create_chart() {
        $.getJSON('/includes/data/states.json', function(data) {
                $('#container').highcharts('Map', {
                        series: [{
                            name: 'States',
                            data: data,
                            mapData: Highcharts.maps['countries/us/us-all'],
                            joinBy: ['hc-key', 'code'],
                            type: 'map',
                        }],
                        });
                });
        }
        $(document).ready(create_chart);

Sample of the main map data (states.json)

[
    {
        "drilldown": "ak",
        "code": "us-ak",
        "value": "1"
    },
    {
        "drilldown": "al",
        "code": "us-al",
        "value": "22"
    },
    {
        "drilldown": "ar",
        "code": "us-ar",
        "value": "7"
    },
...
]

I get bugged down on including the data from my second JSON file which holds the drilldown items. Here is the format:

Sample of drilldow data (counties.json)

[
    {
        "code": "us-de-005",
        "name": "Sussex County, DE",
        "value": "2"
    },
    {
        "code": "us-al-03",
        "name": "Baldwin County, AL",
        "value": "1"
    },
    {
        "code": "us-al-39",
        "name": "Covington County, AL",
        "value": "2"
    },
...
]

I assume that I need to adjust the following line in the example that currently set to dummy random data:

Lines 46-51

                    data = Highcharts.geojson(Highcharts.maps[mapKey]);
                    // Set a non-random bogus value
                    $.each(data, function (i) {
                        this.value = i;
                    });

Any ideas on how I can insert my json data instead of bogus data?

Answer 1

So, you have this part of the code:

$.getScript('http://code.highcharts.com/mapdata/' + mapKey + '.js', function () {

                        var mapData = Highcharts.geojson(Highcharts.maps[mapKey]); // namespace

                        // Set a non-random bogus value
                        $.each(data, function (i) {
                            this.value = i;
                        });
                        ...
 });

Which loads map. Now, instead of setting data, make another AJAX call:

$.getScript('http://code.highcharts.com/mapdata/' + mapKey + '.js', function () {

                        data = Highcharts.geojson(Highcharts.maps[mapKey]);

                        // get data:
                        $.getJSON("myURL?mapkey=" + mapKey, function(data_2) { 
                            // assign your data points to the series
                            var data = []; 
                            ...

                            // update chart in the callback:

                            // Hide loading and add series
                            chart.hideLoading();
                            clearTimeout(fail);
                            chart.addSeriesAsDrilldown(e.point, {
                                name: e.point.name,
                                joinBy: ['hc-key', 'code'],
                                type: 'map',
                                data: data,
                                dataLabels: {
                                    enabled: true,
                                    format: '{point.name}'
                                }
                            });
                        });
                        ...
 });