extjs-rails 4.1.0.alpha1

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

@@ -0,0 +1,328 @@
+/**
+ * @class Ext.chart.series.Cartesian
+ *
+ * Common base class for series implementations which plot values using x/y coordinates.
+ */
+Ext.define('Ext.chart.series.Cartesian', {
+
+    /* Begin Definitions */
+
+    extend: 'Ext.chart.series.Series',
+
+    alternateClassName: ['Ext.chart.CartesianSeries', 'Ext.chart.CartesianChart'],
+
+    /* End Definitions */
+
+    /**
+     * The field used to access the x axis value from the items from the data
+     * source.
+     *
+     * @cfg xField
+     * @type String
+     */
+    xField: null,
+
+    /**
+     * The field used to access the y-axis value from the items from the data
+     * source.
+     *
+     * @cfg yField
+     * @type String
+     */
+    yField: null,
+
+    /**
+     * @cfg {String/String[]} 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. For example, if you're using a Scatter or Line series and you'd like to have the
+     * values in the chart relative to the bottom and left axes then `axis` should be `['left', 'bottom']`.
+     */
+    axis: 'left',
+
+    getLegendLabels: function() {
+        var me = this,
+            labels = [],
+            fields, i, ln,
+            combinations = me.combinations,
+            title,
+            combo, label0, label1;
+
+        fields = [].concat(me.yField);
+        for (i = 0, ln = fields.length; i < ln; i++) {
+            title = me.title;
+            // Use the 'title' config if present, otherwise use the raw yField name
+            labels.push((Ext.isArray(title) ? title[i] : title) || fields[i]);
+        }
+
+        // Handle yFields combined via legend drag-drop
+        // TODO need to check to see if this is supported in extjs 4 branch
+        if (combinations) {
+            combinations = Ext.Array.from(combinations);
+            for (i = 0, ln = combinations.length; i < ln; i++) {
+                combo = combinations[i];
+                label0 = labels[combo[0]];
+                label1 = labels[combo[1]];
+                labels[combo[1]] = label0 + ' & ' + label1;
+                labels.splice(combo[0], 1);
+            }
+        }
+
+        return labels;
+    },
+
+    /**
+     * @protected Iterates over a given record's values for each of this series's yFields,
+     * executing a given function for each value. Any yFields that have been combined
+     * via legend drag-drop will be treated as a single value.
+     * @param {Ext.data.Model} record
+     * @param {Function} fn
+     * @param {Object} scope
+     */
+    eachYValue: function(record, fn, scope) {
+        var me = this,
+            yValueAccessors = me.getYValueAccessors(),
+            i, ln, accessor;
+        
+        for (i = 0, ln = yValueAccessors.length; i < ln; i++) {
+            accessor = yValueAccessors[i];
+            fn.call(scope, accessor(record), i);
+        }
+    },
+
+    /**
+     * @protected Returns the number of yField values, taking into account fields combined
+     * via legend drag-drop.
+     * @return {Number}
+     */
+    getYValueCount: function() {
+        return this.getYValueAccessors().length;
+    },
+
+    combine: function(index1, index2) {
+        var me = this,
+            accessors = me.getYValueAccessors(),
+            accessor1 = accessors[index1],
+            accessor2 = accessors[index2];
+
+        // Combine the yValue accessors for the two indexes into a single accessor that returns their sum
+        accessors[index2] = function(record) {
+            return accessor1(record) + accessor2(record);
+        };
+        accessors.splice(index1, 1);
+
+        me.callParent([index1, index2]);
+    },
+
+    clearCombinations: function() {
+        // Clear combined accessors, they'll get regenerated on next call to getYValueAccessors
+        delete this.yValueAccessors;
+        this.callParent();
+    },
+
+    /**
+     * @protected Returns an array of functions, each of which returns the value of the yField
+     * corresponding to function's index in the array, for a given record (each function takes the
+     * record as its only argument.) If yFields have been combined by the user via legend drag-drop,
+     * this list of accessors will be kept in sync with those combinations.
+     * @return {Array} array of accessor functions
+     */
+    getYValueAccessors: function() {
+        var me = this,
+            accessors = me.yValueAccessors,
+            yFields, yField, i, ln;
+        if (!accessors) {
+            accessors = me.yValueAccessors = [];
+            yFields = [].concat(me.yField);
+            
+            for (i = 0, ln = yFields.length; i < ln; i++) {
+                yField = yFields[i];
+                accessors.push(function(record) {
+                    return record.get(yField);
+                });
+            }
+        }
+        return accessors;
+    },
+
+    /**
+     * Calculate the min and max values for this series's xField.
+     * @return {Array} [min, max]
+     */
+    getMinMaxXValues: function() {
+        var me = this,
+            chart = me.chart,
+            store = chart.getChartStore(),
+            data = store.data.items,
+            i, ln, record,
+            min, max,
+            xField = me.xField,
+            xValue;
+
+        if (me.getRecordCount() > 0) {
+            min = Infinity;
+            max = -min;
+                
+            for (i = 0, ln = data.length; i < ln; i++) {
+                record = data[i];
+                xValue = record.get(xField);
+                if (xValue > max) {
+                    max = xValue;
+                }
+                if (xValue < min) {
+                    min = xValue;
+                }
+            }
+        } else {
+            min = max = 0;
+        }
+        return [min, max];
+    },
+
+    /**
+     * Calculate the min and max values for this series's yField(s). Takes into account yField
+     * combinations, exclusions, and stacking.
+     * @return {Array} [min, max]
+     */
+    getMinMaxYValues: function() {
+        var me = this,
+            chart = me.chart,
+            store = chart.getChartStore(),
+            data = store.data.items,
+            i, ln, record,
+            stacked = me.stacked,
+            min, max,
+            positiveTotal, negativeTotal;
+
+        function eachYValueStacked(yValue, i) {
+            if (!me.isExcluded(i)) {
+                if (yValue < 0) {
+                    negativeTotal += yValue;
+                } else {
+                    positiveTotal += yValue;
+                }
+            }
+        }
+
+        function eachYValue(yValue, i) {
+            if (!me.isExcluded(i)) {
+                if (yValue > max) {
+                    max = yValue;
+                }
+                if (yValue < min) {
+                    min = yValue;
+                }
+            }
+        }
+
+        if (me.getRecordCount() > 0) {
+            min = Infinity;
+            max = -min;
+            
+            for (i = 0, ln = data.length; i < ln; i++) {
+                record = data[i];
+                if (stacked) {
+                    positiveTotal = 0;
+                    negativeTotal = 0;
+                    me.eachYValue(record, eachYValueStacked);
+                    if (positiveTotal > max) {
+                        max = positiveTotal;
+                    }
+                    if (negativeTotal < min) {
+                        min = negativeTotal;
+                    }
+                } else {
+                    me.eachYValue(record, eachYValue);
+                }
+            }
+        } else {
+            min = max = 0;
+        }
+        return [min, max];
+    },
+
+    getAxesForXAndYFields: function() {
+        var me = this,
+            axes = me.chart.axes,
+            axis = [].concat(me.axis),
+            yFields = {}, yFieldList = [].concat(me.yField),
+            xFields = {}, xFieldList = [].concat(me.xField),
+            fields, xAxis, yAxis, i, ln, flipXY;
+
+        
+        flipXY = me.type === 'bar' && me.column === false;
+        if(flipXY) {
+            fields = yFieldList;
+            yFieldList = xFieldList;
+            xFieldList = fields;
+        }
+        if (Ext.Array.indexOf(axis, 'top') > -1) {
+            xAxis = 'top';
+        } else if (Ext.Array.indexOf(axis, 'bottom') > -1) {
+            xAxis = 'bottom';
+        } else {
+            if (axes.get('top') && axes.get('bottom')) {
+                for (i = 0, ln = xFieldList.length; i < ln; i++) {
+                    xFields[xFieldList[i]] = true;
+                }
+                fields = [].concat(axes.get('bottom').fields);
+                for (i = 0, ln = fields.length; i < ln; i++) {
+                    if (xFields[fields[i]]) {
+                        xAxis = 'bottom';
+                        break
+                    }
+                }
+                fields = [].concat(axes.get('top').fields);
+                for (i = 0, ln = fields.length; i < ln; i++) {
+                    if (xFields[fields[i]]) {
+                        xAxis = 'top';
+                        break
+                    }
+                }
+            } else if (axes.get('top')) {
+                xAxis = 'top';
+            } else if (axes.get('bottom')) {
+                xAxis = 'bottom';
+            }
+        }
+        if (Ext.Array.indexOf(axis, 'left') > -1) {
+            yAxis = 'left';
+        } else if (Ext.Array.indexOf(axis, 'right') > -1) {
+            yAxis = 'right';
+        } else {
+            if (axes.get('left') && axes.get('right')) {
+                for (i = 0, ln = yFieldList.length; i < ln; i++) {
+                    yFields[yFieldList[i]] = true;
+                }
+                fields = [].concat(axes.get('right').fields);
+                for (i = 0, ln = fields.length; i < ln; i++) {
+                    if (yFields[fields[i]]) {
+
+                        break
+                    }
+                }
+                fields = [].concat(axes.get('left').fields);
+                for (i = 0, ln = fields.length; i < ln; i++) {
+                    if (yFields[fields[i]]) {
+                        yAxis = 'left';
+                        break
+                    }
+                }
+            } else if (axes.get('left')) {
+                yAxis = 'left';
+            } else if (axes.get('right')) {
+                yAxis = 'right';
+            }
+        }
+
+        return flipXY ? {
+            xAxis: yAxis,
+            yAxis: xAxis
+        }: {
+            xAxis: xAxis,
+            yAxis: yAxis
+        };
+    }
+
+
+});

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

