#

API Docs for: 3.10.3
Show: Inherited Protected Private Deprecated

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