extjs-rails 4.1.0.alpha1

data/app/assets/javascripts/extjs-rails/src/chart/series/Radar.js

@@ -0,0 +1,440 @@
+/**
+ * @class Ext.chart.series.Radar
+ *
+ * Creates a Radar Chart. A Radar Chart is a useful visualization technique for comparing different quantitative values for
+ * a constrained number of categories.
+ *
+ * As with all other series, the Radar series must be appended in the *series* Chart array configuration. See the Chart
+ * documentation for more information. A typical configuration object for the radar series could be:
+ *
+ *     @example
+ *     var store = Ext.create('Ext.data.JsonStore', {
+ *         fields: ['name', 'data1', 'data2', 'data3'],
+ *         data: [
+ *             { 'name': 'metric one',   'data1': 14, 'data2': 12, 'data3': 13 },
+ *             { 'name': 'metric two',   'data1': 16, 'data2':  8, 'data3':  3 },
+ *             { 'name': 'metric three', 'data1': 14, 'data2':  2, 'data3':  7 },
+ *             { 'name': 'metric four',  'data1':  6, 'data2': 14, 'data3': 23 },
+ *             { 'name': 'metric five',  'data1': 36, 'data2': 38, 'data3': 33 }
+ *         ]
+ *     });
+ *
+ *     Ext.create('Ext.chart.Chart', {
+ *         renderTo: Ext.getBody(),
+ *         width: 500,
+ *         height: 300,
+ *         animate: true,
+ *         theme:'Category2',
+ *         store: store,
+ *         axes: [{
+ *             type: 'Radial',
+ *             position: 'radial',
+ *             label: {
+ *                 display: true
+ *             }
+ *         }],
+ *         series: [{
+ *             type: 'radar',
+ *             xField: 'name',
+ *             yField: 'data1',
+ *             showInLegend: true,
+ *             showMarkers: true,
+ *             markerConfig: {
+ *                 radius: 5,
+ *                 size: 5
+ *             },
+ *             style: {
+ *                 'stroke-width': 2,
+ *                 fill: 'none'
+ *             }
+ *         },{
+ *             type: 'radar',
+ *             xField: 'name',
+ *             yField: 'data2',
+ *             showMarkers: true,
+ *             showInLegend: true,
+ *             markerConfig: {
+ *                 radius: 5,
+ *                 size: 5
+ *             },
+ *             style: {
+ *                 'stroke-width': 2,
+ *                 fill: 'none'
+ *             }
+ *         },{
+ *             type: 'radar',
+ *             xField: 'name',
+ *             yField: 'data3',
+ *             showMarkers: true,
+ *             showInLegend: true,
+ *             markerConfig: {
+ *                 radius: 5,
+ *                 size: 5
+ *             },
+ *             style: {
+ *                 'stroke-width': 2,
+ *                 fill: 'none'
+ *             }
+ *         }]
+ *     });
+ *
+ * In this configuration we add three series to the chart. Each of these series is bound to the same
+ * categories field, `name` but bound to different properties for each category, `data1`, `data2` and
+ * `data3` respectively. All series display markers by having `showMarkers` enabled. The configuration
+ * for the markers of each series can be set by adding properties onto the markerConfig object.
+ * Finally we override some theme styling properties by adding properties to the `style` object.
+ *
+ * @xtype radar
+ */
+Ext.define('Ext.chart.series.Radar', {
+
+    /* Begin Definitions */
+
+    extend: 'Ext.chart.series.Series',
+
+    requires: ['Ext.chart.Shape', 'Ext.fx.Anim'],
+
+    /* End Definitions */
+
+    type: "radar",
+    alias: 'series.radar',
+
+
+    rad: Math.PI / 180,
+
+    showInLegend: false,
+
+    /**
+     * @cfg {Object} style
+     * An object containing styles for overriding series styles from Theming.
+     */
+    style: {},
+
+    constructor: function(config) {
+        this.callParent(arguments);
+        var me = this,
+            surface = me.chart.surface, i, l;
+        me.group = surface.getGroup(me.seriesId);
+        if (me.showMarkers) {
+            me.markerGroup = surface.getGroup(me.seriesId + '-markers');
+        }
+    },
+
+    /**
+     * Draws the series for the current chart.
+     */
+    drawSeries: function() {
+        var me = this,
+            store = me.chart.getChartStore(),
+            data = store.data.items,
+            d, record,
+            group = me.group,
+            sprite,
+            chart = me.chart,
+            seriesItems = chart.series.items,
+            s, sLen, series,
+            animate = chart.animate,
+            field = me.field || me.yField,
+            surface = chart.surface,
+            chartBBox = chart.chartBBox,
+            seriesIdx = me.seriesIdx,
+            colorArrayStyle = me.colorArrayStyle,
+            centerX, centerY,
+            items,
+            radius,
+            maxValue = 0,
+            fields = [],
+            max = Math.max,
+            cos = Math.cos,
+            sin = Math.sin,
+            pi2 = Math.PI * 2,
+            l = store.getCount(),
+            startPath, path, x, y, rho,
+            i, nfields,
+            seriesStyle = me.seriesStyle,
+            seriesLabelStyle = me.seriesLabelStyle,
+            first = chart.resizing || !me.radar,
+            axis = chart.axes && chart.axes.get(0),
+            aggregate = !(axis && axis.maximum);
+
+        me.setBBox();
+        
+        maxValue = aggregate? 0 : (axis.maximum || 0);
+        
+        Ext.apply(seriesStyle, me.style || {});
+
+        //if the store is empty then there's nothing to draw
+        if (!store || !store.getCount() || me.seriesIsHidden) {
+            me.hide();
+            me.items = [];
+            if (me.radar) {
+                me.radar.hide(true);
+            }
+            me.radar = null;
+            return;
+        }
+        
+        if(!seriesStyle['stroke']){
+            seriesStyle['stroke'] = colorArrayStyle[seriesIdx % colorArrayStyle.length];
+        }
+
+        me.unHighlightItem();
+        me.cleanHighlights();
+
+        centerX = me.centerX = chartBBox.x + (chartBBox.width / 2);
+        centerY = me.centerY = chartBBox.y + (chartBBox.height / 2);
+        me.radius = radius = Math.min(chartBBox.width, chartBBox.height) /2;
+        me.items = items = [];
+
+        if (aggregate) {
+            //get all renderer fields
+            for (s = 0, sLen = seriesItems.length; s < sLen; s++) {
+                series = seriesItems[s];
+                fields.push(series.yField);
+            }
+            //get maxValue to interpolate
+            for (d = 0; d < l; d++) {
+                record = data[d];
+                for (i = 0, nfields = fields.length; i < nfields; i++) {
+                    maxValue = max(+record.get(fields[i]), maxValue);
+                }
+            }
+        }
+        //ensure non-zero value.
+        maxValue = maxValue || 1;
+        //create path and items
+        startPath = []; path = [];
+        for (i = 0; i < l; i++) {
+            record = data[i];
+            rho = radius * record.get(field) / maxValue;
+            x = rho * cos(i / l * pi2);
+            y = rho * sin(i / l * pi2);
+            if (i == 0) {
+                path.push('M', x + centerX, y + centerY);
+                startPath.push('M', 0.01 * x + centerX, 0.01 * y + centerY);
+            } else {
+                path.push('L', x + centerX, y + centerY);
+                startPath.push('L', 0.01 * x + centerX, 0.01 * y + centerY);
+            }
+            items.push({
+                sprite: false, //TODO(nico): add markers
+                point: [centerX + x, centerY + y],
+                storeItem: record,
+                series: me
+            });
+        }
+        path.push('Z');
+        //create path sprite
+        if (!me.radar) {
+            me.radar = surface.add(Ext.apply({
+                type: 'path',
+                group: group,
+                path: startPath
+            }, seriesStyle || {}));
+        }
+        //reset on resizing
+        if (chart.resizing) {
+            me.radar.setAttributes({
+                path: startPath
+            }, true);
+        }
+        //render/animate
+        if (chart.animate) {
+            me.onAnimate(me.radar, {
+                to: Ext.apply({
+                    path: path
+                }, seriesStyle || {})
+            });
+        } else {
+            me.radar.setAttributes(Ext.apply({
+                path: path
+            }, seriesStyle || {}), true);
+        }
+        //render markers, labels and callouts
+        if (me.showMarkers) {
+            me.drawMarkers();
+        }
+        me.renderLabels();
+        me.renderCallouts();
+    },
+
+    // @private draws the markers for the lines (if any).
+    drawMarkers: function() {
+        var me = this,
+            chart = me.chart,
+            surface = chart.surface,
+            markerStyle = Ext.apply({}, me.markerStyle || {}),
+            endMarkerStyle = Ext.apply(markerStyle, me.markerConfig, {
+                fill: me.colorArrayStyle[me.seriesIdx % me.colorArrayStyle.length]
+            }),
+            items = me.items,
+            type = endMarkerStyle.type,
+            markerGroup = me.markerGroup,
+            centerX = me.centerX,
+            centerY = me.centerY,
+            item, i, l, marker;
+        delete endMarkerStyle.type;
+
+        for (i = 0, l = items.length; i < l; i++) {
+            item = items[i];
+            marker = markerGroup.getAt(i);
+            if (!marker) {
+                marker = Ext.chart.Shape[type](surface, Ext.apply({
+                    group: markerGroup,
+                    x: 0,
+                    y: 0,
+                    translate: {
+                        x: centerX,
+                        y: centerY
+                    }
+                }, endMarkerStyle));
+            }
+            else {
+                marker.show();
+            }
+            item.sprite = marker;
+            if (chart.resizing) {
+                marker.setAttributes({
+                    x: 0,
+                    y: 0,
+                    translate: {
+                        x: centerX,
+                        y: centerY
+                    }
+                }, true);
+            }
+            marker._to = {
+                translate: {
+                    x: item.point[0],
+                    y: item.point[1]
+                }
+            };
+            //render/animate
+            if (chart.animate) {
+                me.onAnimate(marker, {
+                    to: marker._to
+                });
+            }
+            else {
+                marker.setAttributes(Ext.apply(marker._to, endMarkerStyle || {}), true);
+            }
+        }
+    },
+
+    isItemInPoint: function(x, y, item) {
+        var point,
+            tolerance = 10,
+            abs = Math.abs;
+        point = item.point;
+        return (abs(point[0] - x) <= tolerance &&
+                abs(point[1] - y) <= tolerance);
+    },
+
+    // @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,
+            point = item.point,
+            endLabelStyle = Ext.apply(me.seriesLabelStyle || {}, config);
+
+        return me.chart.surface.add(Ext.apply({
+            'type': 'text',
+            'text-anchor': 'middle',
+            'group': group,
+            'x': centerX,
+            'y': centerY
+        }, config || {}));
+    },
+
+    // @private callback for when placing a label sprite.
+    onPlaceLabel: function(label, storeItem, item, i, display, animate) {
+        var me = this,
+            chart = me.chart,
+            resizing = chart.resizing,
+            config = me.label,
+            format = config.renderer,
+            field = config.field,
+            centerX = me.centerX,
+            centerY = me.centerY,
+            opt = {
+                x: item.point[0],
+                y: item.point[1]
+            },
+            x = opt.x - centerX,
+            y = opt.y - centerY;
+
+        label.setAttributes({
+            text: format(storeItem.get(field)),
+            hidden: true
+        },
+        true);
+
+        if (resizing) {
+            label.setAttributes({
+                x: centerX,
+                y: centerY
+            }, true);
+        }
+
+        if (animate) {
+            label.show(true);
+            me.onAnimate(label, {
+                to: opt
+            });
+        } else {
+            label.setAttributes(opt, true);
+            label.show(true);
+        }
+    },
+
+    // @private for toggling (show/hide) series.
+    toggleAll: function(show) {
+        var me = this,
+            i, ln, shadow, shadows;
+        if (!show) {
+            Ext.chart.series.Radar.superclass.hideAll.call(me);
+        }
+        else {
+            Ext.chart.series.Radar.superclass.showAll.call(me);
+        }
+        if (me.radar) {
+            me.radar.setAttributes({
+                hidden: !show
+            }, true);
+            //hide shadows too
+            if (me.radar.shadows) {
+                for (i = 0, shadows = me.radar.shadows, ln = shadows.length; i < ln; i++) {
+                    shadow = shadows[i];
+                    shadow.setAttributes({
+                        hidden: !show
+                    }, true);
+                }
+            }
+        }
+    },
+
+    // @private hide all elements in the series.
+    hideAll: function() {
+        this.toggleAll(false);
+        this.hideMarkers(0);
+    },
+
+    // @private show all elements in the series.
+    showAll: function() {
+        this.toggleAll(true);
+    },
+
+    // @private hide all markers that belong to `markerGroup`
+    hideMarkers: function(index) {
+        var me = this,
+            count = me.markerGroup && me.markerGroup.getCount() || 0,
+            i = index || 0;
+        for (; i < count; i++) {
+            me.markerGroup.getAt(i).hide(true);
+        }
+    }
+});
+

