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
*/
}
});