# Yahoo! UI Library

### charts 3.3.0

Yahoo! UI Library > charts > StackedBarSeries.js (source view)
Search:
Filters Show Private Show Protected Show Deprecated

    /**
     * The StackedBarSeries renders bar chart in which series are stacked horizontally to show
     * their contribution to the cumulative total.
     *
     * @class StackedBarSeries
     * @extends BarSeries
     * @uses StackingUtil
     * @constructor
     */
    Y.StackedBarSeries = Y.Base.create("stackedBarSeries", Y.BarSeries, [Y.StackingUtil], {
        /**
         * @protected
         *
         * Draws the series.
         *
         * @method drawSeries
         */
        drawSeries: function()
    	{
    	    if(this.get("xcoords").length < 1)
    		{
    			return;
    		}

            var style = this.get("styles").marker,
                w = style.width,
                h = style.height,
                xcoords = this.get("xcoords"),
                ycoords = this.get("ycoords"),
                i = 0,
                len = xcoords.length,
                top = ycoords[0],
                type = this.get("type"),
                graph = this.get("graph"),
                seriesCollection = graph.seriesTypes[type],
                ratio,
                order = this.get("order"),
                graphOrder = this.get("graphOrder"),
                left,
                marker,
                lastCollection,
                negativeBaseValues,
                positiveBaseValues,
                useOrigin = order === 0,
                totalHeight = len * h,
                hotspot,
                isChrome = ISCHROME;
            this._createMarkerCache();
            if(isChrome)
            {
                this._createHotspotCache();
            }
            if(totalHeight > this.get("height"))
            {
                ratio = this.height/totalHeight;
                h *= ratio;
                h = Math.max(h, 1);
            }
            if(!useOrigin)
            {
                lastCollection = seriesCollection[order - 1];
                negativeBaseValues = lastCollection.get("negativeBaseValues");
                positiveBaseValues = lastCollection.get("positiveBaseValues");
            }
            else
            {
                negativeBaseValues = [];
                positiveBaseValues = [];
            }
            this.set("negativeBaseValues", negativeBaseValues);
            this.set("positiveBaseValues", positiveBaseValues);
            for(i = 0; i < len; ++i)
            {
                top = ycoords[i];
                left = xcoords[i];

                if(useOrigin)
                {
                    w = left - this._leftOrigin;
                    if(left > this._leftOrigin)
                    {
                        positiveBaseValues[i] = left;
                        negativeBaseValues[i] = this._leftOrigin;
                    }
                    else if(left < this._leftOrigin)
                    {
                        positiveBaseValues[i] = this._leftOrigin;
                        negativeBaseValues[i] = left;
                    }
                    else
                    {
                        positiveBaseValues[i] = left;
                        negativeBaseValues[i] = this._leftOrigin;
                    }
                    left -= w;
                }
                else
                {
                    if(left < this._leftOrigin)
                    {
                        left = negativeBaseValues[i] - (this._leftOrigin - xcoords[i]);
                        w = negativeBaseValues[i] - left;
                        negativeBaseValues[i] = left;
                    }
                    else if(left > this._leftOrigin)
                    {
                        left += (positiveBaseValues[i] - this._leftOrigin);
                        w = left - positiveBaseValues[i];
                        positiveBaseValues[i] = left;
                        left -= w;
                    }
                }
                top -= h/2;
                style.width = w;
                style.height = h;
                marker = this.getMarker(style, graphOrder, i);
                marker.setPosition(left, top);
                if(isChrome)
                {
                    hotspot = this.getHotspot(style, graphOrder, i);
                    hotspot.setPosition(left, top);
                    hotspot.parentNode.style.zIndex = 5;
                }
            }
            this._clearMarkerCache();
            if(isChrome)
            {
                this._clearHotspotCache();
            }
        },

        /**
         * @protected
         *
         * Resizes and positions markers based on a mouse interaction.
         *
         * @method updateMarkerState
         * @param {String} type state of the marker
         * @param {Number} i index of the marker
         */
        updateMarkerState: function(type, i)
        {
            if(this._markers[i])
            {
                var state = this._getState(type),
                    ycoords = this.get("ycoords"),
                    marker = this._markers[i],
                    styles = this.get("styles").marker,
                    h = styles.height,
                    markerStyles = state == "off" || !styles[state] ? styles : styles[state];
                markerStyles.width = marker.width;
                marker.update(markerStyles);
                if(marker.parentNode)
                {
                    Y.one(marker.parentNode).setStyle("top", (ycoords[i] - h/2));
                }
            }
        },

        /**
         * @protected
         *
         * Returns default values for the <code>styles</code> attribute.
         *
         * @method _getPlotDefaults
         * @return Object
         */
        _getPlotDefaults: function()
        {
            var defs = {
                fill:{
                    type: "solid",
                    alpha: 1,
                    colors:null,
                    alphas: null,
                    ratios: null
                },
                border:{
                    weight: 0,
                    alpha: 1
                },
                width: 24,
                height: 24,
                shape: "rect",

                padding:{
                    top: 0,
                    left: 0,
                    right: 0,
                    bottom: 0
                }
            };
            defs.fill.color = this._getDefaultColor(this.get("graphOrder"), "fill");
            defs.border.color = this._getDefaultColor(this.get("graphOrder"), "border");
            return defs;
        }
    }, {
        ATTRS: {
            /**
             * Read-only attribute indicating the type of series.
             *
             * @attribute type
             * @type String
             * @default stackedBar
             */
            type: {
                value: "stackedBar"
            },

            /**
             * Direction of the series
             *
             * @attribute direction
             * @type String
             * @default vertical
             */
            direction: {
                value: "vertical"
            },

            /**
             * @private
             *
             * @attribute negativeBaseValues
             * @type Array
             * @default null
             */
            negativeBaseValues: {
                value: null
            },

            /**
             * @private
             *
             * @attribute positiveBaseValues
             * @type Array
             * @default null
             */
            positiveBaseValues: {
                value: null
            }

            /**
             * Style properties used for drawing markers. This attribute is inherited from <code>BarSeries</code>. Below are the default values:
             *  <dl>
             *      <dt>fill</dt><dd>A hash containing the following values:
             *          <dl>
             *              <dt>color</dt><dd>Color of the fill. The default value is determined by the order of the series on the graph. The color
             *              will be retrieved from the below array:<br/>
             *              <code>["#66007f", "#a86f41", "#295454", "#996ab2", "#e8cdb7", "#90bdbd","#000000","#c3b8ca", "#968373", "#678585"]</code>
             *              </dd>
             *              <dt>alpha</dt><dd>Number from 0 to 1 indicating the opacity of the marker fill. The default value is 1.</dd>
             *          </dl>
             *      </dd>
             *      <dt>border</dt><dd>A hash containing the following values:
             *          <dl>
             *              <dt>color</dt><dd>Color of the border. The default value is determined by the order of the series on the graph. The color
             *              will be retrieved from the below array:<br/>
             *              <code>["#205096", "#b38206", "#000000", "#94001e", "#9d6fa0", "#e55b00", "#5e85c9", "#adab9e", "#6ac291", "#006457"]</code>
             *              <dt>alpha</dt><dd>Number from 0 to 1 indicating the opacity of the marker border. The default value is 1.</dd>
             *              <dt>weight</dt><dd>Number indicating the width of the border. The default value is 1.</dd>
             *          </dl>
             *      </dd>
             *      <dt>height</dt><dd>indicates the width of the marker. The default value is 24.</dd>
             *      <dt>over</dt><dd>hash containing styles for markers when highlighted by a <code>mouseover</code> event. The default
             *      values for each style is null. When an over style is not set, the non-over value will be used. For example,
             *      the default value for <code>marker.over.fill.color</code> is equivalent to <code>marker.fill.color</code>.</dd>
             *  </dl>
             *
             * @attribute styles
             * @type Object
             */
        }
    });

Copyright © 2011 Yahoo! Inc. All rights reserved.