0

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.

Community
  • 1
  • 1
G G
  • 1,614
  • 1
  • 12
  • 12

1 Answers1

1

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
            });
        }
    }
}
Paweł Fus
  • 44,795
  • 3
  • 61
  • 77
  • Hello Pawel it seems to be working but with a problem that if you hover over multiple slices there are more than two slices which are sliced. However I would only want one slice to be sliced out at any given point just try [the sample](http://jsfiddle.net/5H675/6/) and hover over green slice and then red. – G G Jul 19 '13 at 09:59
  • Yes, this is how it works from the beginning. You cna disable animation, and use `attr()` function instead, see: http://jsfiddle.net/5H675/7/ – Paweł Fus Jul 19 '13 at 11:02