[Summary view] [Print] [Text view]

   1  /**
   2   * jqPlot
   3   * Pure JavaScript plotting plugin using jQuery
   4   *
   5   * Version: 1.0.2
   6   * Revision: 1108
   7   *
   8   * Copyright (c) 2009-2011 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      /**
  33      *  Class: $.jqplot.CanvasAxisTickRenderer
  34      * Renderer to draw axis ticks with a canvas element to support advanced
  35      * featrues such as rotated text.  This renderer uses a separate rendering engine
  36      * to draw the text on the canvas.  Two modes of rendering the text are available.
  37      * If the browser has native font support for canvas fonts (currently Mozila 3.5
  38      * and Safari 4), you can enable text rendering with the canvas fillText method.
  39      * You do so by setting the "enableFontSupport" option to true. 
  40      * 
  41      * Browsers lacking native font support will have the text drawn on the canvas
  42      * using the Hershey font metrics.  Even if the "enableFontSupport" option is true
  43      * non-supporting browsers will still render with the Hershey font.
  44      */
  45      $.jqplot.CanvasAxisTickRenderer = function(options) {
  46          // Group: Properties
  47          
  48          // prop: mark
  49          // tick mark on the axis.  One of 'inside', 'outside', 'cross', '' or null.
  50          this.mark = 'outside';
  51          // prop: showMark
  52          // wether or not to show the mark on the axis.
  53          this.showMark = true;
  54          // prop: showGridline
  55          // wether or not to draw the gridline on the grid at this tick.
  56          this.showGridline = true;
  57          // prop: isMinorTick
  58          // if this is a minor tick.
  59          this.isMinorTick = false;
  60          // prop: angle
  61          // angle of text, measured clockwise from x axis.
  62          this.angle = 0;
  63          // prop:  markSize
  64          // Length of the tick marks in pixels.  For 'cross' style, length
  65          // will be stoked above and below axis, so total length will be twice this.
  66          this.markSize = 4;
  67          // prop: show
  68          // wether or not to show the tick (mark and label).
  69          this.show = true;
  70          // prop: showLabel
  71          // wether or not to show the label.
  72          this.showLabel = true;
  73          // prop: labelPosition
  74          // 'auto', 'start', 'middle' or 'end'.
  75          // Whether tick label should be positioned so the start, middle, or end
  76          // of the tick mark.
  77          this.labelPosition = 'auto';
  78          this.label = '';
  79          this.value = null;
  80          this._styles = {};
  81          // prop: formatter
  82          // A class of a formatter for the tick text.
  83          // The default $.jqplot.DefaultTickFormatter uses sprintf.
  84          this.formatter = $.jqplot.DefaultTickFormatter;
  85          // prop: formatString
  86          // string passed to the formatter.
  87          this.formatString = '';
  88          // prop: prefix
  89          // String to prepend to the tick label.
  90          // Prefix is prepended to the formatted tick label.
  91          this.prefix = '';
  92          // prop: fontFamily
  93          // css spec for the font-family css attribute.
  94          this.fontFamily = '"Trebuchet MS", Arial, Helvetica, sans-serif';
  95          // prop: fontSize
  96          // CSS spec for font size.
  97          this.fontSize = '10pt';
  98          // prop: fontWeight
  99          // CSS spec for fontWeight
 100          this.fontWeight = 'normal';
 101          // prop: fontStretch
 102          // Multiplier to condense or expand font width.  
 103          // Applies only to browsers which don't support canvas native font rendering.
 104          this.fontStretch = 1.0;
 105          // prop: textColor
 106          // css spec for the color attribute.
 107          this.textColor = '#666666';
 108          // prop: enableFontSupport
 109          // true to turn on native canvas font support in Mozilla 3.5+ and Safari 4+.
 110          // If true, tick label will be drawn with canvas tag native support for fonts.
 111          // If false, tick label will be drawn with Hershey font metrics.
 112          this.enableFontSupport = true;
 113          // prop: pt2px
 114          // Point to pixel scaling factor, used for computing height of bounding box
 115          // around a label.  The labels text renderer has a default setting of 1.4, which 
 116          // should be suitable for most fonts.  Leave as null to use default.  If tops of
 117          // letters appear clipped, increase this.  If bounding box seems too big, decrease.
 118          // This is an issue only with the native font renderering capabilities of Mozilla
 119          // 3.5 and Safari 4 since they do not provide a method to determine the font height.
 120          this.pt2px = null;
 121          
 122          this._elem;
 123          this._ctx;
 124          this._plotWidth;
 125          this._plotHeight;
 126          this._plotDimensions = {height:null, width:null};
 127          
 128          $.extend(true, this, options);
 129          
 130          var ropts = {fontSize:this.fontSize, fontWeight:this.fontWeight, fontStretch:this.fontStretch, fillStyle:this.textColor, angle:this.getAngleRad(), fontFamily:this.fontFamily};
 131          if (this.pt2px) {
 132              ropts.pt2px = this.pt2px;
 133          }
 134          
 135          if (this.enableFontSupport) {
 136              if ($.jqplot.support_canvas_text()) {
 137                  this._textRenderer = new $.jqplot.CanvasFontRenderer(ropts);
 138              }
 139              
 140              else {
 141                  this._textRenderer = new $.jqplot.CanvasTextRenderer(ropts); 
 142              }
 143          }
 144          else {
 145              this._textRenderer = new $.jqplot.CanvasTextRenderer(ropts); 
 146          }
 147      };
 148      
 149      $.jqplot.CanvasAxisTickRenderer.prototype.init = function(options) {
 150          $.extend(true, this, options);
 151          this._textRenderer.init({fontSize:this.fontSize, fontWeight:this.fontWeight, fontStretch:this.fontStretch, fillStyle:this.textColor, angle:this.getAngleRad(), fontFamily:this.fontFamily});
 152      };
 153      
 154      // return width along the x axis
 155      // will check first to see if an element exists.
 156      // if not, will return the computed text box width.
 157      $.jqplot.CanvasAxisTickRenderer.prototype.getWidth = function(ctx) {
 158          if (this._elem) {
 159           return this._elem.outerWidth(true);
 160          }
 161          else {
 162              var tr = this._textRenderer;
 163              var l = tr.getWidth(ctx);
 164              var h = tr.getHeight(ctx);
 165              var w = Math.abs(Math.sin(tr.angle)*h) + Math.abs(Math.cos(tr.angle)*l);
 166              return w;
 167          }
 168      };
 169      
 170      // return height along the y axis.
 171      $.jqplot.CanvasAxisTickRenderer.prototype.getHeight = function(ctx) {
 172          if (this._elem) {
 173           return this._elem.outerHeight(true);
 174          }
 175          else {
 176              var tr = this._textRenderer;
 177              var l = tr.getWidth(ctx);
 178              var h = tr.getHeight(ctx);
 179              var w = Math.abs(Math.cos(tr.angle)*h) + Math.abs(Math.sin(tr.angle)*l);
 180              return w;
 181          }
 182      };
 183      
 184      $.jqplot.CanvasAxisTickRenderer.prototype.getAngleRad = function() {
 185          var a = this.angle * Math.PI/180;
 186          return a;
 187      };
 188      
 189      
 190      $.jqplot.CanvasAxisTickRenderer.prototype.setTick = function(value, axisName, isMinor) {
 191          this.value = value;
 192          if (isMinor) {
 193              this.isMinorTick = true;
 194          }
 195          return this;
 196      };
 197      
 198      $.jqplot.CanvasAxisTickRenderer.prototype.draw = function(ctx, plot) {
 199          if (!this.label) {
 200              this.label = this.prefix + this.formatter(this.formatString, this.value);
 201          }
 202          
 203          // Memory Leaks patch
 204          if (this._elem) {
 205              if ($.jqplot.use_excanvas && window.G_vmlCanvasManager.uninitElement !== undefined) {
 206                  window.G_vmlCanvasManager.uninitElement(this._elem.get(0));
 207              }
 208              
 209              this._elem.emptyForce();
 210              this._elem = null;
 211          }
 212  
 213          // create a canvas here, but can't draw on it untill it is appended
 214          // to dom for IE compatability.
 215  
 216          var elem = plot.canvasManager.getCanvas();
 217  
 218          this._textRenderer.setText(this.label, ctx);
 219          var w = this.getWidth(ctx);
 220          var h = this.getHeight(ctx);
 221          // canvases seem to need to have width and heigh attributes directly set.
 222          elem.width = w;
 223          elem.height = h;
 224          elem.style.width = w;
 225          elem.style.height = h;
 226          elem.style.textAlign = 'left';
 227          elem.style.position = 'absolute';
 228          
 229          elem = plot.canvasManager.initCanvas(elem);
 230          
 231          this._elem = $(elem);
 232          this._elem.css(this._styles);
 233          this._elem.addClass('jqplot-'+this.axis+'-tick');
 234          
 235          elem = null;
 236          return this._elem;
 237      };
 238      
 239      $.jqplot.CanvasAxisTickRenderer.prototype.pack = function() {
 240          this._textRenderer.draw(this._elem.get(0).getContext("2d"), this.label);
 241      };
 242      
 243  })(jQuery);