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