Version 3.18.1
Show:

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 = this._copyObject(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 ? seriesCollection.length : 0,
                            seriesSize = 0,
                            offset = 0,
                            renderer,
                            n = 0,
                            xs = [],
                            order = this.get("order"),
                            config;
                        markerStyles = state === "off" || !styles[state] ? this._copyObject(styles) : this._copyObject(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
                     */
                }
            });