Version 3.18.1
Show:

File: charts/js/Gridlines.js

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