Optimize JavaScript DrillDown code

Question

I have a drilldown map on my page which I would like to optimise. Right now I am loading every "drilldown" map even if it is not clicked.

Here is an example that shows how the data is load if the state is clicked.I would like to achieve that.

But this is my code and as you can see, I am loading all drilldown jsons even if the map is not clicked. In my example I have only 2 drilldown option, but in my real life problem I have it like 15 so it really slows down a little bit everything.

So this is my code:

// get main map
$.getJSON('json/generate_json_main_map.php', function(data) {

    // get region 1 map
    $.getJSON('json/generate_json_region_1.php', function(first_region) {

        // get region 2 map
        $.getJSON('json/generate_json_region_2.php', function(second_region) {

            // Initiate the chart
            $('#interactive').highcharts('Map', {
                title: {
                    text: ''
                },
                colorAxis: {
                    min: 1,
                    max: 10,
                    minColor: '#8cbdee',
                    maxColor: '#1162B3',

                    type: 'logarithmic'
                },
                series: [{
                    data: data,
                    "type": 'map',
                    name: st_ponudb,
                    animation: {
                        duration: 1000
                    },
                    states: {
                        //highlight barva
                        hover: {
                            color: '#dd4814'
                        }
                    }
                }],
                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: [{
                        id: 'a',
                        name: 'First',
                        joinBy: ['hc-key', 'code'],
                        type: 'map',
                        data: first_region,
                        point: {
                            events: {
                                click: function() {
                                    var key = this.key;
                                    location.href = key;
                                }
                            }
                        }
                    }, {
                        id: 'b',
                        name: 'Second',
                        joinBy: ['hc-key', 'code'],
                        type: 'map',
                        data: second_region,
                        point: {
                            events: {
                                click: function() {
                                    var key = this.key;
                                    location.href = key;
                                }
                            }
                        }
                    }]
                }
            });
        });
    });
});

JSON from generate_json_main_map.php:

[{"drilldown":"a","name":"region 1","value":"1","path":""},{"drilldown":"b","name":"region 2","value":"2","path":""}]

JSON from generate_json_region_1.php:

[{"name":"Place 1","key":"place.php?id=1","value":"1","path":""},{"name":"Place 2","key":"place.php?id=2","value":"2","path":""}]

This is my attempt to make ajax calls load in parallel, but the map is not loading, I get just the coloraxis.

$(function() {

        $.when($.getJSON('json/generate_json_main_map.php'), $.getJSON('json/generate_json_region_1.php'), $.getJSON('json/generate_json_region_2.php')).done(function(data,first_region,second_region){

                $('#interactive').highcharts('Map', {
                    title: {
                        text: ''
                    },
                    colorAxis: {
                        min: 1,
                        max: 10,
                        minColor: '#8cbdee',
                        maxColor: '#1162B3',

                        type: 'logarithmic'
                    },
                    series: [{
                        data: data,
                        "type": 'map',
                        name: st_ponudb,
                        animation: {
                            duration: 1000
                        },
                        states: {
                            hover: {
                                color: '#dd4814'
                            }
                        }
                    }],
                    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: [{
                            id: 'a',
                            name: 'First',
                            joinBy: ['hc-key', 'code'],
                            type: 'map',
                            data: first_region,
                            point: {
                                events: {
                                    click: function() {
                                        var key = this.key;
                                        location.href = key;
                                    }
                                }
                            }
                        }, {
                            id: 'b',
                            name: 'Second',
                            joinBy: ['hc-key', 'code'],
                            type: 'map',
                            data: second_region,
                            point: {
                                events: {
                                    click: function() {
                                        var key = this.key;
                                        location.href = key;
                                    }
                                }
                            }
                        }]
                    }
                });
            });
        }); 

I can see that the jsons are loaded and there is no JS error shown by firebug.

Answer 1

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.

Answer 2

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.