ColumnSeries.js revision e5d0d81b6efc013c3d7f95e9d1e02110684e35a9
/**
* 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
*/
Y.ColumnSeries = Y.Base.create("columnSeries", Y.MarkerSeries, [Y.Histogram], {
/**
* @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;
},
/**
* @protected
*
* 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
*/
updateMarkerState: function(type, i)
{
if(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],
graph = this.get("graph"),
seriesCollection = graph.seriesTypes[this.get("type")],
seriesLen = seriesCollection.length,
seriesSize = 0,
offset = 0,
renderer,
n = 0,
xs = [],
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.width, offset);
markerStyles.height = config.calculatedSize;
marker.update(markerStyles);
for(; n < seriesLen; ++n)
{
renderer = seriesCollection[n].get("markers")[i];
xs[n] = xcoords[i] + seriesSize;
seriesSize += renderer.width;
if(order > n)
{
offset = seriesSize;
}
offset -= seriesSize/2;
}
for(n = 0; n < seriesLen; ++n)
{
renderer = Y.one(seriesCollection[n]._graphicNodes[i]);
renderer.setStyle("left", (xs[n] - seriesSize/2) + "px");
}
}
}
}, {
ATTRS: {
/**
* Read-only attribute indicating the type of series.
*
* @attribute type
* @type String
* @default column
*/
type: {
value: "column"
}
/**
* Style properties used for drawing markers. This attribute is inherited from <code>MarkerSeries</code>. 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/>
* <code>["#66007f", "#a86f41", "#295454", "#996ab2", "#e8cdb7", "#90bdbd","#000000","#c3b8ca", "#968373", "#678585"]</code>
* </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/>
* <code>["#205096", "#b38206", "#000000", "#94001e", "#9d6fa0", "#e55b00", "#5e85c9", "#adab9e", "#6ac291", "#006457"]</code>
* <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 <code>mouseover</code> 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 <code>marker.over.fill.color</code> is equivalent to <code>marker.fill.color</code>.</dd>
* </dl>
*
* @attribute styles
* @type Object
*/
}
});