    /**
     * @class Ext.chart.series.Pie
     * @extends Ext.chart.series.Series
     *
     * Creates a Pie Chart. A Pie Chart is a useful visualization technique to display quantitative information for different
     * categories that also have a meaning as a whole.
     * As with all other series, the Pie Series must be appended in the *series* Chart array configuration. See the Chart
     * documentation for more information. A typical configuration object for the pie series could be:
     *
     * {@img Ext.chart.series.Pie/Ext.chart.series.Pie.png Ext.chart.series.Pie chart series}
     *
     *     var store = Ext.create('Ext.data.JsonStore', {
     *         fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
     *         data: [
     *             {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
     *             {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
     *             {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
     *             {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
     *             {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}
     *         ]
     *     });
     *
     *     Ext.create('Ext.chart.Chart', {
     *         renderTo: Ext.getBody(),
     *         width: 500,
     *         height: 300,
     *         animate: true,
     *         store: store,
     *         theme: 'Base:gradients',
     *         series: [{
     *             type: 'pie',
     *             field: 'data1',
     *             showInLegend: true,
     *             tips: {
     *               trackMouse: true,
     *               width: 140,
     *               height: 28,
     *               renderer: function(storeItem, item) {
     *                 //calculate and display percentage on hover
     *                 var total = 0;
     *                 store.each(function(rec) {
     *                     total += rec.get('data1');
     *                 });
     *                 this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data1') / total * 100) + '%');
     *               }
     *             },
     *             highlight: {
     *               segment: {
     *                 margin: 20
     *               }
     *             },
     *             label: {
     *                 field: 'name',
     *                 display: 'rotate',
     *                 contrast: true,
     *                 font: '18px Arial'
     *             }
     *         }]
     *     });
     *
     * In this configuration we set `pie` as the type for the series, set an object with specific style properties for highlighting options
     * (triggered when hovering elements). We also set true to `showInLegend` so all the pie slices can be represented by a legend item.
     * We set `data1` as the value of the field to determine the angle span for each pie slice. We also set a label configuration object
     * where we set the field name of the store field to be renderer as text for the label. The labels will also be displayed rotated.
     * We set `contrast` to `true` to flip the color of the label if it is to similar to the background color. Finally, we set the font family
     * and size through the `font` parameter.
     *
     * @xtype pie
     */
    Ext.define('Ext.chart.series.Pie', {

        /* Begin Definitions */

        alternateClassName: ['Ext.chart.PieSeries', 'Ext.chart.PieChart'],

        extend: 'Ext.chart.series.Series',

        /* End Definitions */

        type: "pie",

        alias: 'series.pie',

        rad: Math.PI / 180,

        /**
         * @cfg {Number} highlightDuration
         * The duration for the pie slice highlight effect.
         */
        highlightDuration: 150,

        /**
         * @cfg {String} angleField
         * The store record field name to be used for the pie angles.
         * The values bound to this field name must be positive real numbers.
         * This parameter is required.
         */
        angleField: false,

        /**
         * @cfg {String} lengthField
         * The store record field name to be used for the pie slice lengths.
         * The values bound to this field name must be positive real numbers.
         * This parameter is optional.
         */
        lengthField: false,

        /**
         * @cfg {Boolean|Number} donut
         * Whether to set the pie chart as donut chart.
         * Default's false. Can be set to a particular percentage to set the radius
         * of the donut chart.
         */
        donut: false,

        /**
         * @cfg {Boolean} showInLegend
         * Whether to add the pie chart elements as legend items. Default's false.
         */
        showInLegend: false,

        /**
         * @cfg {Array} colorSet
         * An array of color values which will be used, in order, as the pie slice fill colors.
         */

        /**
         * @cfg {Object} style
         * An object containing styles for overriding series styles from Theming.
         */
        style: {},

        constructor: function(config) {
            this.callParent(arguments);
            var me = this,
                chart = me.chart,
                surface = chart.surface,
                store = chart.store,
                shadow = chart.shadow, i, l, cfg;
            Ext.applyIf(me, {
                highlightCfg: {
                    segment: {
                        margin: 20
                    }
                }
            });
            Ext.apply(me, config, {
                shadowAttributes: [{
                    "stroke-width": 6,
                    "stroke-opacity": 1,
                    stroke: 'rgb(200, 200, 200)',
                    translate: {
                        x: 1.2,
                        y: 2
                    }
                },
                {
                    "stroke-width": 4,
                    "stroke-opacity": 1,
                    stroke: 'rgb(150, 150, 150)',
                    translate: {
                        x: 0.9,
                        y: 1.5
                    }
                },
                {
                    "stroke-width": 2,
                    "stroke-opacity": 1,
                    stroke: 'rgb(100, 100, 100)',
                    translate: {
                        x: 0.6,
                        y: 1
                    }
                }]
            });
            me.group = surface.getGroup(me.seriesId);
            if (shadow) {
                for (i = 0, l = me.shadowAttributes.length; i < l; i++) {
                    me.shadowGroups.push(surface.getGroup(me.seriesId + '-shadows' + i));
                }
            }
            surface.customAttributes.segment = function(opt) {
                return me.getSegment(opt);
            };
        },

        //@private updates some onbefore render parameters.
        initialize: function() {
            var me = this,
                store = me.chart.substore || me.chart.store;
            //Add yFields to be used in Legend.js
            me.yField = [];
            if (me.label.field) {
                store.each(function(rec) {
                    me.yField.push(rec.get(me.label.field));
                });
            }
        },

        // @private returns an object with properties for a PieSlice.
        getSegment: function(opt) {
            var me = this,
                rad = me.rad,
                cos = Math.cos,
                sin = Math.sin,
                abs = Math.abs,
                x = me.centerX,
                y = me.centerY,
                x1 = 0, x2 = 0, x3 = 0, x4 = 0,
                y1 = 0, y2 = 0, y3 = 0, y4 = 0,
                delta = 1e-2,
                r = opt.endRho - opt.startRho,
                startAngle = opt.startAngle,
                endAngle = opt.endAngle,
                midAngle = (startAngle + endAngle) / 2 * rad,
                margin = opt.margin || 0,
                flag = abs(endAngle - startAngle) > 180,
                a1 = Math.min(startAngle, endAngle) * rad,
                a2 = Math.max(startAngle, endAngle) * rad,
                singleSlice = false;

            x += margin * cos(midAngle);
            y += margin * sin(midAngle);

            x1 = x + opt.startRho * cos(a1);
            y1 = y + opt.startRho * sin(a1);

            x2 = x + opt.endRho * cos(a1);
            y2 = y + opt.endRho * sin(a1);

            x3 = x + opt.startRho * cos(a2);
            y3 = y + opt.startRho * sin(a2);

            x4 = x + opt.endRho * cos(a2);
            y4 = y + opt.endRho * sin(a2);

            if (abs(x1 - x3) <= delta && abs(y1 - y3) <= delta) {
                singleSlice = true;
            }
            //Solves mysterious clipping bug with IE
            if (singleSlice) {
                return {
                    path: [
                    ["M", x1, y1],
                    ["L", x2, y2],
                    ["A", opt.endRho, opt.endRho, 0, +flag, 1, x4, y4],
                    ["Z"]]
                };
            } else {
                return {
                    path: [
                    ["M", x1, y1],
                    ["L", x2, y2],
                    ["A", opt.endRho, opt.endRho, 0, +flag, 1, x4, y4],
                    ["L", x3, y3],
                    ["A", opt.startRho, opt.startRho, 0, +flag, 0, x1, y1],
                    ["Z"]]
                };
            }
        },

        // @private utility function to calculate the middle point of a pie slice.
        calcMiddle: function(item) {
            var me = this,
                rad = me.rad,
                slice = item.slice,
                x = me.centerX,
                y = me.centerY,
                startAngle = slice.startAngle,
                endAngle = slice.endAngle,
                donut = +me.donut,
                a1 = Math.min(startAngle, endAngle) * rad,
                a2 = Math.max(startAngle, endAngle) * rad,
                midAngle = -(a1 + (a2 - a1) / 2),
                xm = x + (item.endRho + item.startRho) / 2 * Math.cos(midAngle),
                ym = y - (item.endRho + item.startRho) / 2 * Math.sin(midAngle);

            item.middle = {
                x: xm,
                y: ym
            };
        },

        /**
         * Draws the series for the current chart.
         */
        drawSeries: function() {
            var me = this,
                store = me.chart.substore || me.chart.store,
                group = me.group,
                animate = me.chart.animate,
                field = me.angleField || me.field || me.xField,
                lenField = [].concat(me.lengthField),
                totalLenField = 0,
                colors = me.colorSet,
                chart = me.chart,
                surface = chart.surface,
                chartBBox = chart.chartBBox,
                enableShadows = chart.shadow,
                shadowGroups = me.shadowGroups,
                shadowAttributes = me.shadowAttributes,
                lnsh = shadowGroups.length,
                rad = me.rad,
                layers = lenField.length,
                rhoAcum = 0,
                donut = +me.donut,
                layerTotals = [],
                values = {},
                fieldLength,
                items = [],
                passed = false,
                totalField = 0,
                maxLenField = 0,
                cut = 9,
                defcut = true,
                angle = 0,
                seriesStyle = me.seriesStyle,
                seriesLabelStyle = me.seriesLabelStyle,
                colorArrayStyle = me.colorArrayStyle,
                colorArrayLength = colorArrayStyle && colorArrayStyle.length || 0,
                gutterX = chart.maxGutter[0],
                gutterY = chart.maxGutter[1],
                rendererAttributes,
                shadowGroup,
                shadowAttr,
                shadows,
                shadow,
                shindex,
                centerX,
                centerY,
                deltaRho,
                first = 0,
                slice,
                slices,
                sprite,
                value,
                item,
                lenValue,
                ln,
                record,
                i,
                j,
                startAngle,
                endAngle,
                middleAngle,
                sliceLength,
                path,
                p,
                spriteOptions, bbox;

            Ext.apply(seriesStyle, me.style || {});

            me.setBBox();
            bbox = me.bbox;

            //override theme colors
            if (me.colorSet) {
                colorArrayStyle = me.colorSet;
                colorArrayLength = colorArrayStyle.length;
            }

            //if not store or store is empty then there's nothing to draw
            if (!store || !store.getCount()) {
                return;
            }

            me.unHighlightItem();
            me.cleanHighlights();

            centerX = me.centerX = chartBBox.x + (chartBBox.width / 2);
            centerY = me.centerY = chartBBox.y + (chartBBox.height / 2);
            me.radius = Math.min(centerX - chartBBox.x, centerY - chartBBox.y);
            me.slices = slices = [];
            me.items = items = [];

            store.each(function(record, i) {
                if (this.__excludes && this.__excludes[i]) {
                    //hidden series
                    return;
                }
                totalField += +record.get(field);
                if (lenField[0]) {
                    for (j = 0, totalLenField = 0; j < layers; j++) {
                        totalLenField += +record.get(lenField[j]);
                    }
                    layerTotals[i] = totalLenField;
                    maxLenField = Math.max(maxLenField, totalLenField);
                }
            }, this);

            store.each(function(record, i) {
                if (this.__excludes && this.__excludes[i]) {
                    //hidden series
                    return;
                }
                value = record.get(field);
                middleAngle = angle - 360 * value / totalField / 2;
                // TODO - Put up an empty circle
                if (isNaN(middleAngle)) {
                    middleAngle = 360;
                    value = 1;
                    totalField = 1;
                }
                // First slice
                if (!i || first == 0) {
                    angle = 360 - middleAngle;
                    me.firstAngle = angle;
                    middleAngle = angle - 360 * value / totalField / 2;
                }
                endAngle = angle - 360 * value / totalField;
                slice = {
                    series: me,
                    value: value,
                    startAngle: angle,
                    endAngle: endAngle,
                    storeItem: record
                };
                if (lenField[0]) {
                    lenValue = layerTotals[i];
                    slice.rho = me.radius * (lenValue / maxLenField);
                } else {
                    slice.rho = me.radius;
                }
                slices[i] = slice;
                if((slice.startAngle % 360) == (slice.endAngle % 360)) {
                    slice.startAngle -= 0.0001;
                }
                angle = endAngle;
                first++;
            }, me);

            //do all shadows first.
            if (enableShadows) {
                for (i = 0, ln = slices.length; i < ln; i++) {
                    if (this.__excludes && this.__excludes[i]) {
                        //hidden series
                        continue;
                    }
                    slice = slices[i];
                    slice.shadowAttrs = [];
                    for (j = 0, rhoAcum = 0, shadows = []; j < layers; j++) {
                        sprite = group.getAt(i * layers + j);
                        deltaRho = lenField[j] ? store.getAt(i).get(lenField[j]) / layerTotals[i] * slice.rho: slice.rho;
                        //set pie slice properties
                        rendererAttributes = {
                            segment: {
                                startAngle: slice.startAngle,
                                endAngle: slice.endAngle,
                                margin: 0,
                                rho: slice.rho,
                                startRho: rhoAcum + (deltaRho * donut / 100),
                                endRho: rhoAcum + deltaRho
                            }
                        };
                        //create shadows
                        for (shindex = 0, shadows = []; shindex < lnsh; shindex++) {
                            shadowAttr = shadowAttributes[shindex];
                            shadow = shadowGroups[shindex].getAt(i);
                            if (!shadow) {
                                shadow = chart.surface.add(Ext.apply({},
                                {
                                    type: 'path',
                                    group: shadowGroups[shindex],
                                    strokeLinejoin: "round"
                                },
                                rendererAttributes, shadowAttr));
                            }
                            if (animate) {
                                rendererAttributes = me.renderer(shadow, store.getAt(i), Ext.apply({},
                                rendererAttributes, shadowAttr), i, store);
                                me.onAnimate(shadow, {
                                    to: rendererAttributes
                                });
                            } else {
                                rendererAttributes = me.renderer(shadow, store.getAt(i), Ext.apply(shadowAttr, {
                                    hidden: false
                                }), i, store);
                                shadow.setAttributes(rendererAttributes, true);
                            }
                            shadows.push(shadow);
                        }
                        slice.shadowAttrs[j] = shadows;
                    }
                }
            }
            //do pie slices after.
            for (i = 0, ln = slices.length; i < ln; i++) {
                if (this.__excludes && this.__excludes[i]) {
                    //hidden series
                    continue;
                }
                slice = slices[i];
                for (j = 0, rhoAcum = 0; j < layers; j++) {
                    sprite = group.getAt(i * layers + j);
                    deltaRho = lenField[j] ? store.getAt(i).get(lenField[j]) / layerTotals[i] * slice.rho: slice.rho;
                    //set pie slice properties
                    rendererAttributes = Ext.apply({
                        segment: {
                            startAngle: slice.startAngle,
                            endAngle: slice.endAngle,
                            margin: 0,
                            rho: slice.rho,
                            startRho: rhoAcum + (deltaRho * donut / 100),
                            endRho: rhoAcum + deltaRho
                        }
                    }, Ext.apply(seriesStyle, colorArrayStyle && { fill: colorArrayStyle[(layers > 1? j : i) % colorArrayLength] } || {}));
                    item = Ext.apply({},
                    rendererAttributes.segment, {
                        slice: slice,
                        series: me,
                        storeItem: slice.storeItem,
                        index: i
                    });
                    me.calcMiddle(item);
                    if (enableShadows) {
                        item.shadows = slice.shadowAttrs[j];
                    }
                    items[i] = item;
                    // Create a new sprite if needed (no height)
                    if (!sprite) {
                        spriteOptions = Ext.apply({
                            type: "path",
                            group: group,
                            middle: item.middle
                        }, Ext.apply(seriesStyle, colorArrayStyle && { fill: colorArrayStyle[(layers > 1? j : i) % colorArrayLength] } || {}));
                        sprite = surface.add(Ext.apply(spriteOptions, rendererAttributes));
                    }
                    slice.sprite = slice.sprite || [];
                    item.sprite = sprite;
                    slice.sprite.push(sprite);
                    slice.point = [item.middle.x, item.middle.y];
                    if (animate) {
                        rendererAttributes = me.renderer(sprite, store.getAt(i), rendererAttributes, i, store);
                        sprite._to = rendererAttributes;
                        sprite._animating = true;
                        me.onAnimate(sprite, {
                            to: rendererAttributes,
                            listeners: {
                                afteranimate: {
                                    fn: function() {
                                        this._animating = false;
                                    },
                                    scope: sprite
                                }
                            }
                        });
                    } else {
                        rendererAttributes = me.renderer(sprite, store.getAt(i), Ext.apply(rendererAttributes, {
                            hidden: false
                        }), i, store);
                        sprite.setAttributes(rendererAttributes, true);
                    }
                    rhoAcum += deltaRho;
                }
            }

            // Hide unused bars
            ln = group.getCount();
            for (i = 0; i < ln; i++) {
                if (!slices[(i / layers) >> 0] && group.getAt(i)) {
                    group.getAt(i).hide(true);
                }
            }
            if (enableShadows) {
                lnsh = shadowGroups.length;
                for (shindex = 0; shindex < ln; shindex++) {
                    if (!slices[(shindex / layers) >> 0]) {
                        for (j = 0; j < lnsh; j++) {
                            if (shadowGroups[j].getAt(shindex)) {
                                shadowGroups[j].getAt(shindex).hide(true);
                            }
                        }
                    }
                }
            }
            me.renderLabels();
            me.renderCallouts();
        },

        // @private callback for when creating a label sprite.
        onCreateLabel: function(storeItem, item, i, display) {
            var me = this,
                group = me.labelsGroup,
                config = me.label,
                centerX = me.centerX,
                centerY = me.centerY,
                middle = item.middle,
                endLabelStyle = Ext.apply(me.seriesLabelStyle || {}, config || {});

            return me.chart.surface.add(Ext.apply({
                'type': 'text',
                'text-anchor': 'middle',
                'group': group,
                'x': middle.x,
                'y': middle.y
            }, endLabelStyle));
        },

        // @private callback for when placing a label sprite.
        onPlaceLabel: function(label, storeItem, item, i, display, animate, index) {
            var me = this,
                chart = me.chart,
                resizing = chart.resizing,
                config = me.label,
                format = config.renderer,
                field = [].concat(config.field),
                centerX = me.centerX,
                centerY = me.centerY,
                middle = item.middle,
                opt = {
                    x: middle.x,
                    y: middle.y
                },
                x = middle.x - centerX,
                y = middle.y - centerY,
                from = {},
                rho = 1,
                theta = Math.atan2(y, x || 1),
                dg = theta * 180 / Math.PI,
                prevDg;

            function fixAngle(a) {
                if (a < 0) a += 360;
                return a % 360;
            }

            label.setAttributes({
                text: format(storeItem.get(field[index]))
            }, true);

            switch (display) {
            case 'outside':
                rho = Math.sqrt(x * x + y * y) * 2;
                //update positions
                opt.x = rho * Math.cos(theta) + centerX;
                opt.y = rho * Math.sin(theta) + centerY;
                break;

            case 'rotate':
                dg = fixAngle(dg);
                dg = (dg > 90 && dg < 270) ? dg + 180: dg;

                prevDg = label.attr.rotation.degrees;
                if (prevDg != null && Math.abs(prevDg - dg) > 180) {
                    if (dg > prevDg) {
                        dg -= 360;
                    } else {
                        dg += 360;
                    }
                    dg = dg % 360;
                } else {
                    dg = fixAngle(dg);
                }
                //update rotation angle
                opt.rotate = {
                    degrees: dg,
                    x: opt.x,
                    y: opt.y
                };
                break;

            default:
                break;
            }
            //ensure the object has zero translation
            opt.translate = {
                x: 0, y: 0
            };
            if (animate && !resizing && (display != 'rotate' || prevDg != null)) {
                me.onAnimate(label, {
                    to: opt
                });
            } else {
                label.setAttributes(opt, true);
            }
            label._from = from;
        },

        // @private callback for when placing a callout sprite.
        onPlaceCallout: function(callout, storeItem, item, i, display, animate, index) {
            var me = this,
                chart = me.chart,
                resizing = chart.resizing,
                config = me.callouts,
                centerX = me.centerX,
                centerY = me.centerY,
                middle = item.middle,
                opt = {
                    x: middle.x,
                    y: middle.y
                },
                x = middle.x - centerX,
                y = middle.y - centerY,
                rho = 1,
                rhoCenter,
                theta = Math.atan2(y, x || 1),
                bbox = callout.label.getBBox(),
                offsetFromViz = 20,
                offsetToSide = 10,
                offsetBox = 10,
                p;

            //should be able to config this.
            rho = item.endRho + offsetFromViz;
            rhoCenter = (item.endRho + item.startRho) / 2 + (item.endRho - item.startRho) / 3;
            //update positions
            opt.x = rho * Math.cos(theta) + centerX;
            opt.y = rho * Math.sin(theta) + centerY;

            x = rhoCenter * Math.cos(theta);
            y = rhoCenter * Math.sin(theta);

            if (chart.animate) {
                //set the line from the middle of the pie to the box.
                me.onAnimate(callout.lines, {
                    to: {
                        path: ["M", x + centerX, y + centerY, "L", opt.x, opt.y, "Z", "M", opt.x, opt.y, "l", x > 0 ? offsetToSide: -offsetToSide, 0, "z"]
                    }
                });
                //set box position
                me.onAnimate(callout.box, {
                    to: {
                        x: opt.x + (x > 0 ? offsetToSide: -(offsetToSide + bbox.width + 2 * offsetBox)),
                        y: opt.y + (y > 0 ? ( - bbox.height - offsetBox / 2) : ( - bbox.height - offsetBox / 2)),
                        width: bbox.width + 2 * offsetBox,
                        height: bbox.height + 2 * offsetBox
                    }
                });
                //set text position
                me.onAnimate(callout.label, {
                    to: {
                        x: opt.x + (x > 0 ? (offsetToSide + offsetBox) : -(offsetToSide + bbox.width + offsetBox)),
                        y: opt.y + (y > 0 ? -bbox.height / 4: -bbox.height / 4)
                    }
                });
            } else {
                //set the line from the middle of the pie to the box.
                callout.lines.setAttributes({
                    path: ["M", x + centerX, y + centerY, "L", opt.x, opt.y, "Z", "M", opt.x, opt.y, "l", x > 0 ? offsetToSide: -offsetToSide, 0, "z"]
                },
                true);
                //set box position
                callout.box.setAttributes({
                    x: opt.x + (x > 0 ? offsetToSide: -(offsetToSide + bbox.width + 2 * offsetBox)),
                    y: opt.y + (y > 0 ? ( - bbox.height - offsetBox / 2) : ( - bbox.height - offsetBox / 2)),
                    width: bbox.width + 2 * offsetBox,
                    height: bbox.height + 2 * offsetBox
                },
                true);
                //set text position
                callout.label.setAttributes({
                    x: opt.x + (x > 0 ? (offsetToSide + offsetBox) : -(offsetToSide + bbox.width + offsetBox)),
                    y: opt.y + (y > 0 ? -bbox.height / 4: -bbox.height / 4)
                },
                true);
            }
            for (p in callout) {
                callout[p].show(true);
            }
        },

        // @private handles sprite animation for the series.
        onAnimate: function(sprite, attr) {
            sprite.show();
            return this.callParent(arguments);
        },

        isItemInPoint: function(x, y, item, i) {
            var me = this,
                cx = me.centerX,
                cy = me.centerY,
                abs = Math.abs,
                dx = abs(x - cx),
                dy = abs(y - cy),
                startAngle = item.startAngle,
                endAngle = item.endAngle,
                rho = Math.sqrt(dx * dx + dy * dy),
                angle = Math.atan2(y - cy, x - cx) / me.rad + 360;

            // normalize to the same range of angles created by drawSeries
            if (angle > me.firstAngle) {
                angle -= 360;
            }
            return (angle <= startAngle && angle > endAngle
                    && rho >= item.startRho && rho <= item.endRho);
        },

        // @private hides all elements in the series.
        hideAll: function() {
            var i, l, shadow, shadows, sh, lsh, sprite;
            if (!isNaN(this._index)) {
                this.__excludes = this.__excludes || [];
                this.__excludes[this._index] = true;
                sprite = this.slices[this._index].sprite;
                for (sh = 0, lsh = sprite.length; sh < lsh; sh++) {
                    sprite[sh].setAttributes({
                        hidden: true
                    }, true);
                }
                if (this.slices[this._index].shadowAttrs) {
                    for (i = 0, shadows = this.slices[this._index].shadowAttrs, l = shadows.length; i < l; i++) {
                        shadow = shadows[i];
                        for (sh = 0, lsh = shadow.length; sh < lsh; sh++) {
                            shadow[sh].setAttributes({
                                hidden: true
                            }, true);
                        }
                    }
                }
                this.drawSeries();
            }
        },

        // @private shows all elements in the series.
        showAll: function() {
            if (!isNaN(this._index)) {
                this.__excludes[this._index] = false;
                this.drawSeries();
            }
        },

        /**
         * Highlight the specified item. If no item is provided the whole series will be highlighted.
         * @param item {Object} Info about the item; same format as returned by #getItemForPoint
         */
        highlightItem: function(item) {
            var me = this,
                rad = me.rad;
            item = item || this.items[this._index];

            //TODO(nico): sometimes in IE itemmouseover is triggered
            //twice without triggering itemmouseout in between. This
            //fixes the highlighting bug. Eventually, events should be
            //changed to trigger one itemmouseout between two itemmouseovers.
            this.unHighlightItem();

            if (!item || item.sprite && item.sprite._animating) {
                return;
            }
            me.callParent([item]);
            if (!me.highlight) {
                return;
            }
            if ('segment' in me.highlightCfg) {
                var highlightSegment = me.highlightCfg.segment,
                    animate = me.chart.animate,
                    attrs, i, shadows, shadow, ln, to, itemHighlightSegment, prop;
                //animate labels
                if (me.labelsGroup) {
                    var group = me.labelsGroup,
                        display = me.label.display,
                        label = group.getAt(item.index),
                        middle = (item.startAngle + item.endAngle) / 2 * rad,
                        r = highlightSegment.margin || 0,
                        x = r * Math.cos(middle),
                        y = r * Math.sin(middle);

                    //TODO(nico): rounding to 1e-10
                    //gives the right translation. Translation
                    //was buggy for very small numbers. In this
                    //case we're not looking to translate to very small
                    //numbers but not to translate at all.
                    if (Math.abs(x) < 1e-10) {
                        x = 0;
                    }
                    if (Math.abs(y) < 1e-10) {
                        y = 0;
                    }

                    if (animate) {
                        label.stopAnimation();
                        label.animate({
                            to: {
                                translate: {
                                    x: x,
                                    y: y
                                }
                            },
                            duration: me.highlightDuration
                        });
                    }
                    else {
                        label.setAttributes({
                            translate: {
                                x: x,
                                y: y
                            }
                        }, true);
                    }
                }
                //animate shadows
                if (me.chart.shadow && item.shadows) {
                    i = 0;
                    shadows = item.shadows;
                    ln = shadows.length;
                    for (; i < ln; i++) {
                        shadow = shadows[i];
                        to = {};
                        itemHighlightSegment = item.sprite._from.segment;
                        for (prop in itemHighlightSegment) {
                            if (! (prop in highlightSegment)) {
                                to[prop] = itemHighlightSegment[prop];
                            }
                        }
                        attrs = {
                            segment: Ext.applyIf(to, me.highlightCfg.segment)
                        };
                        if (animate) {
                            shadow.stopAnimation();
                            shadow.animate({
                                to: attrs,
                                duration: me.highlightDuration
                            });
                        }
                        else {
                            shadow.setAttributes(attrs, true);
                        }
                    }
                }
            }
        },

        /**
         * un-highlights the specified item. If no item is provided it will un-highlight the entire series.
         * @param item {Object} Info about the item; same format as returned by #getItemForPoint
         */
        unHighlightItem: function() {
            var me = this;
            if (!me.highlight) {
                return;
            }

            if (('segment' in me.highlightCfg) && me.items) {
                var items = me.items,
                    animate = me.chart.animate,
                    shadowsEnabled = !!me.chart.shadow,
                    group = me.labelsGroup,
                    len = items.length,
                    i = 0,
                    j = 0,
                    display = me.label.display,
                    shadowLen, p, to, ihs, hs, sprite, shadows, shadow, item, label, attrs;

                for (; i < len; i++) {
                    item = items[i];
                    if (!item) {
                        continue;
                    }
                    sprite = item.sprite;
                    if (sprite && sprite._highlighted) {
                        //animate labels
                        if (group) {
                            label = group.getAt(item.index);
                            attrs = Ext.apply({
                                translate: {
                                    x: 0,
                                    y: 0
                                }
                            },
                            display == 'rotate' ? {
                                rotate: {
                                    x: label.attr.x,
                                    y: label.attr.y,
                                    degrees: label.attr.rotation.degrees
                                }
                            }: {});
                            if (animate) {
                                label.stopAnimation();
                                label.animate({
                                    to: attrs,
                                    duration: me.highlightDuration
                                });
                            }
                            else {
                                label.setAttributes(attrs, true);
                            }
                        }
                        if (shadowsEnabled) {
                            shadows = item.shadows;
                            shadowLen = shadows.length;
                            for (; j < shadowLen; j++) {
                                to = {};
                                ihs = item.sprite._to.segment;
                                hs = item.sprite._from.segment;
                                Ext.apply(to, hs);
                                for (p in ihs) {
                                    if (! (p in hs)) {
                                        to[p] = ihs[p];
                                    }
                                }
                                shadow = shadows[j];
                                if (animate) {
                                    shadow.stopAnimation();
                                    shadow.animate({
                                        to: {
                                            segment: to
                                        },
                                        duration: me.highlightDuration
                                    });
                                }
                                else {
                                    shadow.setAttributes({ segment: to }, true);
                                }
                            }
                        }
                    }
                }
            }
            me.callParent(arguments);
        },

        /**
         * Returns the color of the series (to be displayed as color for the series legend item).
         * @param item {Object} Info about the item; same format as returned by #getItemForPoint
         */
        getLegendColor: function(index) {
            var me = this;
            return me.colorArrayStyle[index % me.colorArrayStyle.length];
        }
    });