public/javascripts/jqplot/plugins/jqplot.canvasAxisTickRenderer.js

   1 /**
   2  * jqPlot
   3  * Pure JavaScript plotting plugin using jQuery
   4  *
   5  * Version: 1.0.4
   6  * Revision: 1121
   7  *
   8  * Copyright (c) 2009-2012 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);