extjs-rails 4.1.0.alpha1

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

@@ -0,0 +1,172 @@
+/**
+ * @class Ext.chart.Highlight
+ * A mixin providing highlight functionality for Ext.chart.series.Series.
+ */
+Ext.define('Ext.chart.Highlight', {
+
+    /* Begin Definitions */
+
+    requires: ['Ext.fx.Anim'],
+
+    /* End Definitions */
+
+    /**
+     * Highlight the given series item.
+     * @param {Boolean/Object} Default's false. Can also be an object width style properties (i.e fill, stroke, radius) 
+     * or just use default styles per series by setting highlight = true.
+     */
+    highlight: false,
+
+    highlightCfg : {
+        fill: '#fdd',
+        "stroke-width": 5,
+        stroke: '#f55'
+    },
+
+    constructor: function(config) {
+        if (config.highlight) {
+            if (config.highlight !== true) { //is an object
+                this.highlightCfg = Ext.merge(this.highlightCfg, config.highlight);
+            }
+        }
+    },
+
+    /**
+     * Highlight the given series item.
+     * @param {Object} item Info about the item; same format as returned by #getItemForPoint.
+     */
+    highlightItem: function(item) {
+        if (!item) {
+            return;
+        }
+        
+        var me = this,
+            sprite = item.sprite,
+            opts = Ext.merge({}, me.highlightCfg, me.highlight),
+            surface = me.chart.surface,
+            animate = me.chart.animate,
+            p, from, to, pi;
+
+        if (!me.highlight || !sprite || sprite._highlighted) {
+            return;
+        }
+        if (sprite._anim) {
+            sprite._anim.paused = true;
+        }
+        sprite._highlighted = true;
+        if (!sprite._defaults) {
+            sprite._defaults = Ext.apply({}, sprite.attr);
+            from = {};
+            to = {};
+            for (p in opts) {
+                if (! (p in sprite._defaults)) {
+                    sprite._defaults[p] = surface.availableAttrs[p];
+                }
+                from[p] = sprite._defaults[p];
+                to[p] = opts[p];
+                if (Ext.isObject(opts[p])) {
+                    from[p] = {};
+                    to[p] = {};
+                    Ext.apply(sprite._defaults[p], sprite.attr[p]);
+                    Ext.apply(from[p], sprite._defaults[p]);
+                    for (pi in sprite._defaults[p]) {
+                        if (! (pi in opts[p])) {
+                            to[p][pi] = from[p][pi];
+                        } else {
+                            to[p][pi] = opts[p][pi];
+                        }
+                    }
+                    for (pi in opts[p]) {
+                        if (! (pi in to[p])) {
+                            to[p][pi] = opts[p][pi];
+                        }
+                    }
+                }
+            }
+            sprite._from = from;
+            sprite._to = to;
+            sprite._endStyle = to;
+        }
+        if (animate) {
+            sprite._anim = new Ext.fx.Anim({
+                target: sprite,
+                from: sprite._from,
+                to: sprite._to,
+                duration: 150
+            });
+        } else {
+            sprite.setAttributes(sprite._to, true);
+        }
+    },
+
+    /**
+     * Un-highlight any existing highlights
+     */
+    unHighlightItem: function() {
+        if (!this.highlight || !this.items) {
+            return;
+        }
+
+        var me = this,
+            items = me.items,
+            len = items.length,
+            opts = Ext.merge({}, me.highlightCfg, me.highlight),
+            animate = me.chart.animate,
+            i = 0,
+            obj, p, sprite;
+        for (; i < len; i++) {
+            if (!items[i]) {
+                continue;
+            }
+            sprite = items[i].sprite;
+            if (sprite && sprite._highlighted) {
+                if (sprite._anim) {
+                    sprite._anim.paused = true;
+                }
+                obj = {};
+                for (p in opts) {
+                    if (Ext.isObject(sprite._defaults[p])) {
+                        obj[p] = {};
+                        Ext.apply(obj[p], sprite._defaults[p]);
+                    }
+                    else {
+                        obj[p] = sprite._defaults[p];
+                    }
+                }
+                if (animate) {
+                    //sprite._to = obj;
+                    sprite._endStyle = obj;
+                    sprite._anim = new Ext.fx.Anim({
+                        target: sprite,
+                        to: obj,
+                        duration: 150
+                    });
+                }
+                else {
+                    sprite.setAttributes(obj, true);
+                }
+                delete sprite._highlighted;
+                //delete sprite._defaults;
+            }
+        }
+    },
+
+    cleanHighlights: function() {
+        if (!this.highlight) {
+            return;
+        }
+
+        var group = this.group,
+            markerGroup = this.markerGroup,
+            i = 0,
+            l;
+        for (l = group.getCount(); i < l; i++) {
+            delete group.getAt(i)._defaults;
+        }
+        if (markerGroup) {
+            for (l = markerGroup.getCount(); i < l; i++) {
+                delete markerGroup.getAt(i)._defaults;
+            }
+        }
+    }
+});

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

