extjs-rails 4.1.0.alpha1

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

@@ -0,0 +1,1104 @@
+/**
+ * @class Ext.chart.series.Line
+ * @extends Ext.chart.series.Cartesian
+ *
+ * Creates a Line Chart. A Line Chart is a useful visualization technique to display quantitative information for different
+ * categories or other real values (as opposed to the bar chart), that can show some progression (or regression) in the dataset.
+ * As with all other series, the Line Series must be appended in the *series* Chart array configuration. See the Chart
+ * documentation for more information. A typical configuration object for the line series 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': 4,  'data2': 4,  'data3': 36, 'data4': 13, 'data5': 33 }
+ *         ]
+ *     });
+ *
+ *     Ext.create('Ext.chart.Chart', {
+ *         renderTo: Ext.getBody(),
+ *         width: 500,
+ *         height: 300,
+ *         animate: true,
+ *         store: store,
+ *         axes: [
+ *             {
+ *                 type: 'Numeric',
+ *                 position: 'left',
+ *                 fields: ['data1', 'data2'],
+ *                 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: 'line',
+ *                 highlight: {
+ *                     size: 7,
+ *                     radius: 7
+ *                 },
+ *                 axis: 'left',
+ *                 xField: 'name',
+ *                 yField: 'data1',
+ *                 markerConfig: {
+ *                     type: 'cross',
+ *                     size: 4,
+ *                     radius: 4,
+ *                     'stroke-width': 0
+ *                 }
+ *             },
+ *             {
+ *                 type: 'line',
+ *                 highlight: {
+ *                     size: 7,
+ *                     radius: 7
+ *                 },
+ *                 axis: 'left',
+ *                 fill: true,
+ *                 xField: 'name',
+ *                 yField: 'data2',
+ *                 markerConfig: {
+ *                     type: 'circle',
+ *                     size: 4,
+ *                     radius: 4,
+ *                     'stroke-width': 0
+ *                 }
+ *             }
+ *         ]
+ *     });
+ *
+ * In this configuration we're adding two series (or lines), one bound to the `data1`
+ * property of the store and the other to `data3`. The type for both configurations is
+ * `line`. The `xField` for both series is the same, the name propert of the store.
+ * Both line series share the same axis, the left axis. You can set particular marker
+ * configuration by adding properties onto the markerConfig object. Both series have
+ * an object as highlight so that markers animate smoothly to the properties in highlight
+ * when hovered. The second series has `fill=true` which means that the line will also
+ * have an area below it of the same color.
+ *
+ * **Note:** In the series definition remember to explicitly set the axis to bind the
+ * values of the line series to. This can be done by using the `axis` configuration property.
+ */
+Ext.define('Ext.chart.series.Line', {
+
+    /* Begin Definitions */
+
+    extend: 'Ext.chart.series.Cartesian',
+
+    alternateClassName: ['Ext.chart.LineSeries', 'Ext.chart.LineChart'],
+
+    requires: ['Ext.chart.axis.Axis', 'Ext.chart.Shape', 'Ext.draw.Draw', 'Ext.fx.Anim'],
+
+    /* End Definitions */
+
+    type: 'line',
+
+    alias: 'series.line',
+
+    /**
+     * @cfg {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.
+     */
+
+    /**
+     * @cfg {Number} selectionTolerance
+     * The offset distance from the cursor position to the line series to trigger events (then used for highlighting series, etc).
+     */
+    selectionTolerance: 20,
+
+    /**
+     * @cfg {Boolean} showMarkers
+     * Whether markers should be displayed at the data points along the line. If true,
+     * then the {@link #markerConfig} config item will determine the markers' styling.
+     */
+    showMarkers: true,
+
+    /**
+     * @cfg {Object} markerConfig
+     * The display style for the markers. Only used if {@link #showMarkers} is true.
+     * The markerConfig is a configuration object containing the same set of properties defined in
+     * the Sprite class. For example, if we were to set red circles as markers to the line series we could
+     * pass the object:
+     *
+     <pre><code>
+        markerConfig: {
+            type: 'circle',
+            radius: 4,
+            'fill': '#f00'
+        }
+     </code></pre>
+
+     */
+    markerConfig: {},
+
+    /**
+     * @cfg {Object} style
+     * An object containing style properties for the visualization lines and fill.
+     * These styles will override the theme styles.  The following are valid style properties:
+     *
+     * - `stroke` - an rgb or hex color string for the background color of the line
+     * - `stroke-width` - the width of the stroke (integer)
+     * - `fill` - the background fill color string (hex or rgb), only works if {@link #fill} is `true`
+     * - `opacity` - the opacity of the line and the fill color (decimal)
+     *
+     * Example usage:
+     *
+     *     style: {
+     *         stroke: '#00ff00',
+     *         'stroke-width': 10,
+     *         fill: '#80A080',
+     *         opacity: 0.2
+     *     }
+     */
+    style: {},
+
+    /**
+     * @cfg {Boolean/Number} smooth
+     * If set to `true` or a non-zero number, the line will be smoothed/rounded around its points; otherwise
+     * straight line segments will be drawn.
+     *
+     * A numeric value is interpreted as a divisor of the horizontal distance between consecutive points in
+     * the line; larger numbers result in sharper curves while smaller numbers result in smoother curves.
+     *
+     * If set to `true` then a default numeric value of 3 will be used. Defaults to `false`.
+     */
+    smooth: false,
+
+    /**
+     * @private Default numeric smoothing value to be used when {@link #smooth} = true.
+     */
+    defaultSmoothness: 3,
+
+    /**
+     * @cfg {Boolean} fill
+     * If true, the area below the line will be filled in using the {@link #style eefill} and
+     * {@link #style opacity} config properties. Defaults to false.
+     */
+    fill: false,
+
+    constructor: function(config) {
+        this.callParent(arguments);
+        var me = this,
+            surface = me.chart.surface,
+            shadow = me.chart.shadow,
+            i, l;
+        config.highlightCfg = Ext.Object.merge({ 'stroke-width': 3 }, config.highlightCfg);
+        Ext.apply(me, config, {
+            shadowAttributes: [{
+                "stroke-width": 6,
+                "stroke-opacity": 0.05,
+                stroke: 'rgb(0, 0, 0)',
+                translate: {
+                    x: 1,
+                    y: 1
+                }
+            }, {
+                "stroke-width": 4,
+                "stroke-opacity": 0.1,
+                stroke: 'rgb(0, 0, 0)',
+                translate: {
+                    x: 1,
+                    y: 1
+                }
+            }, {
+                "stroke-width": 2,
+                "stroke-opacity": 0.15,
+                stroke: 'rgb(0, 0, 0)',
+                translate: {
+                    x: 1,
+                    y: 1
+                }
+            }]
+        });
+        me.group = surface.getGroup(me.seriesId);
+        if (me.showMarkers) {
+            me.markerGroup = surface.getGroup(me.seriesId + '-markers');
+        }
+        if (shadow) {
+            for (i = 0, l = me.shadowAttributes.length; i < l; i++) {
+                me.shadowGroups.push(surface.getGroup(me.seriesId + '-shadows' + i));
+            }
+        }
+    },
+
+    // @private makes an average of points when there are more data points than pixels to be rendered.
+    shrink: function(xValues, yValues, size) {
+        // Start at the 2nd point...
+        var len = xValues.length,
+            ratio = Math.floor(len / size),
+            i = 1,
+            xSum = 0,
+            ySum = 0,
+            xRes = [+xValues[0]],
+            yRes = [+yValues[0]];
+
+        for (; i < len; ++i) {
+            xSum += +xValues[i] || 0;
+            ySum += +yValues[i] || 0;
+            if (i % ratio == 0) {
+                xRes.push(xSum/ratio);
+                yRes.push(ySum/ratio);
+                xSum = 0;
+                ySum = 0;
+            }
+        }
+        return {
+            x: xRes,
+            y: yRes
+        };
+    },
+
+    /**
+     * Draws the series for the current chart.
+     */
+    drawSeries: function() {
+        var me = this,
+            chart = me.chart,
+            chartAxes = chart.axes,
+            store = chart.getChartStore(),
+            data = store.data.items,
+            record,
+            storeCount = store.getCount(),
+            surface = me.chart.surface,
+            bbox = {},
+            group = me.group,
+            showMarkers = me.showMarkers,
+            markerGroup = me.markerGroup,
+            enableShadows = chart.shadow,
+            shadowGroups = me.shadowGroups,
+            shadowAttributes = me.shadowAttributes,
+            smooth = me.smooth,
+            lnsh = shadowGroups.length,
+            dummyPath = ["M"],
+            path = ["M"],
+            renderPath = ["M"],
+            smoothPath = ["M"],
+            markerIndex = chart.markerIndex,
+            axes = [].concat(me.axis),
+            shadowBarAttr,
+            xValues = [],
+            xValueMap = {},
+            yValues = [],
+            yValueMap = {},
+            onbreak = false,
+            storeIndices = [],
+            markerStyle = me.markerStyle,
+            seriesStyle = me.seriesStyle,
+            colorArrayStyle = me.colorArrayStyle,
+            colorArrayLength = colorArrayStyle && colorArrayStyle.length || 0,
+            isNumber = Ext.isNumber,
+            seriesIdx = me.seriesIdx, 
+            boundAxes = me.getAxesForXAndYFields(),
+            boundXAxis = boundAxes.xAxis,
+            boundYAxis = boundAxes.yAxis,
+            shadows, shadow, shindex, fromPath, fill, fillPath, rendererAttributes,
+            x, y, prevX, prevY, firstX, firstY, markerCount, i, j, ln, axis, ends, marker, markerAux, item, xValue,
+            yValue, coords, xScale, yScale, minX, maxX, minY, maxY, line, animation, endMarkerStyle,
+            endLineStyle, type, count, opacity, lineOpacity, fillOpacity, fillDefaultValue;
+
+        if (me.fireEvent('beforedraw', me) === false) {
+            return;
+        }
+
+        //if store is empty or the series is excluded in the legend then there's nothing to draw.
+        if (!storeCount || me.seriesIsHidden) {
+            me.hide();
+            me.items = [];
+            if (me.line) {
+                me.line.hide(true);
+                if (me.line.shadows) {
+                    shadows = me.line.shadows;
+                    for (j = 0, lnsh = shadows.length; j < lnsh; j++) {
+                        shadow = shadows[j];
+                        shadow.hide(true);
+                    }
+                }
+                if (me.fillPath) {
+                    me.fillPath.hide(true);
+                }
+            }
+            me.line = null;
+            me.fillPath = null;
+            return;
+        }
+
+        //prepare style objects for line and markers
+        endMarkerStyle = Ext.apply(markerStyle || {}, me.markerConfig, {
+            fill: me.seriesStyle.fill || colorArrayStyle[seriesIdx % colorArrayStyle.length]
+        });
+        type = endMarkerStyle.type;
+        delete endMarkerStyle.type;
+        endLineStyle = seriesStyle;
+        //if no stroke with is specified force it to 0.5 because this is
+        //about making *lines*
+        if (!endLineStyle['stroke-width']) {
+            endLineStyle['stroke-width'] = 0.5;
+        }
+        
+        //set opacity values
+        opacity = 'opacity' in endLineStyle ? endLineStyle.opacity : 1;
+        fillDefaultValue = 'opacity' in endLineStyle ? endLineStyle.opacity : 0.3;
+        lineOpacity = 'lineOpacity' in endLineStyle ? endLineStyle.lineOpacity : opacity;
+        fillOpacity = 'fillOpacity' in endLineStyle ? endLineStyle.fillOpacity : fillDefaultValue;
+
+        //If we're using a time axis and we need to translate the points,
+        //then reuse the first markers as the last markers.
+        if (markerIndex && markerGroup && markerGroup.getCount()) {
+            for (i = 0; i < markerIndex; i++) {
+                marker = markerGroup.getAt(i);
+                markerGroup.remove(marker);
+                markerGroup.add(marker);
+                markerAux = markerGroup.getAt(markerGroup.getCount() - 2);
+                marker.setAttributes({
+                    x: 0,
+                    y: 0,
+                    translate: {
+                        x: markerAux.attr.translation.x,
+                        y: markerAux.attr.translation.y
+                    }
+                }, true);
+            }
+        }
+
+        me.unHighlightItem();
+        me.cleanHighlights();
+
+        me.setBBox();
+        bbox = me.bbox;
+        me.clipRect = [bbox.x, bbox.y, bbox.width, bbox.height];
+
+        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;
+            xScale = bbox.width / ((storeCount - 1) || 1);
+        }
+        else {
+            xScale = bbox.width / ((maxX - minX) || (storeCount -1) || 1);
+        }
+
+        if (isNaN(minY)) {
+            minY = 0;
+            yScale = bbox.height / ((storeCount - 1) || 1);
+        }
+        else {
+            yScale = bbox.height / ((maxY - minY) || (storeCount - 1) || 1);
+        }
+        // Extract all x and y values from the store
+        for (i = 0, ln = data.length; i < ln; i++) {
+            record = data[i];
+            xValue = record.get(me.xField);
+
+            // Ensure a value
+            if (typeof xValue == 'string' || typeof xValue == 'object' && !Ext.isDate(xValue)
+                //set as uniform distribution if the axis is a category axis.
+                || boundXAxis && chartAxes.get(boundXAxis) && chartAxes.get(boundXAxis).type == 'Category') {
+                    if (xValue in xValueMap) {
+                        xValue = xValueMap[xValue];
+                    } else {
+                        xValue = xValueMap[xValue] = i;
+                    }
+            }
+
+            // Filter out values that don't fit within the pan/zoom buffer area
+            yValue = record.get(me.yField);
+            //skip undefined values
+            if (typeof yValue == 'undefined' || (typeof yValue == 'string' && !yValue)) {
+                //<debug warn>
+                if (Ext.isDefined(Ext.global.console)) {
+                    Ext.global.console.warn("[Ext.chart.series.Line]  Skipping a store element with an undefined value at ", record, xValue, yValue);
+                }
+                //</debug>
+                continue;
+            }
+            // Ensure a value
+            if (typeof yValue == 'string' || typeof yValue == 'object' && !Ext.isDate(yValue)
+                //set as uniform distribution if the axis is a category axis.
+                || boundYAxis && chartAxes.get(boundYAxis) && chartAxes.get(boundYAxis).type == 'Category') {
+                yValue = i;
+            }
+            storeIndices.push(i);
+            xValues.push(xValue);
+            yValues.push(yValue);
+        }
+
+        ln = xValues.length;
+        if (ln > bbox.width) {
+            coords = me.shrink(xValues, yValues, bbox.width);
+            xValues = coords.x;
+            yValues = coords.y;
+        }
+
+        me.items = [];
+
+        count = 0;
+        ln = xValues.length;
+        for (i = 0; i < ln; i++) {
+            xValue = xValues[i];
+            yValue = yValues[i];
+            if (yValue === false) {
+                if (path.length == 1) {
+                    path = [];
+                }
+                onbreak = true;
+                me.items.push(false);
+                continue;
+            } else {
+                x = (bbox.x + (xValue - minX) * xScale).toFixed(2);
+                y = ((bbox.y + bbox.height) - (yValue - minY) * yScale).toFixed(2);
+                if (onbreak) {
+                    onbreak = false;
+                    path.push('M');
+                }
+                path = path.concat([x, y]);
+            }
+            if ((typeof firstY == 'undefined') && (typeof y != 'undefined')) {
+                firstY = y;
+                firstX = x;
+            }
+            // If this is the first line, create a dummypath to animate in from.
+            if (!me.line || chart.resizing) {
+                dummyPath = dummyPath.concat([x, bbox.y + bbox.height / 2]);
+            }
+
+            // When resizing, reset before animating
+            if (chart.animate && chart.resizing && me.line) {
+                me.line.setAttributes({
+                    path: dummyPath,
+                    opacity: lineOpacity
+                }, true);
+                if (me.fillPath) {
+                    me.fillPath.setAttributes({
+                        path: dummyPath,
+                        opacity: fillOpacity
+                    }, true);
+                }
+                if (me.line.shadows) {
+                    shadows = me.line.shadows;
+                    for (j = 0, lnsh = shadows.length; j < lnsh; j++) {
+                        shadow = shadows[j];
+                        shadow.setAttributes({
+                            path: dummyPath
+                        }, true);
+                    }
+                }
+            }
+            if (showMarkers) {
+                marker = markerGroup.getAt(count++);
+                if (!marker) {
+                    marker = Ext.chart.Shape[type](surface, Ext.apply({
+                        group: [group, markerGroup],
+                        x: 0, y: 0,
+                        translate: {
+                            x: +(prevX || x),
+                            y: prevY || (bbox.y + bbox.height / 2)
+                        },
+                        value: '"' + xValue + ', ' + yValue + '"',
+                        zIndex: 4000
+                    }, endMarkerStyle));
+                    marker._to = {
+                        translate: {
+                            x: +x,
+                            y: +y
+                        }
+                    };
+                } else {
+                    marker.setAttributes({
+                        value: '"' + xValue + ', ' + yValue + '"',
+                        x: 0, y: 0,
+                        hidden: false
+                    }, true);
+                    marker._to = {
+                        translate: {
+                            x: +x, 
+                            y: +y
+                        }
+                    };
+                }
+            }
+            me.items.push({
+                series: me,
+                value: [xValue, yValue],
+                point: [x, y],
+                sprite: marker,
+                storeItem: store.getAt(storeIndices[i])
+            });
+            prevX = x;
+            prevY = y;
+        }
+
+        if (path.length <= 1) {
+            //nothing to be rendered
+            return;
+        }
+
+        if (me.smooth) {
+            smoothPath = Ext.draw.Draw.smooth(path, isNumber(smooth) ? smooth : me.defaultSmoothness);
+        }
+
+        renderPath = smooth ? smoothPath : path;
+
+        //Correct path if we're animating timeAxis intervals
+        if (chart.markerIndex && me.previousPath) {
+            fromPath = me.previousPath;
+            if (!smooth) {
+                Ext.Array.erase(fromPath, 1, 2);
+            }
+        } else {
+            fromPath = path;
+        }
+
+        // Only create a line if one doesn't exist.
+        if (!me.line) {
+            me.line = surface.add(Ext.apply({
+                type: 'path',
+                group: group,
+                path: dummyPath,
+                stroke: endLineStyle.stroke || endLineStyle.fill
+            }, endLineStyle || {}));
+
+            //set configuration opacity
+            me.line.setAttributes({
+                opacity: lineOpacity
+            }, true);
+
+            if (enableShadows) {
+                me.line.setAttributes(Ext.apply({}, me.shadowOptions), true);
+            }
+
+            //unset fill here (there's always a default fill withing the themes).
+            me.line.setAttributes({
+                fill: 'none',
+                zIndex: 3000
+            });
+            if (!endLineStyle.stroke && colorArrayLength) {
+                me.line.setAttributes({
+                    stroke: colorArrayStyle[seriesIdx % colorArrayLength]
+                }, true);
+            }
+            if (enableShadows) {
+                //create shadows
+                shadows = me.line.shadows = [];
+                for (shindex = 0; shindex < lnsh; shindex++) {
+                    shadowBarAttr = shadowAttributes[shindex];
+                    shadowBarAttr = Ext.apply({}, shadowBarAttr, { path: dummyPath });
+                    shadow = surface.add(Ext.apply({}, {
+                        type: 'path',
+                        group: shadowGroups[shindex]
+                    }, shadowBarAttr));
+                    shadows.push(shadow);
+                }
+            }
+        }
+        if (me.fill) {
+            fillPath = renderPath.concat([
+                ["L", x, bbox.y + bbox.height],
+                ["L", firstX, bbox.y + bbox.height],
+                ["L", firstX, firstY]
+            ]);
+            if (!me.fillPath) {
+                me.fillPath = surface.add({
+                    group: group,
+                    type: 'path',
+                    fill: endLineStyle.fill || colorArrayStyle[seriesIdx % colorArrayLength],
+                    path: dummyPath
+                });
+            }
+        }
+        markerCount = showMarkers && markerGroup.getCount();
+        if (chart.animate) {
+            fill = me.fill;
+            line = me.line;
+            //Add renderer to line. There is not unique record associated with this.
+            rendererAttributes = me.renderer(line, false, { path: renderPath }, i, store);
+            Ext.apply(rendererAttributes, endLineStyle || {}, {
+                stroke: endLineStyle.stroke || endLineStyle.fill
+            });
+            //fill should not be used here but when drawing the special fill path object
+            delete rendererAttributes.fill;
+            line.show(true);
+            if (chart.markerIndex && me.previousPath) {
+                me.animation = animation = me.onAnimate(line, {
+                    to: rendererAttributes,
+                    from: {
+                        path: fromPath
+                    }
+                });
+            } else {
+                me.animation = animation = me.onAnimate(line, {
+                    to: rendererAttributes
+                });
+            }
+            //animate shadows
+            if (enableShadows) {
+                shadows = line.shadows;
+                for(j = 0; j < lnsh; j++) {
+                    shadows[j].show(true);
+                    if (chart.markerIndex && me.previousPath) {
+                        me.onAnimate(shadows[j], {
+                            to: { path: renderPath },
+                            from: { path: fromPath }
+                        });
+                    } else {
+                        me.onAnimate(shadows[j], {
+                            to: { path: renderPath }
+                        });
+                    }
+                }
+            }
+            //animate fill path
+            if (fill) {
+                me.fillPath.show(true);
+                me.onAnimate(me.fillPath, {
+                    to: Ext.apply({}, {
+                        path: fillPath,
+                        fill: endLineStyle.fill || colorArrayStyle[seriesIdx % colorArrayLength],
+                        'stroke-width': 0,
+                        opacity: fillOpacity
+                    }, endLineStyle || {})
+                });
+            }
+            //animate markers
+            if (showMarkers) {
+                count = 0;
+                for(i = 0; i < ln; i++) {
+                    if (me.items[i]) {
+                        item = markerGroup.getAt(count++);
+                        if (item) {
+                            rendererAttributes = me.renderer(item, store.getAt(i), item._to, i, store);
+                            me.onAnimate(item, {
+                                to: Ext.apply(rendererAttributes, endMarkerStyle || {})
+                            });
+                            item.show(true);
+                        }
+                    }
+                }
+                for(; count < markerCount; count++) {
+                    item = markerGroup.getAt(count);
+                    item.hide(true);
+                }
+//                for(i = 0; i < (chart.markerIndex || 0)-1; i++) {
+//                    item = markerGroup.getAt(i);
+//                    item.hide(true);
+//                }
+            }
+        } else {
+            rendererAttributes = me.renderer(me.line, false, { path: renderPath, hidden: false }, i, store);
+            Ext.apply(rendererAttributes, endLineStyle || {}, {
+                stroke: endLineStyle.stroke || endLineStyle.fill
+            });
+            //fill should not be used here but when drawing the special fill path object
+            delete rendererAttributes.fill;
+            me.line.setAttributes(rendererAttributes, true);
+            me.line.setAttributes({
+                opacity: lineOpacity
+            }, true);
+            //set path for shadows
+            if (enableShadows) {
+                shadows = me.line.shadows;
+                for(j = 0; j < lnsh; j++) {
+                    shadows[j].setAttributes({
+                        path: renderPath,
+                        hidden: false
+                    }, true);
+                }
+            }
+            if (me.fill) {
+                me.fillPath.setAttributes({
+                    path: fillPath,
+                    hidden: false,
+                    opacity: fillOpacity
+                }, true);
+            }
+            if (showMarkers) {
+                count = 0;
+                for(i = 0; i < ln; i++) {
+                    if (me.items[i]) {
+                        item = markerGroup.getAt(count++);
+                        if (item) {
+                            rendererAttributes = me.renderer(item, store.getAt(i), item._to, i, store);
+                            item.setAttributes(Ext.apply(endMarkerStyle || {}, rendererAttributes || {}), true);
+                            if (!item.attr.hidden) {
+                                item.show(true);
+                            }
+                        }
+                    }
+                }
+                for(; count < markerCount; count++) {
+                    item = markerGroup.getAt(count);
+                    item.hide(true);
+                }
+            }
+        }
+
+        if (chart.markerIndex) {
+            if (me.smooth) {
+                Ext.Array.erase(path, 1, 2);
+            } else {
+                Ext.Array.splice(path, 1, 0, path[1], path[2]);
+            }
+            me.previousPath = path;
+        }
+        me.renderLabels();
+        me.renderCallouts();
+
+        me.fireEvent('draw', me);
+    },
+
+    // @private called when a label is to be created.
+    onCreateLabel: function(storeItem, item, i, display) {
+        var me = this,
+            group = me.labelsGroup,
+            config = me.label,
+            bbox = me.bbox,
+            endLabelStyle = Ext.apply(config, me.seriesLabelStyle);
+
+        return me.chart.surface.add(Ext.apply({
+            'type': 'text',
+            'text-anchor': 'middle',
+            'group': group,
+            'x': item.point[0],
+            'y': bbox.y + bbox.height / 2
+        }, endLabelStyle || {}));
+    },
+
+    // @private called when a label is to be created.
+    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;
+
+        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 (me.chart.animate && !me.chart.resizing) {
+            label.show(true);
+            me.onAnimate(label, {
+                to: {
+                    x: x,
+                    y: y
+                }
+            });
+        } else {
+            label.setAttributes({
+                x: x,
+                y: y
+            }, true);
+            if (resizing && me.animation) {
+                me.animation.on('afteranimate', function() {
+                    label.show(true);
+                });
+            } else {
+                label.show(true);
+            }
+        }
+    },
+
+    // @private Overriding highlights.js highlightItem method.
+    highlightItem: function() {
+        var me = this;
+        me.callParent(arguments);
+        if (me.line && !me.highlighted) {
+            if (!('__strokeWidth' in me.line)) {
+                me.line.__strokeWidth = parseFloat(me.line.attr['stroke-width']) || 0;
+            }
+            if (me.line.__anim) {
+                me.line.__anim.paused = true;
+            }
+            me.line.__anim = Ext.create('Ext.fx.Anim', {
+                target: me.line,
+                to: {
+                    'stroke-width': me.line.__strokeWidth + 3
+                }
+            });
+            me.highlighted = true;
+        }
+    },
+
+    // @private Overriding highlights.js unHighlightItem method.
+    unHighlightItem: function() {
+        var me = this;
+        me.callParent(arguments);
+        if (me.line && me.highlighted) {
+            me.line.__anim = Ext.create('Ext.fx.Anim', {
+                target: me.line,
+                to: {
+                    'stroke-width': me.line.__strokeWidth
+                }
+            });
+            me.highlighted = false;
+        }
+    },
+
+    // @private called when a callout needs to be placed.
+    onPlaceCallout : function(callout, storeItem, item, i, display, animate, index) {
+        if (!display) {
+            return;
+        }
+
+        var me = this,
+            chart = me.chart,
+            surface = chart.surface,
+            resizing = chart.resizing,
+            config = me.callouts,
+            items = me.items,
+            prev = i == 0? false : items[i -1].point,
+            next = (i == items.length -1)? false : items[i +1].point,
+            cur = [+item.point[0], +item.point[1]],
+            dir, norm, normal, a, aprev, anext,
+            offsetFromViz = config.offsetFromViz || 30,
+            offsetToSide = config.offsetToSide || 10,
+            offsetBox = config.offsetBox || 3,
+            boxx, boxy, boxw, boxh,
+            p, clipRect = me.clipRect,
+            bbox = {
+                width: config.styles.width || 10,
+                height: config.styles.height || 10
+            },
+            x, y;
+
+        //get the right two points
+        if (!prev) {
+            prev = cur;
+        }
+        if (!next) {
+            next = cur;
+        }
+        a = (next[1] - prev[1]) / (next[0] - prev[0]);
+        aprev = (cur[1] - prev[1]) / (cur[0] - prev[0]);
+        anext = (next[1] - cur[1]) / (next[0] - cur[0]);
+
+        norm = Math.sqrt(1 + a * a);
+        dir = [1 / norm, a / norm];
+        normal = [-dir[1], dir[0]];
+
+        //keep the label always on the outer part of the "elbow"
+        if (aprev > 0 && anext < 0 && normal[1] < 0
+            || aprev < 0 && anext > 0 && normal[1] > 0) {
+            normal[0] *= -1;
+            normal[1] *= -1;
+        } else if (Math.abs(aprev) < Math.abs(anext) && normal[0] < 0
+                   || Math.abs(aprev) > Math.abs(anext) && normal[0] > 0) {
+            normal[0] *= -1;
+            normal[1] *= -1;
+        }
+        //position
+        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"]
+                }
+            });
+            //set component position
+            if (callout.panel) {
+                callout.panel.setPosition(boxx, boxy, 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 component position
+            if (callout.panel) {
+                callout.panel.setPosition(boxx, boxy);
+            }
+        }
+        for (p in callout) {
+            callout[p].show(true);
+        }
+    },
+
+    isItemInPoint: function(x, y, item, i) {
+        var me = this,
+            items = me.items,
+            tolerance = me.selectionTolerance,
+            result = null,
+            prevItem,
+            nextItem,
+            prevPoint,
+            nextPoint,
+            ln,
+            x1,
+            y1,
+            x2,
+            y2,
+            xIntersect,
+            yIntersect,
+            dist1, dist2, dist, midx, midy,
+            sqrt = Math.sqrt, abs = Math.abs;
+
+        nextItem = items[i];
+        prevItem = i && items[i - 1];
+
+        if (i >= ln) {
+            prevItem = items[ln - 1];
+        }
+        prevPoint = prevItem && prevItem.point;
+        nextPoint = nextItem && nextItem.point;
+        x1 = prevItem ? prevPoint[0] : nextPoint[0] - tolerance;
+        y1 = prevItem ? prevPoint[1] : nextPoint[1];
+        x2 = nextItem ? nextPoint[0] : prevPoint[0] + tolerance;
+        y2 = nextItem ? nextPoint[1] : prevPoint[1];
+        dist1 = sqrt((x - x1) * (x - x1) + (y - y1) * (y - y1));
+        dist2 = sqrt((x - x2) * (x - x2) + (y - y2) * (y - y2));
+        dist = Math.min(dist1, dist2);
+
+        if (dist <= tolerance) {
+            return dist == dist1? prevItem : nextItem;
+        }
+        return false;
+    },
+
+    // @private toggle visibility of all series elements (markers, sprites).
+    toggleAll: function(show) {
+        var me = this,
+            i, ln, shadow, shadows;
+        if (!show) {
+            Ext.chart.series.Cartesian.prototype.hideAll.call(me);
+        }
+        else {
+            Ext.chart.series.Cartesian.prototype.showAll.call(me);
+        }
+        if (me.line) {
+            me.line.setAttributes({
+                hidden: !show
+            }, true);
+            //hide shadows too
+            if (me.line.shadows) {
+                for (i = 0, shadows = me.line.shadows, ln = shadows.length; i < ln; i++) {
+                    shadow = shadows[i];
+                    shadow.setAttributes({
+                        hidden: !show
+                    }, true);
+                }
+            }
+        }
+        if (me.fillPath) {
+            me.fillPath.setAttributes({
+                hidden: !show
+            }, true);
+        }
+    },
+
+    // @private hide all series elements (markers, sprites).
+    hideAll: function() {
+        this.toggleAll(false);
+    },
+
+    // @private hide all series elements (markers, sprites).
+    showAll: function() {
+        this.toggleAll(true);
+    }
+});