Friday, 19 October 2018

Drilldown in highmaps - how to remove a series

I am currently trying to create a drilldown map on Highmaps using this example: http://www.highcharts.com/maps/demo/map-drilldown

I have got this to work with my own data for a different country correctly.

The code from this example is:

(function () {

var data = Highcharts.geojson(Highcharts.maps['countries/us/us-all']),
    // Some responsiveness
    small = $('#container').width() < 400;

// Set drilldown pointers
$.each(data, function (i) {
    this.drilldown = this.properties['hc-key'];
    this.value = i; // Non-random bogus data
});

// Instanciate the map
Highcharts.mapChart('container', {
    chart: {
        events: {
            drilldown: function (e) {

                if (!e.seriesOptions) {
                    var chart = this,
                        mapKey = 'countries/us/' + e.point.drilldown + '-all',
                        // Handle error, the timeout is cleared on success
                        fail = setTimeout(function () {
                            if (!Highcharts.maps[mapKey]) {
                                chart.showLoading('<i class="icon-frown"></i> Failed loading ' + e.point.name);

                                fail = setTimeout(function () {
                                    chart.hideLoading();
                                }, 1000);
                            }
                        }, 3000);

                    // Show the spinner
                    chart.showLoading('<i class="icon-spinner icon-spin icon-3x"></i>'); // Font Awesome spinner

                    // Load the drilldown map
                    $.getScript('https://code.highcharts.com/mapdata/' + mapKey + '.js', function () {

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

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

                        // Hide loading and add series
                        chart.hideLoading();
                        clearTimeout(fail);
                        chart.addSeriesAsDrilldown(e.point, {
                            name: e.point.name,
                            data: data,
                            dataLabels: {
                                enabled: true,
                                format: '{point.name}'
                            }
                        });
                    });
                }


                this.setTitle(null, { text: e.point.name });
            },
            drillup: function () {
                this.setTitle(null, { text: 'USA' });
            }
        }
    },

    title: {
        text: 'Highcharts Map Drilldown'
    },

    subtitle: {
        text: 'USA',
        floating: true,
        align: 'right',
        y: 50,
        style: {
            fontSize: '16px'
        }
    },

    legend: small ? {} : {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },

    colorAxis: {
        min: 0,
        minColor: '#E6E7E8',
        maxColor: '#005645'
    },

    mapNavigation: {
        enabled: true,
        buttonOptions: {
            verticalAlign: 'bottom'
        }
    },

    plotOptions: {
        map: {
            states: {
                hover: {
                    color: '#EEDD66'
                }
            }
        }
    },

    series: [{
        data: data,
        name: 'USA',
        dataLabels: {
            enabled: true,
            format: '{point.properties.postal-code}'
        }
    }],

    drilldown: {
        activeDataLabelStyle: {
            color: '#FFFFFF',
            textDecoration: 'none',
            textOutline: '1px #000000'
        },
        drillUpButton: {
            relativeTo: 'spacingBox',
            position: {
                x: 0,
                y: 60
            }
        }
    }
});
});

From my understanding, when a user clicks on a particular state, a separate js file containing the geo information for that state is loaded. However, I think that there is something missing from the code in that when there is no line of code which removes the data from the state-level js file once the user clicks 'Back to USA' and chooses another state. This results in some overlap i.e. when I click California, the California js file is called. The california state map remains under subsequent maps once I call another state. This is not hugely noticeable for this map due to it's square-like shape. However, in my example I can still see previously-loaded states (at a very small size) once I load another.

Can anyone give some insight into how I could get the previously-loaded state-level map to be removed once the user clicks on a different state?

Thanks in advance.



from Drilldown in highmaps - how to remove a series

No comments:

Post a Comment