https://www.mocerf.org/CERFPlan/_include/js/jqplot/plugins/jqplot.canvasAxisTickRenderer.js

1/**
2 * Copyright (c) 2009 - 2010 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 at jqplot dot com 
9 * 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        
35        // prop: mark
36        // tick mark on the axis.  One of 'inside', 'outside', 'cross', '' or null.
37        this.mark = 'outside';
38        // prop: showMark
39        // wether or not to show the mark on the axis.
40        this.showMark = true;
41        // prop: showGridline
42        // wether or not to draw the gridline on the grid at this tick.
43        this.showGridline = true;
44        // prop: isMinorTick
45        // if this is a minor tick.
46        this.isMinorTick = false;
47        // prop: angle
48        // angle of text, measured clockwise from x axis.
49        this.angle = 0;
50        // prop:  markSize
51        // Length of the tick marks in pixels.  For 'cross' style, length
52        // will be stoked above and below axis, so total length will be twice this.
53        this.markSize = 4;
54        // prop: show
55        // wether or not to show the tick (mark and label).
56        this.show = true;
57        // prop: showLabel
58        // wether or not to show the label.
59        this.showLabel = true;
60        // prop: labelPosition
61        // 'auto', 'start', 'middle' or 'end'.
62        // Whether tick label should be positioned so the start, middle, or end
63        // of the tick mark.
64        this.labelPosition = 'auto';
65        this.label = '';
66        this.value = null;
67        this._styles = {};
68        // prop: formatter
69        // A class of a formatter for the tick text.
70        // The default $.jqplot.DefaultTickFormatter uses sprintf.
71        this.formatter = $.jqplot.DefaultTickFormatter;
72        // prop: formatString
73        // string passed to the formatter.
74        this.formatString = '';
75        // prop: prefix
76        // string appended to the tick label if no formatString is specified.
77        this.prefix = '';
78        // prop: fontFamily
79        // css spec for the font-family css attribute.
80        this.fontFamily = '"Trebuchet MS", Arial, Helvetica, sans-serif';
81        // prop: fontSize
82        // CSS spec for font size.
83        this.fontSize = '10pt';
84        // prop: fontWeight
85        // CSS spec for fontWeight
86        this.fontWeight = 'normal';
87        // prop: fontStretch
88        // Multiplier to condense or expand font width.  
89        // Applies only to browsers which don't support canvas native font rendering.
90        this.fontStretch = 1.0;
91        // prop: textColor
92        // css spec for the color attribute.
93        this.textColor = '#666666';
94        // prop: enableFontSupport
95        // true to turn on native canvas font support in Mozilla 3.5+ and Safari 4+.
96        // If true, tick label will be drawn with canvas tag native support for fonts.
97        // If false, tick label will be drawn with Hershey font metrics.
98        this.enableFontSupport = true;
99        // prop: pt2px

100        // Point to pixel scaling factor, used for computing height of bounding box
101        // around a label.  The labels text renderer has a default setting of 1.4, which 
102        // should be suitable for most fonts.  Leave as null to use default.  If tops of
103        // letters appear clipped, increase this.  If bounding box seems too big, decrease.
104        // This is an issue only with the native font renderering capabilities of Mozilla
105        // 3.5 and Safari 4 since they do not provide a method to determine the font height.
106        this.pt2px = null;
107        
108        this._elem;
109        this._ctx;
110        this._plotWidth;
111        this._plotHeight;
112        this._plotDimensions = {height:null, width:null};
113        
114        $.extend(true, this, options);
115        
116        var ropts = {fontSize:this.fontSize, fontWeight:this.fontWeight, fontStretch:this.fontStretch, fillStyle:this.textColor, angle:this.getAngleRad(), fontFamily:this.fontFamily};
117        if (this.pt2px) {
118            ropts.pt2px = this.pt2px;
119        }
120        
121        if (this.enableFontSupport) {
122            
123            function support_canvas_text() {
124                return !!(document.createElement('canvas').getContext && typeof document.createElement('canvas').getContext('2d').fillText == 'function');
125            }
126            
127            if (support_canvas_text()) {
128                this._textRenderer = new $.jqplot.CanvasFontRenderer(ropts);
129            }
130            
131            else {
132                this._textRenderer = new $.jqplot.CanvasTextRenderer(ropts); 
133            }
134        }
135        else {
136            this._textRenderer = new $.jqplot.CanvasTextRenderer(ropts); 
137        }
138    };
139    
140    $.jqplot.CanvasAxisTickRenderer.prototype.init = function(options) {
141        $.extend(true, this, options);
142        this._textRenderer.init({fontSize:this.fontSize, fontWeight:this.fontWeight, fontStretch:this.fontStretch, fillStyle:this.textColor, angle:this.getAngleRad(), fontFamily:this.fontFamily});
143    };
144    
145    // return width along the x axis
146    // will check first to see if an element exists.
147    // if not, will return the computed text box width.
148    $.jqplot.CanvasAxisTickRenderer.prototype.getWidth = function(ctx) {
149        if (this._elem) {
150         return this._elem.outerWidth(true);
151        }
152        else {
153            var tr = this._textRenderer;
154            var l = tr.getWidth(ctx);
155            var h = tr.getHeight(ctx);
156            var w = Math.abs(Math.sin(tr.angle)*h) + Math.abs(Math.cos(tr.angle)*l);
157            return w;
158        }
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    
175    $.jqplot.CanvasAxisTickRenderer.prototype.getAngleRad = function() {
176        var a = this.angle * Math.PI/180;
177        return a;
178    };
179    
180    
181    $.jqplot.CanvasAxisTickRenderer.prototype.setTick = function(value, axisName, isMinor) {
182        this.value = value;
183        if (isMinor) {
184            this.isMinorTick = true;
185        }
186        return this;
187    };
188    
189    $.jqplot.CanvasAxisTickRenderer.prototype.draw = function(ctx) {
190        if (!this.label) {
191            this.label = this.formatter(this.formatString, this.value);
192        }
193        // add prefix if needed
194        if (this.prefix && !this.formatString) {
195            this.label = this.prefix + this.label;
196        }
197        // create a canvas here, but can't draw on it untill it is appended
198        // to dom for IE compatability.
199        var domelem = document.createElement('canvas');
200        this._textRenderer.setText(this.label, ctx);
201        var w = this.getWidth(ctx);
202        var h = this.getHeight(ctx);
203        domelem.width = w;
204        domelem.height = h;
205        domelem.style.width = w;
206        domelem.style.height = h;
207        domelem.style.textAlign = 'left';
208        domelem.style.position = 'absolute';
209        this._domelem = domelem;
210        this._elem = $(domelem);
211        this._elem.css(this._styles);
212        this._elem.addClass('jqplot-'+this.axis+'-tick');
213        
214        return this._elem;
215    };
216    
217    $.jqplot.CanvasAxisTickRenderer.prototype.pack = function() {
218        if ($.browser.msie) {
219            window.G_vmlCanvasManager.init_(document);
220            this._domelem = window.G_vmlCanvasManager.initElement(this._domelem);
221        }
222        var ctx = this._elem.get(0).getContext("2d");
223        this._textRenderer.draw(ctx, this.label);
224    };
225    
226})(jQuery);