3 * Pure JavaScript plotting plugin using jQuery
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.
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 .
18 * If you are feeling kind and generous, consider supporting the project by
19 * making a donation at: http://www.jqplot.com/donate.php .
21 * sprintf functions contained in jqplot.sprintf.js by 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."
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.
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.
45 $.jqplot.CanvasAxisTickRenderer = function(options) {
49 // tick mark on the axis. One of 'inside', 'outside', 'cross', '' or null.
50 this.mark = 'outside';
52 // wether or not to show the mark on the axis.
55 // wether or not to draw the gridline on the grid at this tick.
56 this.showGridline = true;
58 // if this is a minor tick.
59 this.isMinorTick = false;
61 // angle of text, measured clockwise from x axis.
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.
68 // wether or not to show the tick (mark and label).
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
77 this.labelPosition = 'auto';
82 // A class of a formatter for the tick text.
83 // The default $.jqplot.DefaultTickFormatter uses sprintf.
84 this.formatter = $.jqplot.DefaultTickFormatter;
86 // string passed to the formatter.
87 this.formatString = '';
89 // String to prepend to the tick label.
90 // Prefix is prepended to the formatted tick label.
93 // css spec for the font-family css attribute.
94 this.fontFamily = '"Trebuchet MS", Arial, Helvetica, sans-serif';
96 // CSS spec for font size.
97 this.fontSize = '10pt';
99 // CSS spec for fontWeight
100 this.fontWeight = 'normal';
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;
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;
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.
126 this._plotDimensions = {height:null, width:null};
128 $.extend(true, this, options);
130 var ropts = {fontSize:this.fontSize, fontWeight:this.fontWeight, fontStretch:this.fontStretch, fillStyle:this.textColor, angle:this.getAngleRad(), fontFamily:this.fontFamily};
132 ropts.pt2px = this.pt2px;
135 if (this.enableFontSupport) {
136 if ($.jqplot.support_canvas_text()) {
137 this._textRenderer = new $.jqplot.CanvasFontRenderer(ropts);
141 this._textRenderer = new $.jqplot.CanvasTextRenderer(ropts);
145 this._textRenderer = new $.jqplot.CanvasTextRenderer(ropts);
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});
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) {
159 return this._elem.outerWidth(true);
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);
170 // return height along the y axis.
171 $.jqplot.CanvasAxisTickRenderer.prototype.getHeight = function(ctx) {
173 return this._elem.outerHeight(true);
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);
184 $.jqplot.CanvasAxisTickRenderer.prototype.getAngleRad = function() {
185 var a = this.angle * Math.PI/180;
190 $.jqplot.CanvasAxisTickRenderer.prototype.setTick = function(value, axisName, isMinor) {
193 this.isMinorTick = true;
198 $.jqplot.CanvasAxisTickRenderer.prototype.draw = function(ctx, plot) {
200 this.label = this.prefix + this.formatter(this.formatString, this.value);
203 // Memory Leaks patch
205 if ($.jqplot.use_excanvas && window.G_vmlCanvasManager.uninitElement !== undefined) {
206 window.G_vmlCanvasManager.uninitElement(this._elem.get(0));
209 this._elem.emptyForce();
213 // create a canvas here, but can't draw on it untill it is appended
214 // to dom for IE compatability.
216 var elem = plot.canvasManager.getCanvas();
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.
224 elem.style.width = w;
225 elem.style.height = h;
226 elem.style.textAlign = 'left';
227 elem.style.position = 'absolute';
229 elem = plot.canvasManager.initCanvas(elem);
231 this._elem = $(elem);
232 this._elem.css(this._styles);
233 this._elem.addClass('jqplot-'+this.axis+'-tick');
239 $.jqplot.CanvasAxisTickRenderer.prototype.pack = function() {
240 this._textRenderer.draw(this._elem.get(0).getContext("2d"), this.label);