#

API Docs for: 3.10.3
Show: Inherited Protected Private Deprecated

# File: charts/js/ChartBase.js

    /**
     * The ChartBase class is an abstract class used to create charts.
     *
     * @class ChartBase
     * @constructor
     * @submodule charts-base
     */
    function ChartBase() {}

    ChartBase.ATTRS = {
        /**
         * Data used to generate the chart.
         *
         * @attribute dataProvider
         * @type Array
         */
        dataProvider: {
            lazyAdd: false,

            valueFn: function()
            {
                var defDataProvider = [];
                if(!this._seriesKeysExplicitlySet)
                {
                    this.set("seriesKeys", this._buildSeriesKeys(defDataProvider), {src: "internal"});
                }
                return defDataProvider;
            },

            setter: function(val)
            {
                var dataProvider = this._setDataValues(val);
                if(!this._seriesKeysExplicitlySet)
                {
                    this.set("seriesKeys", this._buildSeriesKeys(dataProvider), {src: "internal"});
                }
                return dataProvider;
            }
        },

        /**
         * A collection of keys that map to the series axes. If no keys are set,
         * they will be generated automatically depending on the data structure passed into
         * the chart.
         *
         * @attribute seriesKeys
         * @type Array
         */
        seriesKeys: {
            lazyAdd: false,

            setter: function(val)
            {
                var opts = arguments[2];
                if(!val || (opts && opts.src && opts.src === "internal"))
                {
                    this._seriesKeysExplicitlySet = false;
                }
                else
                {
                    this._seriesKeysExplicitlySet = true;
                }
                return val;
            }
        },

        /**
         * Sets the `aria-label` for the chart.
         *
         * @attribute ariaLabel
         * @type String
         */
        ariaLabel: {
            value: "Chart Application",

            setter: function(val)
            {
                var cb = this.get("contentBox");
                if(cb)
                {
                    cb.setAttribute("aria-label", val);
                }
                return val;
            }
        },

        /**
         * Sets the aria description for the chart.
         *
         * @attribute ariaDescription
         * @type String
         */
        ariaDescription: {
            value: "Use the up and down keys to navigate between series. Use the left and right keys to navigate through items in a series.",

            setter: function(val)
            {
                if(this._description)
                {
                    this._description.setContent("");
                    this._description.appendChild(DOCUMENT.createTextNode(val));
                }
                return val;
            }
        },

        /**
         * Reference to the default tooltip available for the chart.
         * <p>Contains the following properties:</p>
         *  <dl>
         *      <dt>node</dt><dd>Reference to the actual dom node</dd>
         *      <dt>showEvent</dt><dd>Event that should trigger the tooltip</dd>
         *      <dt>hideEvent</dt><dd>Event that should trigger the removal of a tooltip (can be an event or an array of events)</dd>
         *      <dt>styles</dt><dd>A hash of style properties that will be applied to the tooltip node</dd>
         *      <dt>show</dt><dd>Indicates whether or not to show the tooltip</dd>
         *      <dt>markerEventHandler</dt><dd>Displays and hides tooltip based on marker events</dd>
         *      <dt>planarEventHandler</dt><dd>Displays and hides tooltip based on planar events</dd>
         *      <dt>markerLabelFunction</dt><dd>Reference to the function used to format a marker event triggered tooltip's text.
         *      The method contains the following arguments:
         *  <dl>
         *      <dt>categoryItem</dt><dd>An object containing the following:
         *  <dl>
         *      <dt>axis</dt><dd>The axis to which the category is bound.</dd>
         *      <dt>displayName</dt><dd>The display name set to the category (defaults to key if not provided).</dd>
         *      <dt>key</dt><dd>The key of the category.</dd>
         *      <dt>value</dt><dd>The value of the category.</dd>
         *  </dl>
         *  </dd>
         *  <dt>valueItem</dt><dd>An object containing the following:
         *      <dl>
         *          <dt>axis</dt><dd>The axis to which the item's series is bound.</dd>
         *          <dt>displayName</dt><dd>The display name of the series. (defaults to key if not provided)</dd>
         *          <dt>key</dt><dd>The key for the series.</dd>
         *          <dt>value</dt><dd>The value for the series item.</dd>
         *      </dl>
         *  </dd>
         *  <dt>itemIndex</dt><dd>The index of the item within the series.</dd>
         *  <dt>series</dt><dd> The `CartesianSeries` instance of the item.</dd>
         *  <dt>seriesIndex</dt><dd>The index of the series in the `seriesCollection`.</dd>
         *  </dl>
         *  The method returns an `HTMLElement` which is written into the DOM using `appendChild`. If you override this method and choose
         *  to return an html string, you will also need to override the tooltip's `setTextFunction` method to accept an html string.
         *  </dd>
         *  <dt>planarLabelFunction</dt><dd>Reference to the function used to format a planar event triggered tooltip's text
         *  <dl>
         *      <dt>categoryAxis</dt><dd> `CategoryAxis` Reference to the categoryAxis of the chart.
         *      <dt>valueItems</dt><dd>Array of objects for each series that has a data point in the coordinate plane of the event. Each
         *      object contains the following data:
         *  <dl>
         *      <dt>axis</dt><dd>The value axis of the series.</dd>
         *      <dt>key</dt><dd>The key for the series.</dd>
         *      <dt>value</dt><dd>The value for the series item.</dd>
         *      <dt>displayName</dt><dd>The display name of the series. (defaults to key if not provided)</dd>
         *  </dl>
         *  </dd>
         *      <dt>index</dt><dd>The index of the item within its series.</dd>
         *      <dt>seriesArray</dt><dd>Array of series instances for each value item.</dd>
         *      <dt>seriesIndex</dt><dd>The index of the series in the `seriesCollection`.</dd>
         *  </dl>
         *  </dd>
         *  </dl>
         *  The method returns an `HTMLElement` which is written into the DOM using `appendChild`. If you override this method and choose
         *  to return an html string, you will also need to override the tooltip's `setTextFunction` method to accept an html string.
         *  </dd>
         *  <dt>setTextFunction</dt><dd>Method that writes content returned from `planarLabelFunction` or `markerLabelFunction` into the
         *  the tooltip node. Has the following signature:
         *  <dl>
         *      <dt>label</dt><dd>The `HTMLElement` that the content is to be added.</dd>
         *      <dt>val</dt><dd>The content to be rendered into tooltip. This can be a `String` or `HTMLElement`. If an HTML string is used,
         *      it will be rendered as a string.</dd>
         *  </dl>
         *  </dd>
         *  </dl>
         * @attribute tooltip
         * @type Object
         */
        tooltip: {
            valueFn: "_getTooltip",

            setter: function(val)
            {
                return this._updateTooltip(val);
            }
        },

        /**
         * The key value used for the chart's category axis.
         *
         * @attribute categoryKey
         * @type String
         * @default category
         */
        categoryKey: {
            value: "category"
        },

        /**
         * Indicates the type of axis to use for the category axis.
         *
         *  <dl>
         *      <dt>category</dt><dd>Specifies a `CategoryAxis`.</dd>
         *      <dt>time</dt><dd>Specifies a `TimeAxis</dd>
         *  </dl>
         *
         * @attribute categoryType
         * @type String
         * @default category
         */
        categoryType:{
            value:"category"
        },

        /**
         * Indicates the the type of interactions that will fire events.
         *
         *  <dl>
         *      <dt>marker</dt><dd>Events will be broadcasted when the mouse interacts with individual markers.</dd>
         *      <dt>planar</dt><dd>Events will be broadcasted when the mouse intersects the plane of any markers on the chart.</dd>
         *      <dt>none</dt><dd>No events will be broadcasted.</dd>
         *  </dl>
         *
         * @attribute interactionType
         * @type String
         * @default marker
         */
        interactionType: {
            value: "marker"
        },

        /**
         * Reference to all the axes in the chart.
         *
         * @attribute axesCollection
         * @type Array
         */
        axesCollection: {},

        /**
         * Reference to graph instance.
         *
         * @attribute graph
         * @type Graph
         */
        graph: {
            valueFn: "_getGraph"
        },

        /**
         * Indicates whether or not markers for a series will be grouped and rendered in a single complex shape instance.
         *
         * @attribute groupMarkers
         * @type Boolean
         */
        groupMarkers: {
            value: false
        }
    };

    ChartBase.prototype = {
        /**
         * Handles groupMarkers change event.
         *
         * @method _groupMarkersChangeHandler
         * @param {Object} e Event object.
         * @private
         */
        _groupMarkersChangeHandler: function(e)
        {
            var graph = this.get("graph"),
                useGroupMarkers = e.newVal;
            if(graph)
            {
                graph.set("groupMarkers", useGroupMarkers);
            }
        },

        /**
         * Handler for itemRendered event.
         *
         * @method _itemRendered
         * @param {Object} e Event object.
         * @private
         */
        _itemRendered: function(e)
        {
            this._itemRenderQueue = this._itemRenderQueue.splice(1 + Y.Array.indexOf(this._itemRenderQueue, e.currentTarget), 1);
            if(this._itemRenderQueue.length < 1)
            {
                this._redraw();
            }
        },

        /**
         * Default value function for the `Graph` attribute.
         *
         * @method _getGraph
         * @return Graph
         * @private
         */
        _getGraph: function()
        {
            var graph = new Y.Graph({
                chart:this,
                groupMarkers: this.get("groupMarkers")
            });
            graph.after("chartRendered", Y.bind(function() {
                this.fire("chartRendered");
            }, this));
            return graph;
        },

        /**
         * Returns a series instance by index or key value.
         *
         * @method getSeries
         * @param val
         * @return CartesianSeries
         */
        getSeries: function(val)
        {
            var series = null,
                graph = this.get("graph");
            if(graph)
            {
                if(Y_Lang.isNumber(val))
                {
                    series = graph.getSeriesByIndex(val);
                }
                else
                {
                    series = graph.getSeriesByKey(val);
                }
            }
            return series;
        },

        /**
         * Returns an `Axis` instance by key reference. If the axis was explicitly set through the `axes` attribute,
         * the key will be the same as the key used in the `axes` object. For default axes, the key for
         * the category axis is the value of the `categoryKey` (`category`). For the value axis, the default
         * key is `values`.
         *
         * @method getAxisByKey
         * @param {String} val Key reference used to look up the axis.
         * @return Axis
         */
        getAxisByKey: function(val)
        {
            var axis,
                axes = this.get("axes");
            if(axes && axes.hasOwnProperty(val))
            {
                axis = axes[val];
            }
            return axis;
        },

        /**
         * Returns the category axis for the chart.
         *
         * @method getCategoryAxis
         * @return Axis
         */
        getCategoryAxis: function()
        {
            var axis,
                key = this.get("categoryKey"),
                axes = this.get("axes");
            if(axes.hasOwnProperty(key))
            {
                axis = axes[key];
            }
            return axis;
        },

        /**
         * Default direction of the chart.
         *
         * @property _direction
         * @type String
         * @default horizontal
         * @private
         */
        _direction: "horizontal",

        /**
         * Storage for the `dataProvider` attribute.
         *
         * @property _dataProvider
         * @type Array
         * @private
         */
        _dataProvider: null,

        /**
         * Setter method for `dataProvider` attribute.
         *
         * @method _setDataValues
         * @param {Array} val Array to be set as `dataProvider`.
         * @return Array
         * @private
         */
        _setDataValues: function(val)
        {
            if(Y_Lang.isArray(val[0]))
            {
                var hash,
                    dp = [],
                    cats = val[0],
                    i = 0,
                    l = cats.length,
                    n,
                    sl = val.length;
                for(; i < l; ++i)
                {
                    hash = {category:cats[i]};
                    for(n = 1; n < sl; ++n)
                    {
                        hash["series" + n] = val[n][i];
                    }
                    dp[i] = hash;
                }
                return dp;
            }
            return val;
        },

        /**
         * Storage for `seriesCollection` attribute.
         *
         * @property _seriesCollection
         * @type Array
         * @private
         */
        _seriesCollection: null,

        /**
         * Setter method for `seriesCollection` attribute.
         *
         * @property _setSeriesCollection
         * @param {Array} val Array of either `CartesianSeries` instances or objects containing series attribute key value pairs.
         * @private
         */
        _setSeriesCollection: function(val)
        {
            this._seriesCollection = val;
        },
        /**
         * Helper method that returns the axis class that a key references.
         *
         * @method _getAxisClass
         * @param {String} t The type of axis.
         * @return Axis
         * @private
         */
        _getAxisClass: function(t)
        {
            return this._axisClass[t];
        },

        /**
         * Key value pairs of axis types.
         *
         * @property _axisClass
         * @type Object
         * @private
         */
        _axisClass: {
            stacked: Y.StackedAxis,
            numeric: Y.NumericAxis,
            category: Y.CategoryAxis,
            time: Y.TimeAxis
        },

        /**
         * Collection of axes.
         *
         * @property _axes
         * @type Array
         * @private
         */
        _axes: null,

        /**
         * @method initializer
         * @private
         */
        initializer: function()
        {
            this._itemRenderQueue = [];
            this._seriesIndex = -1;
            this._itemIndex = -1;
            this.after("dataProviderChange", this._dataProviderChangeHandler);
        },

        /**
         * @method renderUI
         * @private
         */
        renderUI: function()
        {
            var tt = this.get("tooltip"),
                bb = this.get("boundingBox"),
                cb = this.get("contentBox");
            //move the position = absolute logic to a class file
            bb.setStyle("position", "absolute");
            cb.setStyle("position", "absolute");
            this._addAxes();
            this._addSeries();
            if(tt && tt.show)
            {
                this._addTooltip();
            }
            this._setAriaElements(bb, cb);
        },

        /**
         * Creates an aria `live-region`, `aria-label` and `aria-describedby` for the Chart.
         *
         * @method _setAriaElements
         * @param {Node} cb Reference to the Chart's `contentBox` attribute.
         * @private
         */
        _setAriaElements: function(bb, cb)
        {
            var description = this._getAriaOffscreenNode(),
                id = this.get("id") + "_description",
                liveRegion = this._getAriaOffscreenNode();
            cb.set("tabIndex", 0);
            cb.set("role", "img");
            cb.setAttribute("aria-label", this.get("ariaLabel"));
            cb.setAttribute("aria-describedby", id);
            description.set("id", id);
            description.set("tabIndex", -1);
            description.appendChild(DOCUMENT.createTextNode(this.get("ariaDescription")));
            liveRegion.set("id", "live-region");
            liveRegion.set("aria-live", "polite");
            liveRegion.set("aria-atomic", "true");
            liveRegion.set("role", "status");
            bb.setAttribute("role", "application");
            bb.appendChild(description);
            bb.appendChild(liveRegion);
            this._description = description;
            this._liveRegion = liveRegion;
        },

        /**
         * Sets a node offscreen for use as aria-description or aria-live-regin.
         *
         * @method _setOffscreen
         * @return Node
         * @private
         */
        _getAriaOffscreenNode: function()
        {
            var node = Y.Node.create("<div></div>"),
                ie = Y.UA.ie,
                clipRect = (ie && ie < 8) ? "rect(1px 1px 1px 1px)" : "rect(1px, 1px, 1px, 1px)";
            node.setStyle("position", "absolute");
            node.setStyle("height", "1px");
            node.setStyle("width", "1px");
            node.setStyle("overflow", "hidden");
            node.setStyle("clip", clipRect);
            return node;
        },

        /**
         * @method syncUI
         * @private
         */
        syncUI: function()
        {
            this._redraw();
        },

        /**
         * @method bindUI
         * @private
         */
        bindUI: function()
        {
            this.after("tooltipChange", Y.bind(this._tooltipChangeHandler, this));
            this.after("widthChange", this._sizeChanged);
            this.after("heightChange", this._sizeChanged);
            this.after("groupMarkersChange", this._groupMarkersChangeHandler);
            var tt = this.get("tooltip"),
                hideEvent = "mouseout",
                showEvent = "mouseover",
                cb = this.get("contentBox"),
                interactionType = this.get("interactionType"),
                i = 0,
                len,
                markerClassName = "." + SERIES_MARKER,
                isTouch = ((WINDOW && ("ontouchstart" in WINDOW)) && !(Y.UA.chrome && Y.UA.chrome < 6));
            Y.on("keydown", Y.bind(function(e) {
                var key = e.keyCode,
                    numKey = parseFloat(key),
                    msg;
                if(numKey > 36 && numKey < 41)
                {
                    e.halt();
                    msg = this._getAriaMessage(numKey);
                    this._liveRegion.setContent("");
                    this._liveRegion.appendChild(DOCUMENT.createTextNode(msg));
                }
            }, this), this.get("contentBox"));
            if(interactionType === "marker")
            {
                //if touch capabilities, toggle tooltip on touchend. otherwise, the tooltip attribute's hideEvent/showEvent types.
                hideEvent = tt.hideEvent;
                showEvent = tt.showEvent;
                if(isTouch)
                {
                    Y.delegate("touchend", Y.bind(this._markerEventDispatcher, this), cb, markerClassName);
                    //hide active tooltip if the chart is touched
                    Y.on("touchend", Y.bind(function(e) {
                        //only halt the event if it originated from the chart
                        if(cb.contains(e.target))
                        {
                            e.halt(true);
                        }
                        if(this._activeMarker)
                        {
                            this._activeMarker = null;
                            this.hideTooltip(e);
                        }
                    }, this));
                }
                else
                {
                    Y.delegate("mouseenter", Y.bind(this._markerEventDispatcher, this), cb, markerClassName);
                    Y.delegate("mousedown", Y.bind(this._markerEventDispatcher, this), cb, markerClassName);
                    Y.delegate("mouseup", Y.bind(this._markerEventDispatcher, this), cb, markerClassName);
                    Y.delegate("mouseleave", Y.bind(this._markerEventDispatcher, this), cb, markerClassName);
                    Y.delegate("click", Y.bind(this._markerEventDispatcher, this), cb, markerClassName);
                    Y.delegate("mousemove", Y.bind(this._positionTooltip, this), cb, markerClassName);
                }
            }
            else if(interactionType === "planar")
            {
                if(isTouch)
                {
                    this._overlay.on("touchend", Y.bind(this._planarEventDispatcher, this));
                }
                else
                {
                    this._overlay.on("mousemove", Y.bind(this._planarEventDispatcher, this));
                    this.on("mouseout", this.hideTooltip);
                }
            }
            if(tt)
            {
                this.on("markerEvent:touchend", Y.bind(function(e) {
                    var marker = e.series.get("markers")[e.index];
                    if(this._activeMarker && marker === this._activeMarker)
                    {
                        this._activeMarker = null;
                        this.hideTooltip(e);
                    }
                    else
                    {

                        this._activeMarker = marker;
                        tt.markerEventHandler.apply(this, [e]);
                    }
                }, this));
                if(hideEvent && showEvent && hideEvent === showEvent)
                {
                    this.on(interactionType + "Event:" + hideEvent, this.toggleTooltip);
                }
                else
                {
                    if(showEvent)
                    {
                        this.on(interactionType + "Event:" + showEvent, tt[interactionType + "EventHandler"]);
                    }
                    if(hideEvent)
                    {
                        if(Y_Lang.isArray(hideEvent))
                        {
                            len = hideEvent.length;
                            for(; i < len; ++i)
                            {
                                this.on(interactionType + "Event:" + hideEvent[i], this.hideTooltip);
                            }
                        }
                        this.on(interactionType + "Event:" + hideEvent, this.hideTooltip);
                    }
                }
            }
        },

        /**
         * Event handler for marker events.
         *
         * @method _markerEventDispatcher
         * @param {Object} e Event object.
         * @private
         */
        _markerEventDispatcher: function(e)
        {
            var type = e.type,
                cb = this.get("contentBox"),
                markerNode = e.currentTarget,
                strArr = markerNode.getAttribute("id").split("_"),
                index = strArr.pop(),
                seriesIndex = strArr.pop(),
                series = this.getSeries(parseInt(seriesIndex, 10)),
                items = this.getSeriesItems(series, index),
                isTouch = e && e.hasOwnProperty("changedTouches"),
                pageX = isTouch ? e.changedTouches[0].pageX : e.pageX,
                pageY = isTouch ? e.changedTouches[0].pageY : e.pageY,
                x = pageX - cb.getX(),
                y = pageY - cb.getY();
            if(type === "mouseenter")
            {
                type = "mouseover";
            }
            else if(type === "mouseleave")
            {
                type = "mouseout";
            }
            series.updateMarkerState(type, index);
            e.halt();
            /**
             * Broadcasts when `interactionType` is set to `marker` and a series marker has received a mouseover event.
             *
             *
             * @event markerEvent:mouseover
             * @preventable false
             * @param {EventFacade} e Event facade with the following additional
             *   properties:
             *  <dl>
             *      <dt>categoryItem</dt><dd>Hash containing information about the category `Axis`.</dd>
             *      <dt>valueItem</dt><dd>Hash containing information about the value `Axis`.</dd>
             *      <dt>node</dt><dd>The dom node of the marker.</dd>
             *      <dt>x</dt><dd>The x-coordinate of the mouse in relation to the Chart.</dd>
             *      <dt>y</dt><dd>The y-coordinate of the mouse in relation to the Chart.</dd>
             *      <dt>series</dt><dd>Reference to the series of the marker.</dd>
             *      <dt>index</dt><dd>Index of the marker in the series.</dd>
             *      <dt>seriesIndex</dt><dd>The `order` of the marker's series.</dd>
             *  </dl>
             */
            /**
             * Broadcasts when `interactionType` is set to `marker` and a series marker has received a mouseout event.
             *
             * @event markerEvent:mouseout
             * @preventable false
             * @param {EventFacade} e Event facade with the following additional
             *   properties:
             *  <dl>
             *      <dt>categoryItem</dt><dd>Hash containing information about the category `Axis`.</dd>
             *      <dt>valueItem</dt><dd>Hash containing information about the value `Axis`.</dd>
             *      <dt>node</dt><dd>The dom node of the marker.</dd>
             *      <dt>x</dt><dd>The x-coordinate of the mouse in relation to the Chart.</dd>
             *      <dt>y</dt><dd>The y-coordinate of the mouse in relation to the Chart.</dd>
             *      <dt>series</dt><dd>Reference to the series of the marker.</dd>
             *      <dt>index</dt><dd>Index of the marker in the series.</dd>
             *      <dt>seriesIndex</dt><dd>The `order` of the marker's series.</dd>
             *  </dl>
             */
            /**
             * Broadcasts when `interactionType` is set to `marker` and a series marker has received a mousedown event.
             *
             * @event markerEvent:mousedown
             * @preventable false
             * @param {EventFacade} e Event facade with the following additional
             *   properties:
             *  <dl>
             *      <dt>categoryItem</dt><dd>Hash containing information about the category `Axis`.</dd>
             *      <dt>valueItem</dt><dd>Hash containing information about the value `Axis`.</dd>
             *      <dt>node</dt><dd>The dom node of the marker.</dd>
             *      <dt>x</dt><dd>The x-coordinate of the mouse in relation to the Chart.</dd>
             *      <dt>y</dt><dd>The y-coordinate of the mouse in relation to the Chart.</dd>
             *      <dt>series</dt><dd>Reference to the series of the marker.</dd>
             *      <dt>index</dt><dd>Index of the marker in the series.</dd>
             *      <dt>seriesIndex</dt><dd>The `order` of the marker's series.</dd>
             *  </dl>
             */
            /**
             * Broadcasts when `interactionType` is set to `marker` and a series marker has received a mouseup event.
             *
             * @event markerEvent:mouseup
             * @preventable false
             * @param {EventFacade} e Event facade with the following additional
             *   properties:
             *  <dl>
             *      <dt>categoryItem</dt><dd>Hash containing information about the category `Axis`.</dd>
             *      <dt>valueItem</dt><dd>Hash containing information about the value `Axis`.</dd>
             *      <dt>node</dt><dd>The dom node of the marker.</dd>
             *      <dt>x</dt><dd>The x-coordinate of the mouse in relation to the Chart.</dd>
             *      <dt>y</dt><dd>The y-coordinate of the mouse in relation to the Chart.</dd>
             *      <dt>series</dt><dd>Reference to the series of the marker.</dd>
             *      <dt>index</dt><dd>Index of the marker in the series.</dd>
             *      <dt>seriesIndex</dt><dd>The `order` of the marker's series.</dd>
             *  </dl>
             */
            /**
             * Broadcasts when `interactionType` is set to `marker` and a series marker has received a click event.
             *
             * @event markerEvent:click
             * @preventable false
             * @param {EventFacade} e Event facade with the following additional
             *   properties:
             *  <dl>
             *      <dt>categoryItem</dt><dd>Hash containing information about the category `Axis`.</dd>
             *      <dt>valueItem</dt><dd>Hash containing information about the value `Axis`.</dd>
             *      <dt>node</dt><dd>The dom node of the marker.</dd>
             *      <dt>x</dt><dd>The x-coordinate of the mouse in relation to the Chart.</dd>
             *      <dt>y</dt><dd>The y-coordinate of the mouse in relation to the Chart.</dd>
             *      <dt>pageX</dt><dd>The x location of the event on the page (including scroll)</dd>
             *      <dt>pageY</dt><dd>The y location of the event on the page (including scroll)</dd>
             *      <dt>series</dt><dd>Reference to the series of the marker.</dd>
             *      <dt>index</dt><dd>Index of the marker in the series.</dd>
             *      <dt>seriesIndex</dt><dd>The `order` of the marker's series.</dd>
             *      <dt>originEvent</dt><dd>Underlying dom event.</dd>
             *  </dl>
             */
            this.fire("markerEvent:" + type, {
                originEvent: e,
                pageX:pageX,
                pageY:pageY,
                categoryItem:items.category,
                valueItem:items.value,
                node:markerNode,
                x:x,
                y:y,
                series:series,
                index:index,
                seriesIndex:seriesIndex
            });
        },

        /**
         * Event handler for dataProviderChange.
         *
         * @method _dataProviderChangeHandler
         * @param {Object} e Event object.
         * @private
         */
        _dataProviderChangeHandler: function(e)
        {
            var dataProvider = e.newVal,
                axes,
                i,
                axis;
            this._seriesIndex = -1;
            this._itemIndex = -1;
            if(this instanceof Y.CartesianChart)
            {
                this.set("axes", this.get("axes"));
                this.set("seriesCollection", this.get("seriesCollection"));
            }
            axes = this.get("axes");
            if(axes)
            {
                for(i in axes)
                {
                    if(axes.hasOwnProperty(i))
                    {
                        axis = axes[i];
                        if(axis instanceof Y.Axis)
                        {
                            if(axis.get("position") !== "none")
                            {
                                this._addToAxesRenderQueue(axis);
                            }
                            axis.set("dataProvider", dataProvider);
                        }
                    }
                }
            }
        },

        /**
         * Event listener for toggling the tooltip. If a tooltip is visible, hide it. If not, it
         * will create and show a tooltip based on the event object.
         *
         * @method toggleTooltip
         * @param {Object} e Event object.
         */
        toggleTooltip: function(e)
        {
            var tt = this.get("tooltip");
            if(tt.visible)
            {
                this.hideTooltip();
            }
            else
            {
                tt.markerEventHandler.apply(this, [e]);
            }
        },

        /**
         * Shows a tooltip
         *
         * @method _showTooltip
         * @param {String} msg Message to dispaly in the tooltip.
         * @param {Number} x x-coordinate
         * @param {Number} y y-coordinate
         * @private
         */
        _showTooltip: function(msg, x, y)
        {
            var tt = this.get("tooltip"),
                node = tt.node;
            if(msg)
            {
                tt.visible = true;
                tt.setTextFunction(node, msg);
                node.setStyle("top", y + "px");
                node.setStyle("left", x + "px");
                node.setStyle("visibility", "visible");
            }
        },

        /**
         * Positions the tooltip
         *
         * @method _positionTooltip
         * @param {Object} e Event object.
         * @private
         */
        _positionTooltip: function(e)
        {
            var tt = this.get("tooltip"),
                node = tt.node,
                cb = this.get("contentBox"),
                x = (e.pageX + 10) - cb.getX(),
                y = (e.pageY + 10) - cb.getY();
            if(node)
            {
                node.setStyle("left", x + "px");
                node.setStyle("top", y + "px");
            }
        },

        /**
         * Hides the default tooltip
         *
         * @method hideTooltip
         */
        hideTooltip: function()
        {
            var tt = this.get("tooltip"),
                node = tt.node;
            tt.visible = false;
            node.set("innerHTML", "");
            node.setStyle("left", -10000);
            node.setStyle("top", -10000);
            node.setStyle("visibility", "hidden");
        },

        /**
         * Adds a tooltip to the dom.
         *
         * @method _addTooltip
         * @private
         */
        _addTooltip: function()
        {
            var tt = this.get("tooltip"),
                id = this.get("id") + "_tooltip",
                cb = this.get("contentBox"),
                oldNode = DOCUMENT.getElementById(id);
            if(oldNode)
            {
                cb.removeChild(oldNode);
            }
            tt.node.set("id", id);
            tt.node.setStyle("visibility", "hidden");
            cb.appendChild(tt.node);
        },

        /**
         * Updates the tooltip attribute.
         *
         * @method _updateTooltip
         * @param {Object} val Object containing properties for the tooltip.
         * @return Object
         * @private
         */
        _updateTooltip: function(val)
        {
            var tt = this.get("tooltip") || this._getTooltip(),
                i,
                styles,
                node,
                props = {
                    markerLabelFunction:"markerLabelFunction",
                    planarLabelFunction:"planarLabelFunction",
                    setTextFunction:"setTextFunction",
                    showEvent:"showEvent",
                    hideEvent:"hideEvent",
                    markerEventHandler:"markerEventHandler",
                    planarEventHandler:"planarEventHandler",
                    show:"show"
                };
            if(Y_Lang.isObject(val))
            {
                styles = val.styles;
                node = Y.one(val.node) || tt.node;
                if(styles)
                {
                    for(i in styles)
                    {
                        if(styles.hasOwnProperty(i))
                        {
                            node.setStyle(i, styles[i]);
                        }
                    }
                }
                for(i in props)
                {
                    if(val.hasOwnProperty(i))
                    {
                        tt[i] = val[i];
                    }
                }
                tt.node = node;
            }
            return tt;
        },

        /**
         * Default getter for `tooltip` attribute.
         *
         * @method _getTooltip
         * @return Object
         * @private
         */
        _getTooltip: function()
        {
            var node = DOCUMENT.createElement("div"),
                tooltipClass = _getClassName("chart-tooltip"),
                tt = {
                    setTextFunction: this._setText,
                    markerLabelFunction: this._tooltipLabelFunction,
                    planarLabelFunction: this._planarLabelFunction,
                    show: true,
                    hideEvent: "mouseout",
                    showEvent: "mouseover",
                    markerEventHandler: function(e)
                    {
                        var tt = this.get("tooltip"),
                        msg = tt.markerLabelFunction.apply(this, [e.categoryItem, e.valueItem, e.index, e.series, e.seriesIndex]);
                        this._showTooltip(msg, e.x + 10, e.y + 10);
                    },
                    planarEventHandler: function(e)
                    {
                        var tt = this.get("tooltip"),
                            msg ,
                            categoryAxis = this.get("categoryAxis");
                        msg = tt.planarLabelFunction.apply(this, [categoryAxis, e.valueItem, e.index, e.items, e.seriesIndex]);
                        this._showTooltip(msg, e.x + 10, e.y + 10);
                    }
                };
            node = Y.one(node);
            node.set("id", this.get("id") + "_tooltip");
            node.setStyle("fontSize", "85%");
            node.setStyle("opacity", "0.83");
            node.setStyle("position", "absolute");
            node.setStyle("paddingTop", "2px");
            node.setStyle("paddingRight", "5px");
            node.setStyle("paddingBottom", "4px");
            node.setStyle("paddingLeft", "2px");
            node.setStyle("backgroundColor", "#fff");
            node.setStyle("border", "1px solid #dbdccc");
            node.setStyle("pointerEvents", "none");
            node.setStyle("zIndex", 3);
            node.setStyle("whiteSpace", "noWrap");
            node.setStyle("visibility", "hidden");
            node.addClass(tooltipClass);
            tt.node = Y.one(node);
            return tt;
        },

        /**
         * Formats tooltip text when `interactionType` is `planar`.
         *
         * @method _planarLabelFunction
         * @param {Axis} categoryAxis Reference to the categoryAxis of the chart.
         * @param {Array} valueItems Array of objects for each series that has a data point in the coordinate plane of the event.
         * Each object contains the following data:
         *  <dl>
         *      <dt>axis</dt><dd>The value axis of the series.</dd>
         *      <dt>key</dt><dd>The key for the series.</dd>
         *      <dt>value</dt><dd>The value for the series item.</dd>
         *      <dt>displayName</dt><dd>The display name of the series. (defaults to key if not provided)</dd>
         *  </dl>
         *  @param {Number} index The index of the item within its series.
         *  @param {Array} seriesArray Array of series instances for each value item.
         *  @param {Number} seriesIndex The index of the series in the `seriesCollection`.
         *  @return {String | HTML}
         * @private
         */
        _planarLabelFunction: function(categoryAxis, valueItems, index, seriesArray)
        {
            var msg = DOCUMENT.createElement("div"),
                valueItem,
                i = 0,
                len = seriesArray.length,
                axis,
                categoryValue,
                seriesValue,
                series;
            if(categoryAxis)
            {
                categoryValue = categoryAxis.get("labelFunction").apply(
                    this,
                    [categoryAxis.getKeyValueAt(this.get("categoryKey"), index), categoryAxis.get("labelFormat")]
                );
                if(!Y_Lang.isObject(categoryValue))
                {
                    categoryValue = DOCUMENT.createTextNode(categoryValue);
                }
                msg.appendChild(categoryValue);
            }

            for(; i < len; ++i)
            {
                series = seriesArray[i];
                if(series.get("visible"))
                {
                    valueItem = valueItems[i];
                    axis = valueItem.axis;
                    seriesValue =  axis.get("labelFunction").apply(
                        this,
                        [axis.getKeyValueAt(valueItem.key, index), axis.get("labelFormat")]
                    );
                    msg.appendChild(DOCUMENT.createElement("br"));
                    msg.appendChild(DOCUMENT.createTextNode(valueItem.displayName));
                    msg.appendChild(DOCUMENT.createTextNode(": "));
                    if(!Y_Lang.isObject(seriesValue))
                    {
                        seriesValue = DOCUMENT.createTextNode(seriesValue);
                    }
                    msg.appendChild(seriesValue);
                }
            }
            return msg;
        },

        /**
         * Formats tooltip text when `interactionType` is `marker`.
         *
         * @method _tooltipLabelFunction
         * @param {Object} categoryItem An object containing the following:
         *  <dl>
         *      <dt>axis</dt><dd>The axis to which the category is bound.</dd>
         *      <dt>displayName</dt><dd>The display name set to the category (defaults to key if not provided)</dd>
         *      <dt>key</dt><dd>The key of the category.</dd>
         *      <dt>value</dt><dd>The value of the category</dd>
         *  </dl>
         * @param {Object} valueItem An object containing the following:
         *  <dl>
         *      <dt>axis</dt><dd>The axis to which the item's series is bound.</dd>
         *      <dt>displayName</dt><dd>The display name of the series. (defaults to key if not provided)</dd>
         *      <dt>key</dt><dd>The key for the series.</dd>
         *      <dt>value</dt><dd>The value for the series item.</dd>
         *  </dl>
         * @return {String | HTML}
         * @private
         */
        _tooltipLabelFunction: function(categoryItem, valueItem)
        {
            var msg = DOCUMENT.createElement("div"),
                categoryValue = categoryItem.axis.get("labelFunction").apply(
                    this,
                    [categoryItem.value, categoryItem.axis.get("labelFormat")]
                ),
                seriesValue = valueItem.axis.get("labelFunction").apply(
                    this,
                    [valueItem.value, valueItem.axis.get("labelFormat")]
                );
            msg.appendChild(DOCUMENT.createTextNode(categoryItem.displayName));
            msg.appendChild(DOCUMENT.createTextNode(": "));
            if(!Y_Lang.isObject(categoryValue))
            {
                categoryValue = DOCUMENT.createTextNode(categoryValue);
            }
            msg.appendChild(categoryValue);
            msg.appendChild(DOCUMENT.createElement("br"));
            msg.appendChild(DOCUMENT.createTextNode(valueItem.displayName));
            msg.appendChild(DOCUMENT.createTextNode(": "));
            if(!Y_Lang.isObject(seriesValue))
            {
                seriesValue = DOCUMENT.createTextNode(seriesValue);
            }
            msg.appendChild(seriesValue);
            return msg;
        },

        /**
         * Event handler for the tooltipChange.
         *
         * @method _tooltipChangeHandler
         * @param {Object} e Event object.
         * @private
         */
        _tooltipChangeHandler: function()
        {
            if(this.get("tooltip"))
            {
                var tt = this.get("tooltip"),
                    node = tt.node,
                    show = tt.show,
                    cb = this.get("contentBox");
                if(node && show)
                {
                    if(!cb.contains(node))
                    {
                        this._addTooltip();
                    }
                }
            }
        },

        /**
         * Updates the content of text field. This method writes a value into a text field using
         * `appendChild`. If the value is a `String`, it is converted to a `TextNode` first.
         *
         * @method _setText
         * @param label {HTMLElement} label to be updated
         * @param val {String} value with which to update the label
         * @private
         */
        _setText: function(textField, val)
        {
            textField.setContent("");
            if(Y_Lang.isNumber(val))
            {
                val = val + "";
            }
            else if(!val)
            {
                val = "";
            }
            if(IS_STRING(val))
            {
                val = DOCUMENT.createTextNode(val);
            }
            textField.appendChild(val);
        },

        /**
         * Returns all the keys contained in a  `dataProvider`.
         *
         * @method _getAllKeys
         * @param {Array} dp Collection of objects to be parsed.
         * @return Object
         */
        _getAllKeys: function(dp)
        {
            var i = 0,
                len = dp.length,
                item,
                key,
                keys = {};
            for(; i < len; ++i)
            {
                item = dp[i];
                for(key in item)
                {
                    if(item.hasOwnProperty(key))
                    {
                        keys[key] = true;
                    }
                }
            }
            return keys;
        },

        /**
         * Constructs seriesKeys if not explicitly specified.
         *
         * @method _buildSeriesKeys
         * @param {Array} dataProvider The dataProvider for the chart.
         * @return Array
         * @private
         */
        _buildSeriesKeys: function(dataProvider)
        {
            var allKeys,
                catKey = this.get("categoryKey"),
                keys = [],
                i;
            if(this._seriesKeysExplicitlySet)
            {
                return this._seriesKeys;
            }
            allKeys = this._getAllKeys(dataProvider);
            for(i in allKeys)
            {
                if(allKeys.hasOwnProperty(i) && i !== catKey)
                {
                    keys.push(i);
                }
            }
            return keys;
        }
    };
    Y.ChartBase = ChartBase;