PageRenderTime 42ms CodeModel.GetById 15ms RepoModel.GetById 1ms app.codeStats 0ms

/media/dashboard/contrib/js/jqplot/plugins/jqplot.canvasAxisTickRenderer.js

https://github.com/RyanBalfanz/Django-Bingo
JavaScript | 232 lines | 126 code | 17 blank | 89 comment | 25 complexity | 2833a1f076698e001b4c693fcfda4e6a MD5 | raw file
  1. /**
  2. * Copyright (c) 2009 Chris Leonello
  3. * jqPlot is currently available for use in all personal or commercial projects
  4. * under both the MIT and GPL version 2.0 licenses. This means that you can
  5. * choose the license that best suits your project and use it accordingly.
  6. *
  7. * The author would appreciate an email letting him know of any substantial
  8. * use of jqPlot. You can reach the author at: chris dot leonello at gmail
  9. * dot com or see http://www.jqplot.com/info.php . This is, of course,
  10. * not required.
  11. *
  12. * If you are feeling kind and generous, consider supporting the project by
  13. * making a donation at: http://www.jqplot.com/donate.php .
  14. *
  15. * Thanks for using jqPlot!
  16. *
  17. */
  18. (function($) {
  19. /**
  20. * Class: $.jqplot.CanvasAxisTickRenderer
  21. * Renderer to draw axis ticks with a canvas element to support advanced
  22. * featrues such as rotated text. This renderer uses a separate rendering engine
  23. * to draw the text on the canvas. Two modes of rendering the text are available.
  24. * If the browser has native font support for canvas fonts (currently Mozila 3.5
  25. * and Safari 4), you can enable text rendering with the canvas fillText method.
  26. * You do so by setting the "enableFontSupport" option to true.
  27. *
  28. * Browsers lacking native font support will have the text drawn on the canvas
  29. * using the Hershey font metrics. Even if the "enableFontSupport" option is true
  30. * non-supporting browsers will still render with the Hershey font.
  31. */
  32. $.jqplot.CanvasAxisTickRenderer = function(options) {
  33. // Group: Properties
  34. // prop: mark
  35. // tick mark on the axis. One of 'inside', 'outside', 'cross', '' or null.
  36. this.mark = 'outside';
  37. // prop: showMark
  38. // wether or not to show the mark on the axis.
  39. this.showMark = true;
  40. // prop: showGridline
  41. // wether or not to draw the gridline on the grid at this tick.
  42. this.showGridline = true;
  43. // prop: isMinorTick
  44. // if this is a minor tick.
  45. this.isMinorTick = false;
  46. // prop: angle
  47. // angle of text, measured clockwise from x axis.
  48. this.angle = 0;
  49. // prop: markSize
  50. // Length of the tick marks in pixels. For 'cross' style, length
  51. // will be stoked above and below axis, so total length will be twice this.
  52. this.markSize = 4;
  53. // prop: show
  54. // wether or not to show the tick (mark and label).
  55. this.show = true;
  56. // prop: showLabel
  57. // wether or not to show the label.
  58. this.showLabel = true;
  59. // prop: labelPosition
  60. // 'auto', 'start', 'middle' or 'end'.
  61. // Whether tick label should be positioned so the start, middle, or end
  62. // of the tick mark.
  63. this.labelPosition = 'auto';
  64. this.label = '';
  65. this.value = null;
  66. this._styles = {};
  67. // prop: formatter
  68. // A class of a formatter for the tick text.
  69. // The default $.jqplot.DefaultTickFormatter uses sprintf.
  70. this.formatter = $.jqplot.DefaultTickFormatter;
  71. // prop: formatString
  72. // string passed to the formatter.
  73. this.formatString = '';
  74. // prop: fontFamily
  75. // css spec for the font-family css attribute.
  76. this.fontFamily = '"Trebuchet MS", Arial, Helvetica, sans-serif';
  77. // prop: fontSize
  78. // CSS spec for font size.
  79. this.fontSize = '11px';
  80. // prop: fontWeight
  81. // CSS spec for fontWeight
  82. this.fontWeight = 'normal';
  83. // prop: fontStretch
  84. // Multiplier to condense or expand font width.
  85. // Applies only to browsers which don't support canvas native font rendering.
  86. this.fontStretch = 1.0;
  87. // prop: textColor
  88. // css spec for the color attribute.
  89. this.textColor = '#666666';
  90. // prop: enableFontSupport
  91. // true to turn on native canvas font support in Mozilla 3.5+ and Safari 4+.
  92. // If true, tick label will be drawn with canvas tag native support for fonts.
  93. // If false, tick label will be drawn with Hershey font metrics.
  94. this.enableFontSupport = false;
  95. // prop: pt2px
  96. // Point to pixel scaling factor, used for computing height of bounding box
  97. // around a label. The labels text renderer has a default setting of 1.4, which
  98. // should be suitable for most fonts. Leave as null to use default. If tops of
  99. // letters appear clipped, increase this. If bounding box seems too big, decrease.
  100. // This is an issue only with the native font renderering capabilities of Mozilla
  101. // 3.5 and Safari 4 since they do not provide a method to determine the font height.
  102. this.pt2px = null;
  103. this._elem;
  104. this._ctx;
  105. this._plotWidth;
  106. this._plotHeight;
  107. this._plotDimensions = {height:null, width:null};
  108. $.extend(true, this, options);
  109. var ropts = {fontSize:this.fontSize, fontWeight:this.fontWeight, fontStretch:this.fontStretch, fillStyle:this.textColor, angle:this.getAngleRad(), fontFamily:this.fontFamily};
  110. if (this.pt2px) {
  111. ropts.pt2px = this.pt2px;
  112. }
  113. if (this.enableFontSupport) {
  114. if ($.browser.safari) {
  115. var p = $.browser.version.split('.');
  116. for (var i=0; i<p.length; i++) { p[i] = Number(p[i]); }
  117. if (p[0] > 528 || (p[0] == 528 && p[1] >= 16)) {
  118. this._textRenderer = new $.jqplot.CanvasFontRenderer(ropts);
  119. }
  120. }
  121. else if ($.browser.mozilla) {
  122. var p = $.browser.version.split(".");
  123. if (p[0] > 1 || (p[0] == 1 && p[1] >= 9 && p[2] > 0) ) {
  124. this._textRenderer = new $.jqplot.CanvasFontRenderer(ropts);
  125. }
  126. else {
  127. this._textRenderer = new $.jqplot.CanvasTextRenderer(ropts);
  128. }
  129. }
  130. // TODO: test and enable this
  131. // else if ($.browser.msie) {
  132. // this._textRenderer = new $.jqplot.CanvasFontRenderer(ropts);
  133. // }
  134. else {
  135. this._textRenderer = new $.jqplot.CanvasTextRenderer(ropts);
  136. }
  137. }
  138. else {
  139. this._textRenderer = new $.jqplot.CanvasTextRenderer(ropts);
  140. }
  141. };
  142. $.jqplot.CanvasAxisTickRenderer.prototype.init = function(options) {
  143. $.extend(true, this, options);
  144. this._textRenderer.init({fontSize:this.fontSize, fontWeight:this.fontWeight, fontStretch:this.fontStretch, fillStyle:this.textColor, angle:this.getAngleRad(), fontFamily:this.fontFamily});
  145. };
  146. // return width along the x axis
  147. // will check first to see if an element exists.
  148. // if not, will return the computed text box width.
  149. $.jqplot.CanvasAxisTickRenderer.prototype.getWidth = function(ctx) {
  150. if (this._elem) {
  151. return this._elem.outerWidth(true);
  152. }
  153. else {
  154. var tr = this._textRenderer;
  155. var l = tr.getWidth(ctx);
  156. var h = tr.getHeight(ctx);
  157. var w = Math.abs(Math.sin(tr.angle)*h) + Math.abs(Math.cos(tr.angle)*l);
  158. return w;
  159. }
  160. };
  161. // return height along the y axis.
  162. $.jqplot.CanvasAxisTickRenderer.prototype.getHeight = function(ctx) {
  163. if (this._elem) {
  164. return this._elem.outerHeight(true);
  165. }
  166. else {
  167. var tr = this._textRenderer;
  168. var l = tr.getWidth(ctx);
  169. var h = tr.getHeight(ctx);
  170. var w = Math.abs(Math.cos(tr.angle)*h) + Math.abs(Math.sin(tr.angle)*l);
  171. return w;
  172. }
  173. };
  174. $.jqplot.CanvasAxisTickRenderer.prototype.getAngleRad = function() {
  175. var a = this.angle * Math.PI/180;
  176. return a;
  177. };
  178. $.jqplot.CanvasAxisTickRenderer.prototype.setTick = function(value, axisName, isMinor) {
  179. this.value = value;
  180. if (isMinor) {
  181. this.isMinorTick = true;
  182. }
  183. return this;
  184. };
  185. $.jqplot.CanvasAxisTickRenderer.prototype.draw = function(ctx) {
  186. if (!this.label) {
  187. this.label = this.formatter(this.formatString, this.value);
  188. }
  189. // create a canvas here, but can't draw on it untill it is appended
  190. // to dom for IE compatability.
  191. var domelem = document.createElement('canvas');
  192. this._textRenderer.setText(this.label, ctx);
  193. var w = this.getWidth(ctx);
  194. var h = this.getHeight(ctx);
  195. domelem.width = w;
  196. domelem.height = h;
  197. domelem.style.width = w;
  198. domelem.style.height = h;
  199. domelem.style.textAlign = 'left';
  200. domelem.style.position = 'absolute';
  201. this._domelem = domelem;
  202. this._elem = $(domelem);
  203. this._elem.css(this._styles);
  204. this._elem.addClass('jqplot-'+this.axis+'-tick');
  205. return this._elem;
  206. };
  207. $.jqplot.CanvasAxisTickRenderer.prototype.pack = function() {
  208. if ($.browser.msie) {
  209. window.G_vmlCanvasManager.init_(document);
  210. this._domelem = window.G_vmlCanvasManager.initElement(this._domelem);
  211. }
  212. var ctx = this._elem.get(0).getContext("2d");
  213. this._textRenderer.draw(ctx, this.label);
  214. };
  215. })(jQuery);