Drilldown in two steps, multiple choice in Highcharts

Question

I'm a newbie in this community so I'll try my best. I'm trying to perform a drilldown using Highcharts in a pie chart. The fact is that I want to develop some code that allows me to:

• In a first click select multiple charts (or slices from a pie)
• In a second click drilldown the pie to view the drilldown series.

Here it goes with my code (where I can only perform multiple selections when the drilldown is done, not before):

$(function () {
var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'pie'

    },
    plotOptions: {
        series: {
            point: {
                events: {
                    click: function (event) {
                        this.slice(null);
                    }
                }
            }
        }
    },
    series: [{
            name: 'Things',
            colorByPoint: true,
            data: [{
                    name: 'Animals',
                    y: 5,
                    drilldown: 'animals'
                }, {
                    name: 'Fruits',
                    y: 2,
                    drilldown: 'fruits'
                }, {
                    name: 'Cars',
                    y: 4,
                    drilldown: 'cars'
                }]
        }],
    drilldown: {
        series: [{
                id: 'animals',
                data: [
                    ['Cats', 4],
                    ['Dogs', 2],
                    ['Cows', 1],
                    ['Sheep', 2],
                    ['Pigs', 1]
                ]
            }, {
                id: 'fruits',
                data: [
                    ['Apples', 4],
                    ['Oranges', 2]
                ]
            }, {
                id: 'cars',
                data: [
                    ['Toyota', 4],
                    ['Opel', 2],
                    ['Volkswagen', 2]
                ]
            }]
        }
    });
});

Thanks for your help mates!

Answer 1

Using async drilldown (API) it is possible to add more series as a drilldown. Check state of a point and if it was already selected, then this means that selected point was clicked and drilldown should be performed.

$(function () {

    // Create the chart
    $('#container').highcharts({
        chart: {
            type: 'column',
            events: {
                drilldown: function (e) {
                    if (!e.seriesOptions && e.point.selected) {
                        var chart = this,
                            points = chart.getSelectedPoints(),
                            drilldowns = {
                                'Animals': {
                                    name: 'Animals',
                                    data: [
                                        ['Cows', 2],
                                        ['Sheep', 3]
                                    ]
                                },
                                    'Fruits': {
                                    name: 'Fruits',
                                    data: [
                                        ['Apples', 5],
                                        ['Oranges', 7],
                                        ['Bananas', 2]
                                    ]
                                },
                                    'Cars': {
                                    name: 'Cars',
                                    data: [
                                        ['Toyota', 1],
                                        ['Volkswagen', 2],
                                        ['Opel', 5]
                                    ]
                                }
                            };

                        Highcharts.each(points, function (p) {
                            chart.addSingleSeriesAsDrilldown(p, drilldowns[p.name]);
                        });
                        chart.applyDrilldown();
                    }

                },
                drillup: function (e) {
                    var chart = this,
                        points = [];
                    setTimeout(function () {
                        points = chart.getSelectedPoints();

                        Highcharts.each(points, function (p) {
                            // unselect points from previous drilldown
                            p.selected = false;
                            p.setState('', true);
                        });
                    }, 0);
                }
            }
        },
        title: {
            text: 'Async drilldown'
        },
        xAxis: {
            type: 'category'
        },

        legend: {
            enabled: false
        },

        plotOptions: {
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: true
                }
            }
        },

        series: [{
            allowPointSelect: true,
            name: 'Things',
            colorByPoint: true,
            data: [{
                name: 'Animals',
                y: 5,
                drilldown: true
            }, {
                name: 'Fruits',
                y: 2,
                drilldown: true
            }, {
                name: 'Cars',
                y: 4,
                drilldown: true
            }]
        }],

        drilldown: {
            series: []
        }
    });
});

JSFiddle: http://jsfiddle.net/7hmn093d/2/