API Docs for: 3.10.3
Show:

File: charts/js/Gridlines.js

  1. /**
  2. * Provides functionality for creating charts.
  3. *
  4. * @module charts
  5. * @submodule charts-base
  6. */
  7. var CONFIG = Y.config,
  8. WINDOW = CONFIG.win,
  9. DOCUMENT = CONFIG.doc,
  10. Y_Lang = Y.Lang,
  11. IS_STRING = Y_Lang.isString,
  12. _getClassName = Y.ClassNameManager.getClassName,
  13. SERIES_MARKER = _getClassName("seriesmarker");
  14.  
  15. /**
  16. * Gridlines draws gridlines on a Graph.
  17. *
  18. * @class Gridlines
  19. * @constructor
  20. * @extends Base
  21. * @uses Renderer
  22. * @param {Object} config (optional) Configuration parameters.
  23. * @submodule charts-base
  24. */
  25. Y.Gridlines = Y.Base.create("gridlines", Y.Base, [Y.Renderer], {
  26. /**
  27. * Reference to the `Path` element used for drawing Gridlines.
  28. *
  29. * @property _path
  30. * @type Path
  31. * @private
  32. */
  33. _path: null,
  34.  
  35. /**
  36. * Removes the Gridlines.
  37. *
  38. * @method remove
  39. * @private
  40. */
  41. remove: function()
  42. {
  43. var path = this._path;
  44. if(path)
  45. {
  46. path.destroy();
  47. }
  48. },
  49.  
  50. /**
  51. * Draws the gridlines
  52. *
  53. * @method draw
  54. * @protected
  55. */
  56. draw: function()
  57. {
  58. if(this.get("axis") && this.get("graph"))
  59. {
  60. this._drawGridlines();
  61. }
  62. },
  63.  
  64. /**
  65. * Algorithm for drawing gridlines
  66. *
  67. * @method _drawGridlines
  68. * @private
  69. */
  70. _drawGridlines: function()
  71. {
  72. var path,
  73. axis = this.get("axis"),
  74. axisPosition = axis.get("position"),
  75. points,
  76. i = 0,
  77. l,
  78. direction = this.get("direction"),
  79. graph = this.get("graph"),
  80. w = graph.get("width"),
  81. h = graph.get("height"),
  82. line = this.get("styles").line,
  83. color = line.color,
  84. weight = line.weight,
  85. alpha = line.alpha,
  86. count = this.get("count"),
  87. length,
  88. lineFunction;
  89. if(isFinite(w) && isFinite(h) && w > 0 && h > 0)
  90. {
  91. if(count && Y.Lang.isNumber(count))
  92. {
  93. points = this._getPoints(count, w, h);
  94. }
  95. else if(axisPosition !== "none" && axis && axis.get("tickPoints"))
  96. {
  97. points = axis.get("tickPoints");
  98. }
  99. else
  100. {
  101. points = this._getPoints(axis.get("styles").majorUnit.count, w, h);
  102. }
  103. l = points.length;
  104. path = graph.get("gridlines");
  105. path.set("width", w);
  106. path.set("height", h);
  107. path.set("stroke", {
  108. weight: weight,
  109. color: color,
  110. opacity: alpha
  111. });
  112. if(direction === "vertical")
  113. {
  114. lineFunction = this._verticalLine;
  115. length = h;
  116. }
  117. else
  118. {
  119. lineFunction = this._horizontalLine;
  120. length = w;
  121. }
  122. for(i = 0; i < l; i = i + 1)
  123. {
  124. lineFunction(path, points[i], length);
  125. }
  126. path.end();
  127. }
  128. },
  129.  
  130. /**
  131. * Calculates the coordinates for the gridlines based on a count.
  132. *
  133. * @method _getPoints
  134. * @param {Number} count Number of gridlines
  135. * @return Array
  136. * @private
  137. */
  138. _getPoints: function(count, w, h)
  139. {
  140. var i,
  141. points = [],
  142. multiplier,
  143. divisor = count - 1;
  144. for(i = 0; i < count; i = i + 1)
  145. {
  146. multiplier = i/divisor;
  147. points[i] = {
  148. x: w * multiplier,
  149. y: h * multiplier
  150. };
  151. }
  152. return points;
  153. },
  154.  
  155. /**
  156. * Algorithm for horizontal lines.
  157. *
  158. * @method _horizontalLine
  159. * @param {Path} path Reference to path element
  160. * @param {Object} pt Coordinates corresponding to a major unit of an axis.
  161. * @param {Number} w Width of the Graph
  162. * @private
  163. */
  164. _horizontalLine: function(path, pt, w)
  165. {
  166. path.moveTo(0, pt.y);
  167. path.lineTo(w, pt.y);
  168. },
  169.  
  170. /**
  171. * Algorithm for vertical lines.
  172. *
  173. * @method _verticalLine
  174. * @param {Path} path Reference to path element
  175. * @param {Object} pt Coordinates corresponding to a major unit of an axis.
  176. * @param {Number} h Height of the Graph
  177. * @private
  178. */
  179. _verticalLine: function(path, pt, h)
  180. {
  181. path.moveTo(pt.x, 0);
  182. path.lineTo(pt.x, h);
  183. },
  184.  
  185. /**
  186. * Gets the default value for the `styles` attribute. Overrides
  187. * base implementation.
  188. *
  189. * @method _getDefaultStyles
  190. * @return Object
  191. * @protected
  192. */
  193. _getDefaultStyles: function()
  194. {
  195. var defs = {
  196. line: {
  197. color:"#f0efe9",
  198. weight: 1,
  199. alpha: 1
  200. }
  201. };
  202. return defs;
  203. }
  204.  
  205. },
  206. {
  207. ATTRS: {
  208. /**
  209. * Indicates the direction of the gridline.
  210. *
  211. * @attribute direction
  212. * @type String
  213. */
  214. direction: {},
  215.  
  216. /**
  217. * Indicate the `Axis` in which to bind
  218. * the gridlines.
  219. *
  220. * @attribute axis
  221. * @type Axis
  222. */
  223. axis: {},
  224.  
  225. /**
  226. * Indicates the `Graph` in which the gridlines
  227. * are drawn.
  228. *
  229. * @attribute graph
  230. * @type Graph
  231. */
  232. graph: {},
  233.  
  234. /**
  235. * Indicates the number of gridlines to display. If no value is set, gridlines will equal the number of ticks in
  236. * the corresponding axis.
  237. *
  238. * @attribute count
  239. * @type Number
  240. */
  241. count: {}
  242. }
  243. });
  244.