jqplot.markerRenderer.js 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
  1. /**
  2. * jqPlot
  3. * Pure JavaScript plotting plugin using jQuery
  4. *
  5. * Version: @VERSION
  6. * Revision: @REVISION
  7. *
  8. * Copyright (c) 2009-2013 Chris Leonello
  9. * jqPlot is currently available for use in all personal or commercial projects
  10. * under both the MIT (http://www.opensource.org/licenses/mit-license.php) and GPL
  11. * version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html) licenses. This means that you can
  12. * choose the license that best suits your project and use it accordingly.
  13. *
  14. * Although not required, the author would appreciate an email letting him
  15. * know of any substantial use of jqPlot. You can reach the author at:
  16. * chris at jqplot dot com or see http://www.jqplot.com/info.php .
  17. *
  18. * If you are feeling kind and generous, consider supporting the project by
  19. * making a donation at: http://www.jqplot.com/donate.php .
  20. *
  21. * sprintf functions contained in jqplot.sprintf.js by Ash Searle:
  22. *
  23. * version 2007.04.27
  24. * author Ash Searle
  25. * http://hexmen.com/blog/2007/03/printf-sprintf/
  26. * http://hexmen.com/js/sprintf.js
  27. * The author (Ash Searle) has placed this code in the public domain:
  28. * "This code is unrestricted: you are free to use it however you like."
  29. *
  30. */
  31. (function($) {
  32. // class: $.jqplot.MarkerRenderer
  33. // The default jqPlot marker renderer, rendering the points on the line.
  34. $.jqplot.MarkerRenderer = function(options){
  35. // Group: Properties
  36. // prop: show
  37. // whether or not to show the marker.
  38. this.show = true;
  39. // prop: style
  40. // One of diamond, circle, square, x, plus, dash, filledDiamond, filledCircle, filledSquare
  41. this.style = 'filledCircle';
  42. // prop: lineWidth
  43. // size of the line for non-filled markers.
  44. this.lineWidth = 2;
  45. // prop: size
  46. // Size of the marker (diameter or circle, length of edge of square, etc.)
  47. this.size = 9.0;
  48. // prop: color
  49. // color of marker. Will be set to color of series by default on init.
  50. this.color = '#666666';
  51. // prop: shadow
  52. // whether or not to draw a shadow on the line
  53. this.shadow = true;
  54. // prop: shadowAngle
  55. // Shadow angle in degrees
  56. this.shadowAngle = 45;
  57. // prop: shadowOffset
  58. // Shadow offset from line in pixels
  59. this.shadowOffset = 1;
  60. // prop: shadowDepth
  61. // Number of times shadow is stroked, each stroke offset shadowOffset from the last.
  62. this.shadowDepth = 3;
  63. // prop: shadowAlpha
  64. // Alpha channel transparency of shadow. 0 = transparent.
  65. this.shadowAlpha = '0.07';
  66. // prop: shadowRenderer
  67. // Renderer that will draws the shadows on the marker.
  68. this.shadowRenderer = new $.jqplot.ShadowRenderer();
  69. // prop: shapeRenderer
  70. // Renderer that will draw the marker.
  71. this.shapeRenderer = new $.jqplot.ShapeRenderer();
  72. $.extend(true, this, options);
  73. };
  74. $.jqplot.MarkerRenderer.prototype.init = function(options) {
  75. $.extend(true, this, options);
  76. var sdopt = {angle:this.shadowAngle, offset:this.shadowOffset, alpha:this.shadowAlpha, lineWidth:this.lineWidth, depth:this.shadowDepth, closePath:true};
  77. if (this.style.indexOf('filled') != -1) {
  78. sdopt.fill = true;
  79. }
  80. if (this.style.indexOf('ircle') != -1) {
  81. sdopt.isarc = true;
  82. sdopt.closePath = false;
  83. }
  84. this.shadowRenderer.init(sdopt);
  85. var shopt = {fill:false, isarc:false, strokeStyle:this.color, fillStyle:this.color, lineWidth:this.lineWidth, closePath:true};
  86. if (this.style.indexOf('filled') != -1) {
  87. shopt.fill = true;
  88. }
  89. if (this.style.indexOf('ircle') != -1) {
  90. shopt.isarc = true;
  91. shopt.closePath = false;
  92. }
  93. this.shapeRenderer.init(shopt);
  94. };
  95. $.jqplot.MarkerRenderer.prototype.drawDiamond = function(x, y, ctx, fill, options) {
  96. var stretch = 1.2;
  97. var dx = this.size/2/stretch;
  98. var dy = this.size/2*stretch;
  99. var points = [[x-dx, y], [x, y+dy], [x+dx, y], [x, y-dy]];
  100. if (this.shadow) {
  101. this.shadowRenderer.draw(ctx, points);
  102. }
  103. this.shapeRenderer.draw(ctx, points, options);
  104. };
  105. $.jqplot.MarkerRenderer.prototype.drawPlus = function(x, y, ctx, fill, options) {
  106. var stretch = 1.0;
  107. var dx = this.size/2*stretch;
  108. var dy = this.size/2*stretch;
  109. var points1 = [[x, y-dy], [x, y+dy]];
  110. var points2 = [[x+dx, y], [x-dx, y]];
  111. var opts = $.extend(true, {}, this.options, {closePath:false});
  112. if (this.shadow) {
  113. this.shadowRenderer.draw(ctx, points1, {closePath:false});
  114. this.shadowRenderer.draw(ctx, points2, {closePath:false});
  115. }
  116. this.shapeRenderer.draw(ctx, points1, opts);
  117. this.shapeRenderer.draw(ctx, points2, opts);
  118. };
  119. $.jqplot.MarkerRenderer.prototype.drawX = function(x, y, ctx, fill, options) {
  120. var stretch = 1.0;
  121. var dx = this.size/2*stretch;
  122. var dy = this.size/2*stretch;
  123. var opts = $.extend(true, {}, this.options, {closePath:false});
  124. var points1 = [[x-dx, y-dy], [x+dx, y+dy]];
  125. var points2 = [[x-dx, y+dy], [x+dx, y-dy]];
  126. if (this.shadow) {
  127. this.shadowRenderer.draw(ctx, points1, {closePath:false});
  128. this.shadowRenderer.draw(ctx, points2, {closePath:false});
  129. }
  130. this.shapeRenderer.draw(ctx, points1, opts);
  131. this.shapeRenderer.draw(ctx, points2, opts);
  132. };
  133. $.jqplot.MarkerRenderer.prototype.drawDash = function(x, y, ctx, fill, options) {
  134. var stretch = 1.0;
  135. var dx = this.size/2*stretch;
  136. var dy = this.size/2*stretch;
  137. var points = [[x-dx, y], [x+dx, y]];
  138. if (this.shadow) {
  139. this.shadowRenderer.draw(ctx, points);
  140. }
  141. this.shapeRenderer.draw(ctx, points, options);
  142. };
  143. $.jqplot.MarkerRenderer.prototype.drawLine = function(p1, p2, ctx, fill, options) {
  144. var points = [p1, p2];
  145. if (this.shadow) {
  146. this.shadowRenderer.draw(ctx, points);
  147. }
  148. this.shapeRenderer.draw(ctx, points, options);
  149. };
  150. $.jqplot.MarkerRenderer.prototype.drawSquare = function(x, y, ctx, fill, options) {
  151. var stretch = 1.0;
  152. var dx = this.size/2/stretch;
  153. var dy = this.size/2*stretch;
  154. var points = [[x-dx, y-dy], [x-dx, y+dy], [x+dx, y+dy], [x+dx, y-dy]];
  155. if (this.shadow) {
  156. this.shadowRenderer.draw(ctx, points);
  157. }
  158. this.shapeRenderer.draw(ctx, points, options);
  159. };
  160. $.jqplot.MarkerRenderer.prototype.drawCircle = function(x, y, ctx, fill, options) {
  161. var radius = this.size/2;
  162. var end = 2*Math.PI;
  163. var points = [x, y, radius, 0, end, true];
  164. if (this.shadow) {
  165. this.shadowRenderer.draw(ctx, points);
  166. }
  167. this.shapeRenderer.draw(ctx, points, options);
  168. };
  169. $.jqplot.MarkerRenderer.prototype.draw = function(x, y, ctx, options) {
  170. options = options || {};
  171. // hack here b/c shape renderer uses canvas based color style options
  172. // and marker uses css style names.
  173. if (options.show == null || options.show != false) {
  174. if (options.color && !options.fillStyle) {
  175. options.fillStyle = options.color;
  176. }
  177. if (options.color && !options.strokeStyle) {
  178. options.strokeStyle = options.color;
  179. }
  180. switch (this.style) {
  181. case 'diamond':
  182. this.drawDiamond(x,y,ctx, false, options);
  183. break;
  184. case 'filledDiamond':
  185. this.drawDiamond(x,y,ctx, true, options);
  186. break;
  187. case 'circle':
  188. this.drawCircle(x,y,ctx, false, options);
  189. break;
  190. case 'filledCircle':
  191. this.drawCircle(x,y,ctx, true, options);
  192. break;
  193. case 'square':
  194. this.drawSquare(x,y,ctx, false, options);
  195. break;
  196. case 'filledSquare':
  197. this.drawSquare(x,y,ctx, true, options);
  198. break;
  199. case 'x':
  200. this.drawX(x,y,ctx, true, options);
  201. break;
  202. case 'plus':
  203. this.drawPlus(x,y,ctx, true, options);
  204. break;
  205. case 'dash':
  206. this.drawDash(x,y,ctx, true, options);
  207. break;
  208. case 'line':
  209. this.drawLine(x, y, ctx, false, options);
  210. break;
  211. default:
  212. this.drawDiamond(x,y,ctx, false, options);
  213. break;
  214. }
  215. }
  216. };
  217. })(jQuery);