File: charts/js/BarSeries.js
- /**
- * Provides functionality for creating a bar series.
- *
- * @module charts
- * @submodule series-bar
- */
- /**
- * 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
- * @param {Object} config (optional) Configuration parameters.
- * @submodule series-bar
- */
- Y.BarSeries = Y.Base.create("barSeries", 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 = {
- top: ycoord + offset
- };
- if(xcoord >= this._leftOrigin)
- {
- config.left = this._leftOrigin;
- config.calculatedSize = xcoord - config.left;
- }
- else
- {
- config.left = xcoord;
- config.calculatedSize = this._leftOrigin - xcoord;
- }
- 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,
- seriesCollection = this.get("seriesTypeCollection"),
- seriesLen = seriesCollection ? seriesCollection.length : 0,
- seriesStyles,
- seriesSize = 0,
- offset = 0,
- renderer,
- n = 0,
- ys = [],
- order = this.get("order"),
- config;
- 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);
- config = this._getMarkerDimensions(xcoords[i], ycoords[i], styles.height, offset);
- markerStyles.width = config.calculatedSize;
- markerStyles.height = Math.min(this._maxSize, markerStyles.height);
- marker.set(markerStyles);
- for(; n < seriesLen; ++n)
- {
- ys[n] = ycoords[i] + seriesSize;
- seriesStyles = seriesCollection[n].get("styles").marker;
- seriesSize += Math.min(this._maxSize, seriesStyles.height);
- 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("y", (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 `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>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 `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
- */
- }
- });
-
-