@@ -0,0 +1,104 @@
+/**
+ * @class Ext.chart.series.Column
+ *
+ * Creates a Column Chart. Much of the methods are inherited from Bar. A Column Chart is a useful
+ * visualization technique to display quantitative information for different categories that can
+ * show some progression (or regression) in the data set. As with all other series, the Column Series
+ * must be appended in the *series* Chart array configuration. See the Chart documentation for more
+ * information. A typical configuration object for the column series could be:
+ *
+ *     @example
+ *     var store = Ext.create('Ext.data.JsonStore', {
+ *         fields: ['name', 'data'],
+ *         data: [
+ *             { 'name': 'metric one',   'data':10 },
+ *             { 'name': 'metric two',   'data': 7 },
+ *             { 'name': 'metric three', 'data': 5 },
+ *             { 'name': 'metric four',  'data': 2 },
+ *             { 'name': 'metric five',  'data':27 }
+ *         ]
+ *     });
+ *
+ *     Ext.create('Ext.chart.Chart', {
+ *         renderTo: Ext.getBody(),
+ *         width: 500,
+ *         height: 300,
+ *         animate: true,
+ *         store: store,
+ *         axes: [
+ *             {
+ *                 type: 'Numeric',
+ *                 position: 'left',
+ *                 fields: ['data'],
+ *                 label: {
+ *                     renderer: Ext.util.Format.numberRenderer('0,0')
+ *                 },
+ *                 title: 'Sample Values',
+ *                 grid: true,
+ *                 minimum: 0
+ *             },
+ *             {
+ *                 type: 'Category',
+ *                 position: 'bottom',
+ *                 fields: ['name'],
+ *                 title: 'Sample Metrics'
+ *             }
+ *         ],
+ *         series: [
+ *             {
+ *                 type: 'column',
+ *                 axis: 'left',
+ *                 highlight: true,
+ *                 tips: {
+ *                   trackMouse: true,
+ *                   width: 140,
+ *                   height: 28,
+ *                   renderer: function(storeItem, item) {
+ *                     this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' $');
+ *                   }
+ *                 },
+ *                 label: {
+ *                   display: 'insideEnd',
+ *                   'text-anchor': 'middle',
+ *                     field: 'data',
+ *                     renderer: Ext.util.Format.numberRenderer('0'),
+ *                     orientation: 'vertical',
+ *                     color: '#333'
+ *                 },
+ *                 xField: 'name',
+ *                 yField: 'data'
+ *             }
+ *         ]
+ *     });
+ *
+ * In this configuration we set `column` as the series type, bind the values of the bars to the bottom axis,
+ * set `highlight` to true so that bars are smoothly highlighted when hovered and bind the `xField` or category
+ * field to the data store `name` property and the `yField` as the data1 property of a store element.
+ */
+Ext.define('Ext.chart.series.Column', {
+
+    /* Begin Definitions */
+
+    alternateClassName: ['Ext.chart.ColumnSeries', 'Ext.chart.ColumnChart', 'Ext.chart.StackedColumnChart'],
+
+    extend: 'Ext.chart.series.Bar',
+
+    /* End Definitions */
+
+    type: 'column',
+    alias: 'series.column',
+
+    column: true,
+
+    /**
+     * @cfg {Number} xPadding
+     * Padding between the left/right axes and the bars
+     */
+    xPadding: 10,
+
+    /**
+     * @cfg {Number} yPadding
+     * Padding between the top/bottom axes and the bars
+     */
+    yPadding: 0
+});

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

