Highcharts pie graph with two rings filtering

Question

I have a pie chart here that I'm working on that has two "rings" in it. The inner ring is just a summation of the outer ring for that given category.

Here is the fiddle: http://jsfiddle.net/jeffvan576/a50859s7/1/

(Apologies for the code - it's a bit of a mess right now)

I've been messing around with the showInLegend functionality but that will (as it's intended) only pull out the given piece of the pie chart. So, for instance, if you click google, it pulls out that piece of the pie chart but leaves the outer ring. To completely eliminate google you need to click "google", "match", "funds added" and "organic" for google.

My question is, is there a way to remove the entire slice (google and all it's children) from the chart at once?

The issue is that in order to get the functionality / layout on the chart that I need, this pie chart is actually built out of two series.

ShowInLegend code:

        pie: {
            shadow: false,
            center: ['50%', '50%'],
            showInLegend: true
        }

I started building a custom visibility function at the bottom of the fiddle but dialed it back until I understood showInLegend a little better.

Thanks in advance!

Answer 1

you can achieve this by getting name of series on which clicked by using http://api.highcharts.com/highcharts#plotOptions.pie.events.click of plotoptions -> pie.

after that calling visibility function to hide Channel series along with its children to hide/show.

Event:

    plotOptions: {
        pie: {
            shadow: false,
            center: ['50%', '50%'],
            showInLegend: true,
            point: {
                events: {
                }
            }
        }
    }

also static line put into visibility function to hide/show need to remove.

// chart.series[0].data[0].visible = false;

http://jsfiddle.net/a50859s7/27/

Full code:

$(function () {
    var dataObject = {
        facebook: {
            'organic': 10.85,
                'match': 7.35,
                'fundsadded': 33.06,
                'total': 0,
                'status': 'disabled'
        },
        google: {
            'organic': 10.85,
                'match': 7.35,
                'fundsadded': 33.06,
                'total': 0,
                'status': 'disabled'
        },
        email: {
            'organic': 10.85,
                'match': 7.35,
                'fundsadded': 33.06,
                'total': 0,
                'status': 'enabled'
        },
        colorSelections: {
            'facebook': '#3b5998',
                'google': '#dd4b39',
                'disabled': '#c6c6c6'
        }
    }

    var sumObjects = function () {
        for (var channel in dataObject) {
            if (channel === 'colorSelections') continue;
            var sum = 0;
            for (var key in dataObject[channel]) {
                if (key === 'status') continue;
                sum += dataObject[channel][key];
            }

            dataObject[channel].total = sum;
        }

    }

    sumObjects();

    var colors = Highcharts.getOptions().colors,
        categories = ['Facebook', 'Google', 'Email'],
        data = [{
            y: dataObject.facebook.total + 1,
            //color: dataObject.facebook.status === 'disabled' ? dataObject.colorSelections.disabled : dataObject.colorSelections.facebook,
            color: 'rgba(59, 89, 152, 0.3)',
            drilldown: {
                name: 'Facebook',
                categories: ['organic', 'match', 'funds added'],
                data: [
                dataObject.facebook.organic,
                dataObject.facebook.match,
                dataObject.facebook.fundsadded],
                color: 'rgba(59, 89, 152, 0.3)'
            },
        }, {
            y: dataObject.google.total + 1,
            color: '#dd4b39',
            drilldown: {
                name: 'Google',
                categories: ['organic', 'match', 'funds added'],
                data: [
                dataObject.google.organic,
                dataObject.google.match,
                dataObject.google.fundsadded],
                color: '#e46f61'
            }
        }, {
            y: dataObject.email.total + 1,
            color: colors[2],
            drilldown: {
                name: 'Email',
                categories: ['organic', 'match', 'funds added'],
                data: [
                dataObject.email.organic,
                dataObject.email.match,
                dataObject.email.fundsadded],
                color: colors[2]
            }
        }],
        browserData = [],
        versionsData = [],
        i,
        j,
        dataLen = data.length,
        drillDataLen,
        brightness;


    // Build the data arrays
    for (i = 0; i < dataLen; i += 1) {

        // add browser data
        browserData.push({
            name: categories[i],
            y: data[i].y,
            color: data[i].color
        });

        // add version data
        drillDataLen = data[i].drilldown.data.length;
        for (j = 0; j < drillDataLen; j += 1) {
            brightness = 0.2 - (j / drillDataLen) / 5;
            versionsData.push({
                name: data[i].drilldown.categories[j],
                y: ((data[i].drilldown.data[j] / browserData[0].y) * 100),
                color: Highcharts.Color(data[i].color).brighten(brightness).get()
            });
        }
    }

    // Create the chart
    $('#container').highcharts({
        chart: {
            type: 'pie'
        },
        title: {
            text: 'Browser market share, April, 2011'
        },
        yAxis: {
            title: {
                text: 'Total percent market share'
            }
        },
        plotOptions: {
            pie: {
                shadow: false,
                center: ['50%', '50%'],
                showInLegend: true,
                point: {
                    events: {
                        click: function (event) {
                            var seriesIndex;
                            var secondarySeriesIndex;
                            if (this.name == 'Facebook') {
                                seriesIndex = 0;
                                secondarySeriesIndex = 0;
                            } else if (this.name == 'Google') {
                                seriesIndex = 1;
                                secondarySeriesIndex = 3;
                            } else if (this.name == 'Email') {
                                seriesIndex = 2;
                                secondarySeriesIndex = 6;
                            }
                            var chart = $('#container').highcharts();
                            visibility(chart.series[0].data[seriesIndex]);
                            visibility(chart.series[1].data[secondarySeriesIndex]);
                            visibility(chart.series[1].data[secondarySeriesIndex + 1]);
                            visibility(chart.series[1].data[secondarySeriesIndex + 2]);
                        }
                    }
                }
            }

        },
        tooltip: {
            valueSuffix: '%'
        },
        series: [{
            name: 'Channel',
            type: 'pie',
            data: browserData,
            size: '120%',
            dataLabels: {
                formatter: function () {
                    return this.y > 5 ? this.point.name : null;
                },
                color: 'white',
                distance: -30
            }
        }, {
            name: 'Added',
            type: 'pie',
            data: versionsData,
            size: '120%',
            innerSize: '80%',
            dataLabels: {
                formatter: function () {
                    // display only if larger than 1
                    return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%' : null;
                }
            }
        }]
    });

    var visibility = function (series) {
        series.visible ? series.graphic.hide() : series.graphic.show();

       // chart.series[0].data[0].visible = false;
    }

    var chart = $('#container').highcharts();
    $('.update').click(function () {

        visibility(chart.series[0].data[0]);
        visibility(chart.series[1].data[0]);
        visibility(chart.series[1].data[1]);
        visibility(chart.series[1].data[2]);


        chart.redraw();
    });

    function synchronizePieSeries(event, slice) {
        debugger;
        $(chart.series[1].data).each(function (i, e) {
            if (slice.name === e.name) {
                slice.visible ? e.graphic.hide() : e.graphic.show();
            }
        });
    }


    //$('.update').click(function (event) {
    //    synchronizePieSeries(event, this);
    //});
});