[Solved]-Optimize JavaScript DrillDown code-Highcharts

If you want to load on click, you need to call the state data on click_event (and not at startup).

Just like your JSFiddle example:

chart : {
        events: {
            drilldown: function (e) {
// Load you data
// show it with  chart.addSeriesAsDrilldown(e.point, {...});
            }
        }
}

Or as @Whymarrh suggests, you can load them all in parallel (instead of one after the other) and once they are all retrieved, compute your map.

See https://lostechies.com/joshuaflanagan/2011/10/20/coordinating-multiple-ajax-requests-with-jquery-when/ for example on how to execute a code after all ajax calls have completed.

When you load your map data as you did, in the following manner:

$.when(
    $.getJSON('json/generate_json_main_map.php'),
    $.getJSON('json/generate_json_region_1.php'),
    $.getJSON('json/generate_json_region_2.php')
).done(...);

The effect is this - when any of the three requests fail, all promises will be rejected and ultimately, your map never gets to be initialised.

A better approach could be to request all data independently, and the outcomes would be handled as follows:

• If the request for the main data fails, abort the other requests unconditionally (there would be no need for a drill down if the primary data is non-existent).
• If request for main data succeeds, you may go on and initialise the map as data becomes available. The request for drill down data may or may not succeed though (but half bread is better than none?). Assuming everything goes well, then in the event that user initiates a drill down action, you show a loading message and ultimately add the drill down series when it becomes available.

Here's an implementation of the method I offered:

$(function () {        
    // immediately trigger requests for data
    var loadMainData = $.getJSON("json/generate_json_main_map.php");
    var loadRegionData = {
        "region-1-name": $.getJSON("json/generate_json_region_1.php"),
        "region-2-name": $.getJSON("json/generate_json_region_2.php")
    };

    // region drilldown options
    var regionalSeriesOptions = {
        "region-1-name": {
            id: 'a',
            name: 'First',
            joinBy: ['hc-key', 'code'],
            type: 'map',
            point: {
                events: {
                    click: function () {
                        var key = this.key;
                        location.href = key;
                    }
                }
            }
        },
        "region-2-name": {
            id: 'b',
            name: 'Second',
            joinBy: ['hc-key', 'code'],
            type: 'map',
            point: {
                events: {
                    click: function () {
                        var key = this.key;
                        location.href = key;
                    }
                }
            }
        },
        // ...
        "region-(n-1)-name": {
            // series options for region 'n-1'
        },
        "region-n-name": {
            // series options for region 'n'
        },
        "region-(n+1)-name": {
            // series options for region 'n+1'
        }
    };

    // main options
    var options = {
        title: {
            text: ""
        },
        series: [{
                type: "map",
                name: st_ponudb,
                animation: {
                    duration: 1000
                },
                states: {
                    hover: {
                        color: "#dd4814"
                    }
                }
            }],
        events: {
            drilldown: function (e) {
                var regionName, request, series, chart;

                if (e.seriesOptions) {
                    // drilldown data is already loaded for the currently
                    // selected region, so simply return
                    return;
                }

                regionName = e.point.name;
                request = loadRegionData[regionName];
                series = regionalSeriesOptions[regionName];
                chart = this;

                chart.showLoading("Loading data, please wait...");

                request.done(function (data) {
                    // series data has been loaded successfully
                    series.data = data;
                    chart.addSeriesAsDrilldown(e.point, series);
                });

                request.fail(function () {
                    if (loadMainData.readyState !== 4) {
                        // do you really want to cancel main request
                        // due to lack of drilldown data?
                        // Maybe half bread is better than none??
                        loadMainData.abort();
                    }
                });

                // whether success or fail, hide the loading UX notification
                request.always(chart.hideLoading);
            }
        },
        colorAxis: {
            min: 1,
            max: 10,
            minColor: '#8cbdee',
            maxColor: '#1162B3',
            type: 'logarithmic'
        },
        drilldown: {
            drillUpButton: {
                relativeTo: 'plotBox',
                position: {
                    x: 0,
                    y: 0
                },
                theme: {
                    fill: 'white',
                    'stroke-width': 0,
                    stroke: 'white',
                    r: 0,
                    states: {
                        hover: {
                            fill: 'white'
                        },
                        select: {
                            stroke: 'white',
                            fill: 'white'
                        }
                    }
                }
            },
            series: []
        }
    };

    loadMainData.done(function (data) {
        options.series[0].data = data;
        $("#interactive").highcharts("Map", options);
    }).fail(function () {
        Object.keys(loadRegionData).forEach(function (name) {
            // if primary data can't be fetched,
            // then there's no need for auxilliary data
            loadRegionData[name].abort();
        });
    });
});

Since I don't know every detail of your code, it's left for you to find a way to fit it into your solution.