CODEWITHSUNDEEP
highchartsclickmouseoverpie-chartdrilldown
G G
G G

Reputation: 1664

Highcharts piechart with slice animation and drilldown on click together throws exception in chart and breaks the pie chart

I have a pie chart here. On click event it drills down and on mouseover it does the slice animation. The slice animation is copied from an answer here from Pawel Fus

The events I have on pie chart point are as below,

mouseOut: function () {
    setTranslation(this, false);
},
mouseOver: function() {
    setTranslation(this, true);
},
click: function() {
    var drilldown = this.drilldown;
    if (drilldown) { // drill down
        setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
    } else { // restore
        setChart(name, categories, data);
    }
}

and the functions used in them are 

function setChart(name, categories, data, color) {
    chart.xAxis[0].setCategories(categories);
    chart.series[0].remove();
    chart.addSeries({
        name: name,
        data: data,
        pointPadding: -0.3,
        borderWidth: 0,
        pointWidth: 15,
        shadow: false,
        color: color || 'white'
    });
}

function setTranslation(p, slice){
    p.sliced = slice;
    if(p.sliced){
        p.graphic.animate(p.slicedTranslation);
    } else {
        p.graphic.animate({
            translateX: 0,
            translateY: 0
        });
    }
}

The problem I have is it throws following exception:

Uncaught TypeError: Property 'select' of object #<Object> is not a function highcharts.src.js:12364

It breaks the chart when clicking on it for drilldown.

I am not sure what I am doing wrong but I guess the mouseover event is getting messed up on drilldown.

It would be great if I can get both these features working together.

Upvotes: 0

Views: 2733

Answers (1)

Paweł Fus
Paweł Fus

Reputation: 45079

The problem is with actual running animation. I advice to not use setting translation to a pie chart until all animations for a slice are don, see: http://jsfiddle.net/5H675/5/

function setTranslation(p, slice) {
    p.sliced = slice;
    if (!$(p.graphic).is(':animated')) {
        if (p.sliced) {
            p.graphic.animate(p.slicedTranslation);
        } else {
            p.graphic.animate({
                translateX: 0,
                translateY: 0
            });
        }
    }
}

Upvotes: 1

Related Questions