#

API Docs for: 3.10.3
Show: Inherited Protected Private Deprecated

# File: charts/js/ColumnSeries.js

    /**
     * Provides functionality for creating a column series.
     *
     * @module charts
     * @submodule series-column
     */
    /**
     * The ColumnSeries class renders columns positioned horizontally along a category or time axis. The columns'
     * lengths are proportional to the values they represent along a vertical axis.
     * and the relevant data points.
     *
     * @class ColumnSeries
     * @extends MarkerSeries
     * @uses Histogram
     * @constructor
     * @param {Object} config (optional) Configuration parameters.
     * @submodule series-column
     */
    Y.ColumnSeries = Y.Base.create("columnSeries", Y.MarkerSeries, [Y.Histogram], {
        /**
         * Helper method for calculating the size of markers.
         *
         * @method _getMarkerDimensions
         * @param {Number} xcoord The x-coordinate representing the data point for the marker.
         * @param {Number} ycoord The y-coordinate representing the data point for the marker.
         * @param {Number} calculatedSize The calculated size for the marker. For a `BarSeries` is it the width. For a `ColumnSeries` it is the height.
         * @param {Number} offset Distance of position offset dictated by other marker series in the same graph.
         * @return Object
         * @private
         */
        _getMarkerDimensions: function(xcoord, ycoord, calculatedSize, offset)
        {
            var config = {
                left: xcoord + offset
            };
            if(this._bottomOrigin >= ycoord)
            {
                config.top = ycoord;
                config.calculatedSize = this._bottomOrigin - config.top;
            }
            else
            {
                config.top = this._bottomOrigin;
                config.calculatedSize = ycoord - this._bottomOrigin;
            }
            return config;
        },

        /**
         * 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
         * @protected
         */
        updateMarkerState: function(type, i)
        {
            if(this._markers && 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],
                    markers,
                    seriesStyles,
                    seriesCollection = this.get("seriesTypeCollection"),
                    seriesLen = seriesCollection.length,
                    seriesSize = 0,
                    offset = 0,
                    renderer,
                    n = 0,
                    xs = [],
                    order = this.get("order"),
                    config;
                markerStyles = state === "off" || !styles[state] ? Y.clone(styles) : Y.clone(styles[state]);
                markerStyles.fill.color = this._getItemColor(markerStyles.fill.color, i);
                markerStyles.border.color = this._getItemColor(markerStyles.border.color, i);
                config = this._getMarkerDimensions(xcoords[i], ycoords[i], styles.width, offset);
                markerStyles.height = config.calculatedSize;
                markerStyles.width = Math.min(this._maxSize, markerStyles.width);
                marker.set(markerStyles);
                for(; n < seriesLen; ++n)
                {
                    xs[n] = xcoords[i] + seriesSize;
                    seriesStyles = seriesCollection[n].get("styles").marker;
                    seriesSize += Math.min(this._maxSize, seriesStyles.width);
                    if(order > n)
                    {
                        offset = seriesSize;
                    }
                    offset -= seriesSize/2;
                }
                for(n = 0; n < seriesLen; ++n)
                {
                    markers = seriesCollection[n].get("markers");
                    if(markers)
                    {
                        renderer = markers[i];
                        if(renderer && renderer !== undefined)
                        {
                            renderer.set("x", (xs[n] - seriesSize/2));
                        }
                    }
                }
            }
        }
    }, {
        ATTRS: {
            /**
             * Read-only attribute indicating the type of series.
             *
             * @attribute type
             * @type String
             * @readOnly
             * @default column
             */
            type: {
                value: "column"
            }

            /**
             * Style properties used for drawing markers. This attribute is inherited from `MarkerSeries`. 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/>
             *              `["#66007f", "#a86f41", "#295454", "#996ab2", "#e8cdb7", "#90bdbd","#000000","#c3b8ca", "#968373", "#678585"]`
             *              </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/>
             *              `["#205096", "#b38206", "#000000", "#94001e", "#9d6fa0", "#e55b00", "#5e85c9", "#adab9e", "#6ac291", "#006457"]`
             *              <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>width</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 `mouseover` 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 `marker.over.fill.color` is equivalent to `marker.fill.color`.</dd>
             *  </dl>
             *
             * @attribute styles
             * @type Object
             */
        }
    });