# Yahoo! UI Library

### charts 3.3.0

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

    /**
     * The BarSeries class renders bars positioned vertically along a category or time axis. The bars'
     * lengths are proportional to the values they represent along a horizontal axis.
     * and the relevant data points.
     *
     * @class BarSeries
     * @extends MarkerSeries
     * @uses Histogram
     * @constructor
     */
    Y.BarSeries = Y.Base.create("barSeries", Y.MarkerSeries, [Y.Histogram], {
        /**
         * @private
         */
        renderUI: function()
        {
            this._setNode();
        },

        /**
         * @private
         */
        _getMarkerDimensions: function(xcoord, ycoord, calculatedSize, offset)
        {
            var config = {
                top: ycoord + offset,
                left: this._leftOrigin
            };
            config.calculatedSize = xcoord - config.left;
            return config;
        },

        /**
         * @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 styles = Y.clone(this.get("styles").marker),
                    markerStyles,
                    state = this._getState(type),
                    xcoords = this.get("xcoords"),
                    ycoords = this.get("ycoords"),
                    marker = this._markers[i],
                    graph = this.get("graph"),
                    seriesCollection = graph.seriesTypes[this.get("type")],
                    seriesLen = seriesCollection.length,
                    seriesSize = 0,
                    offset = 0,
                    renderer,
                    n = 0,
                    ys = [],
                    order = this.get("order");
                markerStyles = state == "off" || !styles[state] ? styles : styles[state];
                markerStyles.fill.color = this._getItemColor(markerStyles.fill.color, i);
                markerStyles.border.color = this._getItemColor(markerStyles.border.color, i);
                markerStyles.width = (xcoords[i] - this._leftOrigin);
                marker.update(markerStyles);
                for(; n < seriesLen; ++n)
                {
                    renderer = seriesCollection[n].get("markers")[i];
                    ys[n] = ycoords[i] + seriesSize;
                    seriesSize += renderer.height;
                    if(order > n)
                    {
                        offset = seriesSize;
                    }
                    offset -= seriesSize/2;
                }
                for(n = 0; n < seriesLen; ++n)
                {
                    renderer = Y.one(seriesCollection[n]._graphicNodes[i]);
                    renderer.setStyle("top", (ys[n] - seriesSize/2));
                }
            }
        }
    }, {
        ATTRS: {
            /**
             * Read-only attribute indicating the type of series.
             *
             * @attribute type
             * @type String
             * @default bar
             */
            type: {
                value: "bar"
            },

            /**
             * Indicates the direction of the category axis that the bars are plotted against.
             *
             * @attribute direction
             * @type String
             */
            direction: {
                value: "vertical"
            }

            /**
             * Style properties used for drawing markers. This attribute is inherited from <code>MarkerSeries</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 12.</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.