@@ -0,0 +1,490 @@
+/**
+ * @class Ext.chart.series.Gauge
+ * 
+ * Creates a Gauge Chart. Gauge Charts are used to show progress in a certain variable. There are two ways of using the Gauge chart.
+ * One is setting a store element into the Gauge and selecting the field to be used from that store. Another one is instantiating the
+ * visualization and using the `setValue` method to adjust the value you want.
+ *
+ * An example of Gauge visualization:
+ *
+ *     @example
+ *     var store = Ext.create('Ext.data.JsonStore', {
+ *         fields: ['data'],
+ *         data: [
+ *             { 'value':80 }
+ *         ]
+ *     });
+ *
+ *     Ext.create('Ext.chart.Chart', {
+ *         renderTo: Ext.getBody(),
+ *         store: store,
+ *         width: 400,
+ *         height: 250,
+ *         animate: true,
+ *         insetPadding: 30,
+ *         axes: [{
+ *             type: 'gauge',
+ *             position: 'gauge',
+ *             minimum: 0,
+ *             maximum: 100,
+ *             steps: 10,
+ *             margin: 10
+ *         }],
+ *         series: [{
+ *             type: 'gauge',
+ *             field: 'value',
+ *             donut: 30,
+ *             colorSet: ['#F49D10', '#ddd']
+ *         }]
+ *     });
+ *
+ *     Ext.widget("button", {
+ *         renderTo: Ext.getBody(),
+ *         text: "Refresh",
+ *         handler: function() {
+ *             store.getAt(0).set('value', Math.round(Math.random()*100));
+ *         }
+ *     });
+ * 
+ * In this example we create a special Gauge axis to be used with the gauge visualization (describing half-circle markers), and also we're
+ * setting a maximum, minimum and steps configuration options into the axis. The Gauge series configuration contains the store field to be bound to
+ * the visual display and the color set to be used with the visualization.
+ * 
+ * @xtype gauge
+ */
+Ext.define('Ext.chart.series.Gauge', {
+
+    /* Begin Definitions */
+
+    extend: 'Ext.chart.series.Series',
+
+    /* End Definitions */
+
+    type: "gauge",
+    alias: 'series.gauge',
+
+    rad: Math.PI / 180,
+
+    /**
+     * @cfg {Number} highlightDuration
+     * The duration for the pie slice highlight effect.
+     */
+    highlightDuration: 150,
+
+    /**
+     * @cfg {String} angleField (required)
+     * The store record field name to be used for the pie angles.
+     * The values bound to this field name must be positive real numbers.
+     */
+    angleField: false,
+
+    /**
+     * @cfg {Boolean} needle
+     * Use the Gauge Series as an area series or add a needle to it. Default's false.
+     */
+    needle: false,
+    
+    /**
+     * @cfg {Boolean/Number} donut
+     * Use the entire disk or just a fraction of it for the gauge. Default's false.
+     */
+    donut: false,
+
+    /**
+     * @cfg {Boolean} showInLegend
+     * Whether to add the pie chart elements as legend items. Default's false.
+     */
+    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,
+            chart = me.chart,
+            surface = chart.surface,
+            store = chart.store,
+            shadow = chart.shadow, i, l, cfg;
+        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.getChartStore(),
+            data = store.data.items,
+            i, ln, rec;
+        //Add yFields to be used in Legend.js
+        me.yField = [];
+        if (me.label.field) {
+            for (i = 0, ln = data.length; i < ln; i++) {
+                rec = data[i];
+                me.yField.push(rec.get(me.label.field));
+            }
+        }
+    },
+
+    // @private returns an object with properties for a Slice
+    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,
+            radius = Math.max(('rho' in slice) ? slice.rho: me.radius, me.label.minMargin),
+            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,
+            chart = me.chart,
+            store = chart.getChartStore(),
+            group = me.group,
+            animate = me.chart.animate,
+            axis = me.chart.axes.get(0),
+            minimum = axis && axis.minimum || me.minimum || 0,
+            maximum = axis && axis.maximum || me.maximum || 0,
+            field = me.angleField || me.field || me.xField,
+            surface = chart.surface,
+            chartBBox = chart.chartBBox,
+            rad = me.rad,
+            donut = +me.donut,
+            values = {},
+            items = [],
+            seriesStyle = me.seriesStyle,
+            seriesLabelStyle = me.seriesLabelStyle,
+            colorArrayStyle = me.colorArrayStyle,
+            colorArrayLength = colorArrayStyle && colorArrayStyle.length || 0,
+            gutterX = chart.maxGutter[0],
+            gutterY = chart.maxGutter[1],
+            cos = Math.cos,
+            sin = Math.sin,
+            rendererAttributes, centerX, centerY, slice, slices, sprite, value,
+            item, ln, record, i, j, startAngle, endAngle, middleAngle, sliceLength, path,
+            p, spriteOptions, bbox, splitAngle, sliceA, sliceB;
+        
+        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() || me.seriesIsHidden) {
+            me.hide();
+            me.items = [];
+            return;
+        }
+        
+        centerX = me.centerX = chartBBox.x + (chartBBox.width / 2);
+        centerY = me.centerY = chartBBox.y + chartBBox.height;
+        me.radius = Math.min(centerX - chartBBox.x, centerY - chartBBox.y);
+        me.slices = slices = [];
+        me.items = items = [];
+        
+        if (!me.value) {
+            record = store.getAt(0);
+            me.value = record.get(field);
+        }
+        
+        value = me.value;
+        if (me.needle) {
+            sliceA = {
+                series: me,
+                value: value,
+                startAngle: -180,
+                endAngle: 0,
+                rho: me.radius
+            };
+            splitAngle = -180 * (1 - (value - minimum) / (maximum - minimum));
+            slices.push(sliceA);
+        } else {
+            splitAngle = -180 * (1 - (value - minimum) / (maximum - minimum));
+            sliceA = {
+                series: me,
+                value: value,
+                startAngle: -180,
+                endAngle: splitAngle,
+                rho: me.radius
+            };
+            sliceB = {
+                series: me,
+                value: me.maximum - value,
+                startAngle: splitAngle,
+                endAngle: 0,
+                rho: me.radius
+            };
+            slices.push(sliceA, sliceB);
+        }
+        
+        //do pie slices after.
+        for (i = 0, ln = slices.length; i < ln; i++) {
+            slice = slices[i];
+            sprite = group.getAt(i);
+            //set pie slice properties
+            rendererAttributes = Ext.apply({
+                segment: {
+                    startAngle: slice.startAngle,
+                    endAngle: slice.endAngle,
+                    margin: 0,
+                    rho: slice.rho,
+                    startRho: slice.rho * +donut / 100,
+                    endRho: slice.rho
+                } 
+            }, Ext.apply(seriesStyle, colorArrayStyle && { fill: colorArrayStyle[i % colorArrayLength] } || {}));
+
+            item = Ext.apply({},
+            rendererAttributes.segment, {
+                slice: slice,
+                series: me,
+                storeItem: record,
+                index: i
+            });
+            items[i] = item;
+            // Create a new sprite if needed (no height)
+            if (!sprite) {
+                spriteOptions = Ext.apply({
+                    type: "path",
+                    group: group
+                }, Ext.apply(seriesStyle, colorArrayStyle && { fill: colorArrayStyle[i % colorArrayLength] } || {}));
+                sprite = surface.add(Ext.apply(spriteOptions, rendererAttributes));
+            }
+            slice.sprite = slice.sprite || [];
+            item.sprite = sprite;
+            slice.sprite.push(sprite);
+            if (animate) {
+                rendererAttributes = me.renderer(sprite, record, rendererAttributes, i, store);
+                sprite._to = rendererAttributes;
+                me.onAnimate(sprite, {
+                    to: rendererAttributes
+                });
+            } else {
+                rendererAttributes = me.renderer(sprite, record, Ext.apply(rendererAttributes, {
+                    hidden: false
+                }), i, store);
+                sprite.setAttributes(rendererAttributes, true);
+            }
+        }
+        
+        if (me.needle) {
+            splitAngle = splitAngle * Math.PI / 180;
+            
+            if (!me.needleSprite) {
+                me.needleSprite = me.chart.surface.add({
+                    type: 'path',
+                    path: ['M', centerX + (me.radius * +donut / 100) * cos(splitAngle),
+                                centerY + -Math.abs((me.radius * +donut / 100) * sin(splitAngle)),
+                           'L', centerX + me.radius * cos(splitAngle),
+                                centerY + -Math.abs(me.radius * sin(splitAngle))],
+                    'stroke-width': 4,
+                    'stroke': '#222'
+                });
+            } else {
+                if (animate) {
+                    me.onAnimate(me.needleSprite, {
+                        to: {
+                        path: ['M', centerX + (me.radius * +donut / 100) * cos(splitAngle),
+                                    centerY + -Math.abs((me.radius * +donut / 100) * sin(splitAngle)),
+                               'L', centerX + me.radius * cos(splitAngle),
+                                    centerY + -Math.abs(me.radius * sin(splitAngle))]
+                        }
+                    });
+                } else {
+                    me.needleSprite.setAttributes({
+                        type: 'path',
+                        path: ['M', centerX + (me.radius * +donut / 100) * cos(splitAngle),
+                                    centerY + -Math.abs((me.radius * +donut / 100) * sin(splitAngle)),
+                               'L', centerX + me.radius * cos(splitAngle),
+                                    centerY + -Math.abs(me.radius * sin(splitAngle))]
+                    });
+                }
+            }
+            me.needleSprite.setAttributes({
+                hidden: false    
+            }, true);
+        }
+        
+        delete me.value;
+    },
+    
+    /**
+     * Sets the Gauge chart to the current specified value.
+    */
+    setValue: function (value) {
+        this.value = value;
+        this.drawSeries();
+    },
+
+    // @private callback for when creating a label sprite.
+    onCreateLabel: function(storeItem, item, i, display) {},
+
+    // @private callback for when placing a label sprite.
+    onPlaceLabel: function(label, storeItem, item, i, display, animate, index) {},
+
+    // @private callback for when placing a callout.
+    onPlaceCallout: function() {},
+
+    // @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;
+
+        //Only trigger events for the filled portion of the Gauge.
+        return (i === 0) && (angle >= startAngle && angle < endAngle && 
+                             rho >= item.startRho && rho <= item.endRho);
+    },
+    
+    // @private shows all elements in the series.
+    showAll: function() {
+        if (!isNaN(this._index)) {
+            this.__excludes[this._index] = false;
+            this.drawSeries();
+        }
+    },
+    
+    /**
+     * 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];
+    }
+});
+