/** * Provides functionality for creating charts. * * @module charts * @submodule charts-base */ var CONFIG = Y.config, WINDOW = CONFIG.win, DOCUMENT = CONFIG.doc, Y_Lang = Y.Lang, IS_STRING = Y_Lang.isString, _getClassName = Y.ClassNameManager.getClassName, SERIES_MARKER = _getClassName("seriesmarker"); /** * Gridlines draws gridlines on a Graph. * * @class Gridlines * @constructor * @extends Base * @uses Renderer * @param {Object} config (optional) Configuration parameters. * @submodule charts-base */ Y.Gridlines = Y.Base.create("gridlines", Y.Base, [Y.Renderer], { /** * Reference to the `Path` element used for drawing Gridlines. * * @property _path * @type Path * @private */ _path: null, /** * Removes the Gridlines. * * @method remove * @private */ remove: function() { var path = this._path; if(path) { path.destroy(); } }, /** * Draws the gridlines * * @method draw * @protected */ draw: function() { if(this.get("axis") && this.get("graph")) { this._drawGridlines(); } }, /** * Algorithm for drawing gridlines * * @method _drawGridlines * @private */ _drawGridlines: function() { var path, axis = this.get("axis"), axisPosition = axis.get("position"), points, i = 0, l, direction = this.get("direction"), graph = this.get("graph"), w = graph.get("width"), h = graph.get("height"), line = this.get("styles").line, color = line.color, weight = line.weight, alpha = line.alpha, count = this.get("count"), length, lineFunction; if(isFinite(w) && isFinite(h) && w > 0 && h > 0) { if(count && Y.Lang.isNumber(count)) { points = this._getPoints(count, w, h); } else if(axisPosition !== "none" && axis && axis.get("tickPoints")) { points = axis.get("tickPoints"); } else { points = this._getPoints(axis.get("styles").majorUnit.count, w, h); } l = points.length; path = graph.get("gridlines"); path.set("width", w); path.set("height", h); path.set("stroke", { weight: weight, color: color, opacity: alpha }); if(direction === "vertical") { lineFunction = this._verticalLine; length = h; } else { lineFunction = this._horizontalLine; length = w; } for(i = 0; i < l; i = i + 1) { lineFunction(path, points[i], length); } path.end(); } }, /** * Calculates the coordinates for the gridlines based on a count. * * @method _getPoints * @param {Number} count Number of gridlines * @return Array * @private */ _getPoints: function(count, w, h) { var i, points = [], multiplier, divisor = count - 1; for(i = 0; i < count; i = i + 1) { multiplier = i/divisor; points[i] = { x: w * multiplier, y: h * multiplier }; } return points; }, /** * Algorithm for horizontal lines. * * @method _horizontalLine * @param {Path} path Reference to path element * @param {Object} pt Coordinates corresponding to a major unit of an axis. * @param {Number} w Width of the Graph * @private */ _horizontalLine: function(path, pt, w) { path.moveTo(0, pt.y); path.lineTo(w, pt.y); }, /** * Algorithm for vertical lines. * * @method _verticalLine * @param {Path} path Reference to path element * @param {Object} pt Coordinates corresponding to a major unit of an axis. * @param {Number} h Height of the Graph * @private */ _verticalLine: function(path, pt, h) { path.moveTo(pt.x, 0); path.lineTo(pt.x, h); }, /** * Gets the default value for the `styles` attribute. Overrides * base implementation. * * @method _getDefaultStyles * @return Object * @protected */ _getDefaultStyles: function() { var defs = { line: { color:"#f0efe9", weight: 1, alpha: 1 } }; return defs; } }, { ATTRS: { /** * Indicates the direction of the gridline. * * @attribute direction * @type String */ direction: {}, /** * Indicate the `Axis` in which to bind * the gridlines. * * @attribute axis * @type Axis */ axis: {}, /** * Indicates the `Graph` in which the gridlines * are drawn. * * @attribute graph * @type Graph */ graph: {}, /** * Indicates the number of gridlines to display. If no value is set, gridlines will equal the number of ticks in * the corresponding axis. * * @attribute count * @type Number */ count: {} } });