@@ -0,0 +1,241 @@
+/**
+ * @class Ext.chart.Label
+ *
+ * Labels is a mixin to the Series class. Labels methods are implemented
+ * in each of the Series (Pie, Bar, etc) for label creation and placement.
+ *
+ * The methods implemented by the Series are:
+ *
+ * - **`onCreateLabel(storeItem, item, i, display)`** Called each time a new label is created.
+ *   The arguments of the method are:
+ *   - *`storeItem`* The element of the store that is related to the label sprite.
+ *   - *`item`* The item related to the label sprite. An item is an object containing the position of the shape
+ *     used to describe the visualization and also pointing to the actual shape (circle, rectangle, path, etc).
+ *   - *`i`* The index of the element created (i.e the first created label, second created label, etc)
+ *   - *`display`* The display type. May be <b>false</b> if the label is hidden
+ *
+ *  - **`onPlaceLabel(label, storeItem, item, i, display, animate)`** Called for updating the position of the label.
+ *    The arguments of the method are:
+ *    - *`label`* The sprite label.</li>
+ *    - *`storeItem`* The element of the store that is related to the label sprite</li>
+ *    - *`item`* The item related to the label sprite. An item is an object containing the position of the shape
+ *      used to describe the visualization and also pointing to the actual shape (circle, rectangle, path, etc).
+ *    - *`i`* The index of the element to be updated (i.e. whether it is the first, second, third from the labelGroup)
+ *    - *`display`* The display type. May be <b>false</b> if the label is hidden.
+ *    - *`animate`* A boolean value to set or unset animations for the labels.
+ */
+Ext.define('Ext.chart.Label', {
+
+    /* Begin Definitions */
+
+    requires: ['Ext.draw.Color'],
+
+    /* End Definitions */
+
+    /**
+     * @cfg {Object} label
+     * Object with the following properties:
+     *
+     * - **display** : String
+     *
+     *   Specifies the presence and position of labels for each pie slice. Either "rotate", "middle", "insideStart",
+     *   "insideEnd", "outside", "over", "under", or "none" to prevent label rendering.
+     *   Default value: 'none'.
+     *
+     * - **color** : String
+     *
+     *   The color of the label text.
+     *   Default value: '#000' (black).
+     *
+     * - **contrast** : Boolean
+     *
+     *   True to render the label in contrasting color with the backround.
+     *   Default value: false.
+     *
+     * - **field** : String
+     *
+     *   The name of the field to be displayed in the label.
+     *   Default value: 'name'.
+     *
+     * - **minMargin** : Number
+     *
+     *   Specifies the minimum distance from a label to the origin of the visualization.
+     *   This parameter is useful when using PieSeries width variable pie slice lengths.
+     *   Default value: 50.
+     *
+     * - **font** : String
+     *
+     *   The font used for the labels.
+     *   Default value: "11px Helvetica, sans-serif".
+     *
+     * - **orientation** : String
+     *
+     *   Either "horizontal" or "vertical".
+     *   Dafault value: "horizontal".
+     *
+     * - **renderer** : Function
+     *
+     *   Optional function for formatting the label into a displayable value.
+     *   Default value: function(v) { return v; }
+     */
+
+    // @private a regex to parse url type colors.
+    colorStringRe: /url\s*\(\s*#([^\/)]+)\s*\)/,
+
+    // @private the mixin constructor. Used internally by Series.
+    constructor: function(config) {
+        var me = this;
+        me.label = Ext.applyIf(me.label || {},
+        {
+            display: "none",
+            color: "#000",
+            field: "name",
+            minMargin: 50,
+            font: "11px Helvetica, sans-serif",
+            orientation: "horizontal",
+            renderer: function(v) {
+                return v;
+            }
+        });
+
+        if (me.label.display !== 'none') {
+            me.labelsGroup = me.chart.surface.getGroup(me.seriesId + '-labels');
+        }
+    },
+
+    // @private a method to render all labels in the labelGroup
+    renderLabels: function() {
+        var me = this,
+            chart = me.chart,
+            gradients = chart.gradients,
+            items = me.items,
+            animate = chart.animate,
+            config = me.label,
+            display = config.display,
+            color = config.color,
+            field = [].concat(config.field),
+            group = me.labelsGroup,
+            groupLength = (group || 0) && group.length,
+            store = me.chart.getChartStore(),
+            len = store.getCount(),
+            itemLength = (items || 0) && items.length,
+            ratio = itemLength / len,
+            gradientsCount = (gradients || 0) && gradients.length,
+            Color = Ext.draw.Color,
+            hides = [],
+            gradient, i, count, groupIndex, index, j, k, colorStopTotal, colorStopIndex, colorStop, item, label,
+            storeItem, sprite, spriteColor, spriteBrightness, labelColor, colorString;
+
+        if (display == 'none') {
+            return;
+        }
+        // no items displayed, hide all labels
+        if(itemLength == 0){
+            while(groupLength--) {
+                hides.push(groupLength);
+            }
+        } else {
+            for (i = 0, count = 0, groupIndex = 0; i < len; i++) {
+                index = 0;
+                for (j = 0; j < ratio; j++) {
+                    item = items[count];
+                    label = group.getAt(groupIndex);
+                    storeItem = store.getAt(i);
+                    //check the excludes
+                    while(this.__excludes && this.__excludes[index]) {
+                        index++;
+                    }
+
+                    if (!item && label) {
+                        label.hide(true);
+                        groupIndex++;
+                    }
+
+                    if (item && field[j]) {
+                        if (!label) {
+                            label = me.onCreateLabel(storeItem, item, i, display, j, index);
+                        }
+                        me.onPlaceLabel(label, storeItem, item, i, display, animate, j, index);
+                        groupIndex++;
+
+                        //set contrast
+                        if (config.contrast && item.sprite) {
+                            sprite = item.sprite;
+                            //set the color string to the color to be set.
+                            if (sprite._endStyle) {
+                                colorString = sprite._endStyle.fill;
+                            }
+                            else if (sprite._to) {
+                                colorString = sprite._to.fill;
+                            }
+                            else {
+                                colorString = sprite.attr.fill;
+                            }
+                            colorString = colorString || sprite.attr.fill;
+
+                            spriteColor = Color.fromString(colorString);
+                            //color wasn't parsed property maybe because it's a gradient id
+                            if (colorString && !spriteColor) {
+                                colorString = colorString.match(me.colorStringRe)[1];
+                                for (k = 0; k < gradientsCount; k++) {
+                                    gradient = gradients[k];
+                                    if (gradient.id == colorString) {
+                                        //avg color stops
+                                        colorStop = 0; colorStopTotal = 0;
+                                        for (colorStopIndex in gradient.stops) {
+                                            colorStop++;
+                                            colorStopTotal += Color.fromString(gradient.stops[colorStopIndex].color).getGrayscale();
+                                        }
+                                        spriteBrightness = (colorStopTotal / colorStop) / 255;
+                                        break;
+                                    }
+                                }
+                            }
+                            else {
+                                spriteBrightness = spriteColor.getGrayscale() / 255;
+                            }
+                            if (label.isOutside) {
+                                spriteBrightness = 1;
+                            }
+                            labelColor = Color.fromString(label.attr.color || label.attr.fill).getHSL();
+                            labelColor[2] = spriteBrightness > 0.5 ? 0.2 : 0.8;
+                            label.setAttributes({
+                                fill: String(Color.fromHSL.apply({}, labelColor))
+                            }, true);
+                        }
+
+                    }
+                    count++;
+                    index++;
+                }
+            }
+            groupLength = group.length;
+        
+            while(groupLength > groupIndex){
+                hides.push(groupIndex);
+                groupIndex++;
+           }
+        }
+        me.hideLabels(hides);
+    },
+
+    hideLabels: function(hides){
+        var labelsGroup = this.labelsGroup,
+            hlen = !!hides && hides.length;
+
+        if (!labelsGroup) {
+            return;
+        }
+
+        if (hlen === false) {
+            hlen = labelsGroup.getCount();
+            while (hlen--) {
+              labelsGroup.getAt(hlen).hide(true);
+            }
+        } else {
+            while(hlen--) {
+                labelsGroup.getAt(hides[hlen]).hide(true);
+            }
+        }
+    }
+});

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

@@ -0,0 +1,474 @@
+/**
+ * @class Ext.chart.Legend
+ *
+ * Defines a legend for a chart's series.
+ * The 'chart' member must be set prior to rendering.
+ * The legend class displays a list of legend items each of them related with a
+ * series being rendered. In order to render the legend item of the proper series
+ * the series configuration object must have `showInLegend` set to true.
+ *
+ * The legend configuration object accepts a `position` as parameter.
+ * The `position` parameter can be `left`, `right`
+ * `top` or `bottom`. For example:
+ *
+ *     legend: {
+ *         position: 'right'
+ *     },
+ *
+ * ## Example
+ *
+ *     @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,
+ *         store: store,
+ *         shadow: true,
+ *         theme: 'Category1',
+ *         legend: {
+ *             position: 'top'
+ *         },
+ *         axes: [
+ *             {
+ *                 type: 'Numeric',
+ *                 grid: true,
+ *                 position: 'left',
+ *                 fields: ['data1', 'data2', 'data3', 'data4', 'data5'],
+ *                 title: 'Sample Values',
+ *                 grid: {
+ *                     odd: {
+ *                         opacity: 1,
+ *                         fill: '#ddd',
+ *                         stroke: '#bbb',
+ *                         'stroke-width': 1
+ *                     }
+ *                 },
+ *                 minimum: 0,
+ *                 adjustMinimumByMajorUnit: 0
+ *             },
+ *             {
+ *                 type: 'Category',
+ *                 position: 'bottom',
+ *                 fields: ['name'],
+ *                 title: 'Sample Metrics',
+ *                 grid: true,
+ *                 label: {
+ *                     rotate: {
+ *                         degrees: 315
+ *                     }
+ *                 }
+ *             }
+ *         ],
+ *         series: [{
+ *             type: 'area',
+ *             highlight: false,
+ *             axis: 'left',
+ *             xField: 'name',
+ *             yField: ['data1', 'data2', 'data3', 'data4', 'data5'],
+ *             style: {
+ *                 opacity: 0.93
+ *             }
+ *         }]
+ *     });
+ */
+Ext.define('Ext.chart.Legend', {
+
+    /* Begin Definitions */
+
+    requires: ['Ext.chart.LegendItem'],
+
+    /* End Definitions */
+
+    /**
+     * @cfg {Boolean} visible
+     * Whether or not the legend should be displayed.
+     */
+    visible: true,
+    
+    /**
+     * @cfg {Boolean} update
+     * If set to true the legend will be refreshed when the chart is.
+     * This is useful to update the legend items if series are
+     * added/removed/updated from the chart. Default is true.
+     */
+    update: true,
+
+    /**
+     * @cfg {String} position
+     * The position of the legend in relation to the chart. One of: "top",
+     * "bottom", "left", "right", or "float". If set to "float", then the legend
+     * box will be positioned at the point denoted by the x and y parameters.
+     */
+    position: 'bottom',
+
+    /**
+     * @cfg {Number} x
+     * X-position of the legend box. Used directly if position is set to "float", otherwise
+     * it will be calculated dynamically.
+     */
+    x: 0,
+
+    /**
+     * @cfg {Number} y
+     * Y-position of the legend box. Used directly if position is set to "float", otherwise
+     * it will be calculated dynamically.
+     */
+    y: 0,
+
+    /**
+     * @cfg {String} labelColor
+     * Color to be used for the legend labels, eg '#000'
+     */
+    labelColor: '#000',
+
+    /**
+     * @cfg {String} labelFont
+     * Font to be used for the legend labels, eg '12px Helvetica'
+     */
+    labelFont: '12px Helvetica, sans-serif',
+
+    /**
+     * @cfg {String} boxStroke
+     * Style of the stroke for the legend box
+     */
+    boxStroke: '#000',
+
+    /**
+     * @cfg {String} boxStrokeWidth
+     * Width of the stroke for the legend box
+     */
+    boxStrokeWidth: 1,
+
+    /**
+     * @cfg {String} boxFill
+     * Fill style for the legend box
+     */
+    boxFill: '#FFF',
+
+    /**
+     * @cfg {Number} itemSpacing
+     * Amount of space between legend items
+     */
+    itemSpacing: 10,
+
+    /**
+     * @cfg {Number} padding
+     * Amount of padding between the legend box's border and its items
+     */
+    padding: 5,
+
+    // @private
+    width: 0,
+    // @private
+    height: 0,
+
+    /**
+     * @cfg {Number} boxZIndex
+     * Sets the z-index for the legend. Defaults to 100.
+     */
+    boxZIndex: 100,
+
+    /**
+     * Creates new Legend.
+     * @param {Object} config  (optional) Config object.
+     */
+    constructor: function(config) {
+        var me = this;
+        if (config) {
+            Ext.apply(me, config);
+        }
+        me.items = [];
+        /**
+         * Whether the legend box is oriented vertically, i.e. if it is on the left or right side or floating.
+         * @type {Boolean}
+         */
+        me.isVertical = ("left|right|float".indexOf(me.position) !== -1);
+
+        // cache these here since they may get modified later on
+        me.origX = me.x;
+        me.origY = me.y;
+    },
+
+    /**
+     * @private Create all the sprites for the legend
+     */
+    create: function() {
+        var me = this,
+            seriesItems = me.chart.series.items,
+            i, ln, series;
+
+        me.createBox();
+        
+        if (me.rebuild !== false) {
+            me.createItems();
+        }
+        
+        if (!me.created && me.isDisplayed()) {
+            me.created = true;
+
+            // Listen for changes to series titles to trigger regeneration of the legend
+            for (i = 0, ln = seriesItems.length; i < ln; i++) {
+                series = seriesItems[i];
+                series.on('titlechange', function() {
+                    me.create();
+                    me.updatePosition();
+                });
+            }
+        }
+    },
+
+    /**
+     * @private Determine whether the legend should be displayed. Looks at the legend's 'visible' config,
+     * and also the 'showInLegend' config for each of the series.
+     */
+    isDisplayed: function() {
+        return this.visible && this.chart.series.findIndex('showInLegend', true) !== -1;
+    },
+
+    /**
+     * @private Create the series markers and labels
+     */
+    createItems: function() {
+        var me = this,
+            chart = me.chart,
+            seriesItems = chart.series.items,
+            ln, series,
+            surface = chart.surface,
+            items = me.items,
+            padding = me.padding,
+            itemSpacing = me.itemSpacing,
+            spacingOffset = 2,
+            maxWidth = 0,
+            maxHeight = 0,
+            totalWidth = 0,
+            totalHeight = 0,
+            vertical = me.isVertical,
+            math = Math,
+            mfloor = math.floor,
+            mmax = math.max,
+            index = 0,
+            i = 0,
+            len = items ? items.length : 0,
+            x, y, spacing, item, bbox, height, width,
+            fields, field, nFields, j;
+
+        //remove all legend items
+        if (len) {
+            for (; i < len; i++) {
+                items[i].destroy();
+            }
+        }
+        //empty array
+        items.length = [];
+        // Create all the item labels, collecting their dimensions and positioning each one
+        // properly in relation to the previous item
+        for (i = 0, ln = seriesItems.length; i < ln; i++) {
+            series = seriesItems[i];
+            if (series.showInLegend) {
+                fields = [].concat(series.yField);
+                for (j = 0, nFields = fields.length; j < nFields; j++) {
+                    field = fields[j];
+                    item = new Ext.chart.LegendItem({
+                        legend: this,
+                        series: series,
+                        surface: chart.surface,
+                        yFieldIndex: j
+                    });
+                    bbox = item.getBBox();
+
+                    //always measure from x=0, since not all markers go all the way to the left
+                    width = bbox.width;
+                    height = bbox.height;
+
+                    if (i + j === 0) {
+                        spacing = vertical ? padding + height / 2 : padding;
+                    }
+                    else {
+                        spacing = itemSpacing / (vertical ? 2 : 1);
+                    }
+                    // Set the item's position relative to the legend box
+                    item.x = mfloor(vertical ? padding : totalWidth + spacing);
+                    item.y = mfloor(vertical ? totalHeight + spacing : padding + height / 2);
+
+                    // Collect cumulative dimensions
+                    totalWidth += width + spacing;
+                    totalHeight += height + spacing;
+                    maxWidth = mmax(maxWidth, width);
+                    maxHeight = mmax(maxHeight, height);
+
+                    items.push(item);
+                }
+            }
+        }
+
+        // Store the collected dimensions for later
+        me.width = mfloor((vertical ? maxWidth : totalWidth) + padding * 2);
+        if (vertical && items.length === 1) {
+            spacingOffset = 1;
+        }
+        me.height = mfloor((vertical ? totalHeight - spacingOffset * spacing : maxHeight) + (padding * 2));
+        me.itemHeight = maxHeight;
+    },
+
+    /**
+     * @private Get the bounds for the legend's outer box
+     */
+    getBBox: function() {
+        var me = this;
+        return {
+            x: Math.round(me.x) - me.boxStrokeWidth / 2,
+            y: Math.round(me.y) - me.boxStrokeWidth / 2,
+            width: me.width,
+            height: me.height
+        };
+    },
+
+    /**
+     * @private Create the box around the legend items
+     */
+    createBox: function() {
+        var me = this,
+            box, bbox;
+
+        if (me.boxSprite) {
+            me.boxSprite.destroy();
+        }
+
+        bbox = me.getBBox();
+        //if some of the dimensions are NaN this means that we
+        //cannot set a specific width/height for the legend
+        //container. One possibility for this is that there are
+        //actually no items to show in the legend, and the legend
+        //should be hidden.
+        if (isNaN(bbox.width) || isNaN(bbox.height)) {
+            me.boxSprite = false;
+            return;
+        }
+        
+        box = me.boxSprite = me.chart.surface.add(Ext.apply({
+            type: 'rect',
+            stroke: me.boxStroke,
+            "stroke-width": me.boxStrokeWidth,
+            fill: me.boxFill,
+            zIndex: me.boxZIndex
+        }, bbox));
+
+        box.redraw();
+    },
+
+    /**
+     * @private Update the position of all the legend's sprites to match its current x/y values
+     */
+    updatePosition: function() {
+        var me = this,
+            items = me.items,
+            i, ln,
+            x, y,
+            legendWidth = me.width || 0,
+            legendHeight = me.height || 0,
+            padding = me.padding,
+            chart = me.chart,
+            chartBBox = chart.chartBBox,
+            insets = chart.insetPadding,
+            chartWidth = chartBBox.width - (insets * 2),
+            chartHeight = chartBBox.height - (insets * 2),
+            chartX = chartBBox.x + insets,
+            chartY = chartBBox.y + insets,
+            surface = chart.surface,
+            mfloor = Math.floor,
+            bbox;
+
+        if (me.isDisplayed()) {
+            // Find the position based on the dimensions
+            switch(me.position) {
+                case "left":
+                    x = insets;
+                    y = mfloor(chartY + chartHeight / 2 - legendHeight / 2);
+                    break;
+                case "right":
+                    x = mfloor(surface.width - legendWidth) - insets;
+                    y = mfloor(chartY + chartHeight / 2 - legendHeight / 2);
+                    break;
+                case "top":
+                    x = mfloor(chartX + chartWidth / 2 - legendWidth / 2);
+                    y = insets;
+                    break;
+                case "bottom":
+                    x = mfloor(chartX + chartWidth / 2 - legendWidth / 2);
+                    y = mfloor(surface.height - legendHeight) - insets;
+                    break;
+                default:
+                    x = mfloor(me.origX) + insets;
+                    y = mfloor(me.origY) + insets;
+            }
+            me.x = x;
+            me.y = y;
+
+            // Update the position of each item
+            for (i = 0, ln = items.length; i < ln; i++) {
+                items[i].updatePosition();
+            }
+
+            bbox = me.getBBox();
+
+            //if some of the dimensions are NaN this means that we
+            //cannot set a specific width/height for the legend
+            //container. One possibility for this is that there are
+            //actually no items to show in the legend, and the legend
+            //should be hidden.
+            if (isNaN(bbox.width) || isNaN(bbox.height)) {
+                if (me.boxSprite) {
+                    me.boxSprite.hide(true);
+                }
+            } else {
+                if (!me.boxSprite) {
+                    me.createBox();
+                }
+                // Update the position of the outer box
+                me.boxSprite.setAttributes(bbox, true);
+                me.boxSprite.show(true);
+            }
+        }
+    },
+    
+    /** toggle
+     * @param {Boolean} Whether to show or hide the legend.
+     *
+     */
+    toggle: function(show) {
+      var me = this,
+          i = 0,
+          items = me.items,
+          len = items.length;
+
+      if (me.boxSprite) {
+          if (show) {
+              me.boxSprite.show(true);
+          } else {
+              me.boxSprite.hide(true);
+          }
+      }
+
+      for (; i < len; ++i) {
+          if (show) {
+            items[i].show(true);
+          } else {
+              items[i].hide(true);
+          }
+      }
+
+      me.visible = show;
+    }
+});