data/app/assets/javascripts/extjs-rails/src/chart/series/Scatter.js

@@ -0,0 +1,668 @@
+/**
+ * @class Ext.chart.series.Scatter
+ * @extends Ext.chart.series.Cartesian
+ *
+ * Creates a Scatter Chart. The scatter plot is useful when trying to display more than two variables in the same visualization.
+ * These variables can be mapped into x, y coordinates and also to an element's radius/size, color, etc.
+ * As with all other series, the Scatter Series must be appended in the *series* Chart array configuration. See the Chart
+ * documentation for more information on creating charts. A typical configuration object for the scatter could be:
+ *
+ *     @example
+ *     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,
+ *         theme:'Category2',
+ *         store: store,
+ *         axes: [{
+ *             type: 'Numeric',
+ *             position: 'left',
+ *             fields: ['data2', 'data3'],
+ *             title: 'Sample Values',
+ *             grid: true,
+ *             minimum: 0
+ *         }, {
+ *             type: 'Category',
+ *             position: 'bottom',
+ *             fields: ['name'],
+ *             title: 'Sample Metrics'
+ *         }],
+ *         series: [{
+ *             type: 'scatter',
+ *             markerConfig: {
+ *                 radius: 5,
+ *                 size: 5
+ *             },
+ *             axis: 'left',
+ *             xField: 'name',
+ *             yField: 'data2'
+ *         }, {
+ *             type: 'scatter',
+ *             markerConfig: {
+ *                 radius: 5,
+ *                 size: 5
+ *             },
+ *             axis: 'left',
+ *             xField: 'name',
+ *             yField: 'data3'
+ *         }]
+ *     });
+ *
+ * In this configuration we add three different categories of scatter series. Each of them is bound to a different field of the same data store,
+ * `data1`, `data2` and `data3` respectively. All x-fields for the series must be the same field, in this case `name`.
+ * Each scatter series has a different styling configuration for markers, specified by the `markerConfig` object. Finally we set the left axis as
+ * axis to show the current values of the elements.
+ *
+ * @xtype scatter
+ */
+Ext.define('Ext.chart.series.Scatter', {
+
+    /* Begin Definitions */
+
+    extend: 'Ext.chart.series.Cartesian',
+
+    requires: ['Ext.chart.axis.Axis', 'Ext.chart.Shape', 'Ext.fx.Anim'],
+
+    /* End Definitions */
+
+    type: 'scatter',
+    alias: 'series.scatter',
+
+    /**
+     * @cfg {Object} markerConfig
+     * The display style for the scatter series markers.
+     */
+
+    /**
+     * @cfg {Object} style
+     * Append styling properties to this object for it to override theme properties.
+     */
+    
+    /**
+     * @cfg {String/Array} axis
+     * The position of the axis to bind the values to. Possible values are 'left', 'bottom', 'top' and 'right'.
+     * You must explicitly set this value to bind the values of the line series to the ones in the axis, otherwise a
+     * relative scale will be used. If multiple axes are being used, they should both be specified in in the configuration.
+     */
+
+    constructor: function(config) {
+        this.callParent(arguments);
+        var me = this,
+            shadow = me.chart.shadow,
+            surface = me.chart.surface, i, l;
+        Ext.apply(me, config, {
+            style: {},
+            markerConfig: {},
+            shadowAttributes: [{
+                "stroke-width": 6,
+                "stroke-opacity": 0.05,
+                stroke: 'rgb(0, 0, 0)'
+            }, {
+                "stroke-width": 4,
+                "stroke-opacity": 0.1,
+                stroke: 'rgb(0, 0, 0)'
+            }, {
+                "stroke-width": 2,
+                "stroke-opacity": 0.15,
+                stroke: 'rgb(0, 0, 0)'
+            }]
+        });
+        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));
+            }
+        }
+    },
+
+    // @private Get chart and data boundaries
+    getBounds: function() {
+        var me = this,
+            chart = me.chart,
+            store = chart.getChartStore(),
+            chartAxes = chart.axes,
+            boundAxes = me.getAxesForXAndYFields(),
+            boundXAxis = boundAxes.xAxis,
+            boundYAxis = boundAxes.yAxis,
+            bbox, xScale, yScale, ln, minX, minY, maxX, maxY, i, axis, ends;
+
+        me.setBBox();
+        bbox = me.bbox;
+
+        if (axis = chartAxes.get(boundXAxis)) {
+            ends = axis.applyData();
+            minX = ends.from;
+            maxX = ends.to;
+        }
+
+        if (axis = chartAxes.get(boundYAxis)) {
+            ends = axis.applyData();
+            minY = ends.from;
+            maxY = ends.to;
+        }
+
+        // If a field was specified without a corresponding axis, create one to get bounds
+        if (me.xField && !Ext.isNumber(minX)) {
+            axis = me.getMinMaxXValues();
+            minX = axis[0];
+            maxX = axis[1];
+        }
+
+        if (me.yField && !Ext.isNumber(minY)) {
+            axis = me.getMinMaxYValues();
+            minY = axis[0];
+            maxY = axis[1];
+        }
+
+        if (isNaN(minX)) {
+            minX = 0;
+            maxX = store.getCount() - 1;
+            xScale = bbox.width / (store.getCount() - 1);
+        }
+        else {
+            xScale = bbox.width / (maxX - minX);
+        }
+
+        if (isNaN(minY)) {
+            minY = 0;
+            maxY = store.getCount() - 1;
+            yScale = bbox.height / (store.getCount() - 1);
+        }
+        else {
+            yScale = bbox.height / (maxY - minY);
+        }
+
+        return {
+            bbox: bbox,
+            minX: minX,
+            minY: minY,
+            xScale: xScale,
+            yScale: yScale
+        };
+    },
+
+    // @private Build an array of paths for the chart
+    getPaths: function() {
+        var me = this,
+            chart = me.chart,
+            enableShadows = chart.shadow,
+            store = chart.getChartStore(),
+            data = store.data.items,
+            i, ln, record,
+            group = me.group,
+            bounds = me.bounds = me.getBounds(),
+            bbox = me.bbox,
+            xScale = bounds.xScale,
+            yScale = bounds.yScale,
+            minX = bounds.minX,
+            minY = bounds.minY,
+            boxX = bbox.x,
+            boxY = bbox.y,
+            boxHeight = bbox.height,
+            items = me.items = [],
+            attrs = [],
+            x, y, xValue, yValue, sprite;
+
+        for (i = 0, ln = data.length; i < ln; i++) {
+            record = data[i];
+            xValue = record.get(me.xField);
+            yValue = record.get(me.yField);
+            //skip undefined or null values
+            if (typeof yValue == 'undefined' || (typeof yValue == 'string' && !yValue)
+                || xValue == null || yValue == null) {
+                //<debug warn>
+                if (Ext.isDefined(Ext.global.console)) {
+                    Ext.global.console.warn("[Ext.chart.series.Scatter]  Skipping a store element with a value which is either undefined or null  at ", record, xValue, yValue);
+                }
+                //</debug>
+                continue;
+            }
+            // Ensure a value
+            if (typeof xValue == 'string' || typeof xValue == 'object' && !Ext.isDate(xValue)) {
+                xValue = i;
+            }
+            if (typeof yValue == 'string' || typeof yValue == 'object' && !Ext.isDate(yValue)) {
+                yValue = i;
+            }
+            x = boxX + (xValue - minX) * xScale;
+            y = boxY + boxHeight - (yValue - minY) * yScale;
+            attrs.push({
+                x: x,
+                y: y
+            });
+
+            me.items.push({
+                series: me,
+                value: [xValue, yValue],
+                point: [x, y],
+                storeItem: record
+            });
+
+            // When resizing, reset before animating
+            if (chart.animate && chart.resizing) {
+                sprite = group.getAt(i);
+                if (sprite) {
+                    me.resetPoint(sprite);
+                    if (enableShadows) {
+                        me.resetShadow(sprite);
+                    }
+                }
+            }
+        }
+        return attrs;
+    },
+
+    // @private translate point to the center
+    resetPoint: function(sprite) {
+        var bbox = this.bbox;
+        sprite.setAttributes({
+            translate: {
+                x: (bbox.x + bbox.width) / 2,
+                y: (bbox.y + bbox.height) / 2
+            }
+        }, true);
+    },
+
+    // @private translate shadows of a sprite to the center
+    resetShadow: function(sprite) {
+        var me = this,
+            shadows = sprite.shadows,
+            shadowAttributes = me.shadowAttributes,
+            ln = me.shadowGroups.length,
+            bbox = me.bbox,
+            i, attr;
+        for (i = 0; i < ln; i++) {
+            attr = Ext.apply({}, shadowAttributes[i]);
+            // TODO: fix this with setAttributes
+            if (attr.translate) {
+                attr.translate.x += (bbox.x + bbox.width) / 2;
+                attr.translate.y += (bbox.y + bbox.height) / 2;
+            }
+            else {
+                attr.translate = {
+                    x: (bbox.x + bbox.width) / 2,
+                    y: (bbox.y + bbox.height) / 2
+                };
+            }
+            shadows[i].setAttributes(attr, true);
+        }
+    },
+
+    // @private create a new point
+    createPoint: function(attr, type) {
+        var me = this,
+            chart = me.chart,
+            group = me.group,
+            bbox = me.bbox;
+
+        return Ext.chart.Shape[type](chart.surface, Ext.apply({}, {
+            x: 0,
+            y: 0,
+            group: group,
+            translate: {
+                x: (bbox.x + bbox.width) / 2,
+                y: (bbox.y + bbox.height) / 2
+            }
+        }, attr));
+    },
+
+    // @private create a new set of shadows for a sprite
+    createShadow: function(sprite, endMarkerStyle, type) {
+        var me = this,
+            chart = me.chart,
+            shadowGroups = me.shadowGroups,
+            shadowAttributes = me.shadowAttributes,
+            lnsh = shadowGroups.length,
+            bbox = me.bbox,
+            i, shadow, shadows, attr;
+
+        sprite.shadows = shadows = [];
+
+        for (i = 0; i < lnsh; i++) {
+            attr = Ext.apply({}, shadowAttributes[i]);
+            if (attr.translate) {
+                attr.translate.x += (bbox.x + bbox.width) / 2;
+                attr.translate.y += (bbox.y + bbox.height) / 2;
+            }
+            else {
+                Ext.apply(attr, {
+                    translate: {
+                        x: (bbox.x + bbox.width) / 2,
+                        y: (bbox.y + bbox.height) / 2
+                    }
+                });
+            }
+            Ext.apply(attr, endMarkerStyle);
+            shadow = Ext.chart.Shape[type](chart.surface, Ext.apply({}, {
+                x: 0,
+                y: 0,
+                group: shadowGroups[i]
+            }, attr));
+            shadows.push(shadow);
+        }
+    },
+
+    /**
+     * Draws the series for the current chart.
+     */
+    drawSeries: function() {
+        var me = this,
+            chart = me.chart,
+            store = chart.getChartStore(),
+            group = me.group,
+            enableShadows = chart.shadow,
+            shadowGroups = me.shadowGroups,
+            shadowAttributes = me.shadowAttributes,
+            lnsh = shadowGroups.length,
+            sprite, attrs, attr, ln, i, endMarkerStyle, shindex, type, shadows,
+            rendererAttributes, shadowAttribute;
+
+        endMarkerStyle = Ext.apply(me.markerStyle, me.markerConfig);
+        type = endMarkerStyle.type;
+        delete endMarkerStyle.type;
+
+        //if the store is empty then there's nothing to be rendered
+        if (!store || !store.getCount()) {
+            me.hide();
+            me.items = [];
+            return;
+        }
+
+
+        me.unHighlightItem();
+        me.cleanHighlights();
+
+        attrs = me.getPaths();
+        ln = attrs.length;
+        for (i = 0; i < ln; i++) {
+            attr = attrs[i];
+            sprite = group.getAt(i);
+            Ext.apply(attr, endMarkerStyle);
+
+            // Create a new sprite if needed (no height)
+            if (!sprite) {
+                sprite = me.createPoint(attr, type);
+                if (enableShadows) {
+                    me.createShadow(sprite, endMarkerStyle, type);
+                }
+            }
+
+            shadows = sprite.shadows;
+            if (chart.animate) {
+                rendererAttributes = me.renderer(sprite, store.getAt(i), { translate: attr }, i, store);
+                sprite._to = rendererAttributes;
+                me.onAnimate(sprite, {
+                    to: rendererAttributes
+                });
+                //animate shadows
+                for (shindex = 0; shindex < lnsh; shindex++) {
+                    shadowAttribute = Ext.apply({}, shadowAttributes[shindex]);
+                    rendererAttributes = me.renderer(shadows[shindex], store.getAt(i), Ext.apply({}, { 
+                        hidden: false,
+                        translate: {
+                            x: attr.x + (shadowAttribute.translate? shadowAttribute.translate.x : 0),
+                            y: attr.y + (shadowAttribute.translate? shadowAttribute.translate.y : 0)
+                        }
+                    }, shadowAttribute), i, store);
+                    me.onAnimate(shadows[shindex], { to: rendererAttributes });
+                }
+            }
+            else {
+                rendererAttributes = me.renderer(sprite, store.getAt(i), { translate: attr }, i, store);
+                sprite._to = rendererAttributes;
+                sprite.setAttributes(rendererAttributes, true);
+                //animate shadows
+                for (shindex = 0; shindex < lnsh; shindex++) {
+                    shadowAttribute = Ext.apply({}, shadowAttributes[shindex]);
+                    rendererAttributes = me.renderer(shadows[shindex], store.getAt(i), Ext.apply({}, { 
+                        hidden: false,
+                        translate: {
+                            x: attr.x + (shadowAttribute.translate? shadowAttribute.translate.x : 0),
+                            y: attr.y + (shadowAttribute.translate? shadowAttribute.translate.y : 0)
+                        } 
+                    }, shadowAttribute), i, store);
+                    shadows[shindex].setAttributes(rendererAttributes, true);
+                }
+            }
+            me.items[i].sprite = sprite;
+        }
+
+        // Hide unused sprites
+        ln = group.getCount();
+        for (i = attrs.length; i < ln; i++) {
+            group.getAt(i).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,
+            endLabelStyle = Ext.apply({}, config, me.seriesLabelStyle),
+            bbox = me.bbox;
+
+        return me.chart.surface.add(Ext.apply({
+            type: 'text',
+            group: group,
+            x: item.point[0],
+            y: bbox.y + bbox.height / 2
+        }, endLabelStyle));
+    },
+
+    // @private callback for when placing a label sprite.
+    onPlaceLabel: function(label, storeItem, item, i, display, animate) {
+        var me = this,
+            chart = me.chart,
+            resizing = chart.resizing,
+            config = me.label,
+            format = config.renderer,
+            field = config.field,
+            bbox = me.bbox,
+            x = item.point[0],
+            y = item.point[1],
+            radius = item.sprite.attr.radius,
+            bb, width, height, anim;
+
+        label.setAttributes({
+            text: format(storeItem.get(field)),
+            hidden: true
+        }, true);
+
+        if (display == 'rotate') {
+            label.setAttributes({
+                'text-anchor': 'start',
+                'rotation': {
+                    x: x,
+                    y: y,
+                    degrees: -45
+                }
+            }, true);
+            //correct label position to fit into the box
+            bb = label.getBBox();
+            width = bb.width;
+            height = bb.height;
+            x = x < bbox.x? bbox.x : x;
+            x = (x + width > bbox.x + bbox.width)? (x - (x + width - bbox.x - bbox.width)) : x;
+            y = (y - height < bbox.y)? bbox.y + height : y;
+
+        } else if (display == 'under' || display == 'over') {
+            //TODO(nicolas): find out why width/height values in circle bounding boxes are undefined.
+            bb = item.sprite.getBBox();
+            bb.width = bb.width || (radius * 2);
+            bb.height = bb.height || (radius * 2);
+            y = y + (display == 'over'? -bb.height : bb.height);
+            //correct label position to fit into the box
+            bb = label.getBBox();
+            width = bb.width/2;
+            height = bb.height/2;
+            x = x - width < bbox.x ? bbox.x + width : x;
+            x = (x + width > bbox.x + bbox.width) ? (x - (x + width - bbox.x - bbox.width)) : x;
+            y = y - height < bbox.y? bbox.y + height : y;
+            y = (y + height > bbox.y + bbox.height) ? (y - (y + height - bbox.y - bbox.height)) : y;
+        }
+
+        if (!chart.animate) {
+            label.setAttributes({
+                x: x,
+                y: y
+            }, true);
+            label.show(true);
+        }
+        else {
+            if (resizing) {
+                anim = item.sprite.getActiveAnimation();
+                if (anim) {
+                    anim.on('afteranimate', function() {
+                        label.setAttributes({
+                            x: x,
+                            y: y
+                        }, true);
+                        label.show(true);
+                    });
+                }
+                else {
+                    label.show(true);
+                }
+            }
+            else {
+                me.onAnimate(label, {
+                    to: {
+                        x: x,
+                        y: y
+                    }
+                });
+            }
+        }
+    },
+
+    // @private callback for when placing a callout sprite.
+    onPlaceCallout: function(callout, storeItem, item, i, display, animate, index) {
+        var me = this,
+            chart = me.chart,
+            surface = chart.surface,
+            resizing = chart.resizing,
+            config = me.callouts,
+            items = me.items,
+            cur = item.point,
+            normal,
+            bbox = callout.label.getBBox(),
+            offsetFromViz = 30,
+            offsetToSide = 10,
+            offsetBox = 3,
+            boxx, boxy, boxw, boxh,
+            p, clipRect = me.bbox,
+            x, y;
+
+        //position
+        normal = [Math.cos(Math.PI /4), -Math.sin(Math.PI /4)];
+        x = cur[0] + normal[0] * offsetFromViz;
+        y = cur[1] + normal[1] * offsetFromViz;
+
+        //box position and dimensions
+        boxx = x + (normal[0] > 0? 0 : -(bbox.width + 2 * offsetBox));
+        boxy = y - bbox.height /2 - offsetBox;
+        boxw = bbox.width + 2 * offsetBox;
+        boxh = bbox.height + 2 * offsetBox;
+
+        //now check if we're out of bounds and invert the normal vector correspondingly
+        //this may add new overlaps between labels (but labels won't be out of bounds).
+        if (boxx < clipRect[0] || (boxx + boxw) > (clipRect[0] + clipRect[2])) {
+            normal[0] *= -1;
+        }
+        if (boxy < clipRect[1] || (boxy + boxh) > (clipRect[1] + clipRect[3])) {
+            normal[1] *= -1;
+        }
+
+        //update positions
+        x = cur[0] + normal[0] * offsetFromViz;
+        y = cur[1] + normal[1] * offsetFromViz;
+
+        //update box position and dimensions
+        boxx = x + (normal[0] > 0? 0 : -(bbox.width + 2 * offsetBox));
+        boxy = y - bbox.height /2 - offsetBox;
+        boxw = bbox.width + 2 * offsetBox;
+        boxh = bbox.height + 2 * offsetBox;
+
+        if (chart.animate) {
+            //set the line from the middle of the pie to the box.
+            me.onAnimate(callout.lines, {
+                to: {
+                    path: ["M", cur[0], cur[1], "L", x, y, "Z"]
+                }
+            }, true);
+            //set box position
+            me.onAnimate(callout.box, {
+                to: {
+                    x: boxx,
+                    y: boxy,
+                    width: boxw,
+                    height: boxh
+                }
+            }, true);
+            //set text position
+            me.onAnimate(callout.label, {
+                to: {
+                    x: x + (normal[0] > 0? offsetBox : -(bbox.width + offsetBox)),
+                    y: y
+                }
+            }, true);
+        } else {
+            //set the line from the middle of the pie to the box.
+            callout.lines.setAttributes({
+                path: ["M", cur[0], cur[1], "L", x, y, "Z"]
+            }, true);
+            //set box position
+            callout.box.setAttributes({
+                x: boxx,
+                y: boxy,
+                width: boxw,
+                height: boxh
+            }, true);
+            //set text position
+            callout.label.setAttributes({
+                x: x + (normal[0] > 0? offsetBox : -(bbox.width + offsetBox)),
+                y: y
+            }, 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) {
+        var point,
+            tolerance = 10,
+            abs = Math.abs;
+
+        function dist(point) {
+            var dx = abs(point[0] - x),
+                dy = abs(point[1] - y);
+            return Math.sqrt(dx * dx + dy * dy);
+        }
+        point = item.point;
+        return (point[0] - tolerance <= x && point[0] + tolerance >= x &&
+            point[1] - tolerance <= y && point[1] + tolerance >= y);
+    }
+});
+