slice in and out works wrong when click 1st pie and set data to 2nd pie

Question

I create a pie chart with two series. Here is my situation:

when click the left pie slice, right pie will fill with new data.

first time I click one slice on the left, the clicked one silce out perfectly.

but after that click, I click another slice, the one which sliced out before will not slice in as I want.

demo here: http://jsfiddle.net/jdGG7/

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'pie'
        },
        series: [
                {
                    allowPointSelect: true,
                    size: 100,
                    center: [100, 100],
                    events: {
                        click: function(e) {
                            var chart = window.chart;
                            var data = [
                                ['Firefox', 44.2],
                                ['IE7', 26.6],
                                ['IE6', 20],
                                ['Chrome', 3.1],
                                ['Other', 5.4]
                                ];
                            var series = this.chart.series;
                            series[1].setData(data);
                            e.point.slice();
                        }
                    },
                    data: [
                          ['Firefox', 44.2],
                          ['IE7', 26.6],
                          ['IE6', 20],
                          ['Chrome', 3.1],
                          ['Other', 5.4]
                          ]
                } ,
                {
                    size: 100,
                    center: [300, 100],
                    data: [["hehe", 10], ['IE7', 26.6]]
                }
                ]
           });
});

if any one know how to do like this demo http://www.highcharts.com/demo/pie-basic with my situation. tell me please.

Answer 1

I advice you to use two separate pie charts.

one more thing when using

allowPointSelect: true,

its better to set it in

plotOPtions:{
pie: {
allowPointSelect: true
}
}

one more thing is you have use e.point.slice() method. this method will make slice out . you are not doing slice in and directly making a new slice out for new point.

My sincere advice is to use two charts. I hope you got it

Answer 2

Honestly I recommend to use two separated charts.

Answer 3

You might want to check out this lib, you can create dynamic and explorable pie charts with it (it html5, javascript based).

It support hierarchical data structures, so you can click on first level pie chart and second level drives out with whatever data is there.

http://datavisualizationsoftwarelab.com/en/products/pie-chart/

Example of a Pie Chart: