1 | /** |
---|
2 | * jqPlot |
---|
3 | * Pure JavaScript plotting plugin using jQuery |
---|
4 | * |
---|
5 | * Version: 1.0.0b2_r1012 |
---|
6 | * |
---|
7 | * Copyright (c) 2009-2011 Chris Leonello |
---|
8 | * jqPlot is currently available for use in all personal or commercial projects |
---|
9 | * under both the MIT (http://www.opensource.org/licenses/mit-license.php) and GPL |
---|
10 | * version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html) licenses. This means that you can |
---|
11 | * choose the license that best suits your project and use it accordingly. |
---|
12 | * |
---|
13 | * Although not required, the author would appreciate an email letting him |
---|
14 | * know of any substantial use of jqPlot. You can reach the author at: |
---|
15 | * chris at jqplot dot com or see http://www.jqplot.com/info.php . |
---|
16 | * |
---|
17 | * If you are feeling kind and generous, consider supporting the project by |
---|
18 | * making a donation at: http://www.jqplot.com/donate.php . |
---|
19 | * |
---|
20 | * sprintf functions contained in jqplot.sprintf.js by Ash Searle: |
---|
21 | * |
---|
22 | * version 2007.04.27 |
---|
23 | * author Ash Searle |
---|
24 | * http://hexmen.com/blog/2007/03/printf-sprintf/ |
---|
25 | * http://hexmen.com/js/sprintf.js |
---|
26 | * The author (Ash Searle) has placed this code in the public domain: |
---|
27 | * "This code is unrestricted: you are free to use it however you like." |
---|
28 | * |
---|
29 | */ |
---|
30 | (function($) { |
---|
31 | /** |
---|
32 | * Class: $.jqplot.BlockRenderer |
---|
33 | * Plugin renderer to draw a x-y block chart. A Block chart has data points displayed as |
---|
34 | * colored squares with a text label inside. Data must be supplied in the form: |
---|
35 | * |
---|
36 | * > [[x1, y1, "label 1", {css}], [x2, y2, "label 2", {css}], ...] |
---|
37 | * |
---|
38 | * The label and css object are optional. If the label is ommitted, the |
---|
39 | * box will collapse unless a css height and/or width is specified. |
---|
40 | * |
---|
41 | * The css object is an object specifying css properties |
---|
42 | * such as: |
---|
43 | * |
---|
44 | * > {background:'#4f98a5', border:'3px solid gray', padding:'1px'} |
---|
45 | * |
---|
46 | * Note that css properties specified with the data point override defaults |
---|
47 | * specified with the series. |
---|
48 | * |
---|
49 | */ |
---|
50 | $.jqplot.BlockRenderer = function(){ |
---|
51 | $.jqplot.LineRenderer.call(this); |
---|
52 | }; |
---|
53 | |
---|
54 | $.jqplot.BlockRenderer.prototype = new $.jqplot.LineRenderer(); |
---|
55 | $.jqplot.BlockRenderer.prototype.constructor = $.jqplot.BlockRenderer; |
---|
56 | |
---|
57 | // called with scope of a series |
---|
58 | $.jqplot.BlockRenderer.prototype.init = function(options) { |
---|
59 | // Group: Properties |
---|
60 | // |
---|
61 | // prop: css |
---|
62 | // default css styles that will be applied to all data blocks. |
---|
63 | // these values will be overridden by css styles supplied with the |
---|
64 | // individulal data points. |
---|
65 | this.css = {padding:'2px', border:'1px solid #999', textAlign:'center'}; |
---|
66 | // prop: escapeHtml |
---|
67 | // true to escape html in the box label. |
---|
68 | this.escapeHtml = false; |
---|
69 | // prop: insertBreaks |
---|
70 | // true to turn spaces in data block label into html breaks <br />. |
---|
71 | this.insertBreaks = true; |
---|
72 | // prop: varyBlockColors |
---|
73 | // true to vary the color of each block in this series according to |
---|
74 | // the seriesColors array. False to set each block to the color |
---|
75 | // specified on this series. This has no effect if a css background color |
---|
76 | // option is specified in the renderer css options. |
---|
77 | this.varyBlockColors = false; |
---|
78 | $.extend(true, this, options); |
---|
79 | if (this.css.backgroundColor) { |
---|
80 | this.color = this.css.backgroundColor; |
---|
81 | } |
---|
82 | else if (this.css.background) { |
---|
83 | this.color = this.css.background; |
---|
84 | } |
---|
85 | else if (!this.varyBlockColors) { |
---|
86 | this.css.background = this.color; |
---|
87 | } |
---|
88 | this.canvas = new $.jqplot.BlockCanvas(); |
---|
89 | this.shadowCanvas = new $.jqplot.BlockCanvas(); |
---|
90 | this.canvas._plotDimensions = this._plotDimensions; |
---|
91 | this.shadowCanvas._plotDimensions = this._plotDimensions; |
---|
92 | this._type = 'block'; |
---|
93 | |
---|
94 | // group: Methods |
---|
95 | // |
---|
96 | // Method: moveBlock |
---|
97 | // Moves an individual block. More efficient than redrawing |
---|
98 | // the whole series by calling plot.drawSeries(). |
---|
99 | // Properties: |
---|
100 | // idx - the 0 based index of the block or point in this series. |
---|
101 | // x - the x coordinate in data units (value on x axis) to move the block to. |
---|
102 | // y - the y coordinate in data units (value on the y axis) to move the block to. |
---|
103 | // duration - optional parameter to create an animated movement. Can be a |
---|
104 | // number (higher is slower animation) or 'fast', 'normal' or 'slow'. If not |
---|
105 | // provided, the element is moved without any animation. |
---|
106 | this.moveBlock = function (idx, x, y, duration) { |
---|
107 | // update plotData, stackData, data and gridData |
---|
108 | // x and y are in data coordinates. |
---|
109 | var el = this.canvas._elem.children(':eq('+idx+')'); |
---|
110 | this.data[idx][0] = x; |
---|
111 | this.data[idx][1] = y; |
---|
112 | this._plotData[idx][0] = x; |
---|
113 | this._plotData[idx][1] = y; |
---|
114 | this._stackData[idx][0] = x; |
---|
115 | this._stackData[idx][1] = y; |
---|
116 | this.gridData[idx][0] = this._xaxis.series_u2p(x); |
---|
117 | this.gridData[idx][1] = this._yaxis.series_u2p(y); |
---|
118 | var w = el.outerWidth(); |
---|
119 | var h = el.outerHeight(); |
---|
120 | var left = this.gridData[idx][0] - w/2 + 'px'; |
---|
121 | var top = this.gridData[idx][1] - h/2 + 'px'; |
---|
122 | if (duration) { |
---|
123 | if (parseInt(duration, 10)) { |
---|
124 | duration = parseInt(duration, 10); |
---|
125 | } |
---|
126 | el.animate({left:left, top:top}, duration); |
---|
127 | } |
---|
128 | else { |
---|
129 | el.css({left:left, top:top}); |
---|
130 | } |
---|
131 | el = null; |
---|
132 | }; |
---|
133 | }; |
---|
134 | |
---|
135 | // called with scope of series |
---|
136 | $.jqplot.BlockRenderer.prototype.draw = function (ctx, gd, options) { |
---|
137 | if (this.plugins.pointLabels) { |
---|
138 | this.plugins.pointLabels.show = false; |
---|
139 | } |
---|
140 | var i, el, d, gd, t, css, w, h, left, top; |
---|
141 | var opts = (options != undefined) ? options : {}; |
---|
142 | var colorGenerator = new $.jqplot.ColorGenerator(this.seriesColors); |
---|
143 | this.canvas._elem.empty(); |
---|
144 | for (i=0; i<this.gridData.length; i++) { |
---|
145 | d = this.data[i]; |
---|
146 | gd = this.gridData[i]; |
---|
147 | t = ''; |
---|
148 | css = {}; |
---|
149 | if (typeof d[2] == 'string') { |
---|
150 | t = d[2]; |
---|
151 | } |
---|
152 | else if (typeof d[2] == 'object') { |
---|
153 | css = d[2]; |
---|
154 | } |
---|
155 | if (typeof d[3] == 'object') { |
---|
156 | css = d[3]; |
---|
157 | } |
---|
158 | if (this.insertBreaks){ |
---|
159 | t = t.replace(/ /g, '<br />'); |
---|
160 | } |
---|
161 | css = $.extend(true, {}, this.css, css); |
---|
162 | // create a div |
---|
163 | el = $('<div style="position:absolute;margin-left:auto;margin-right:auto;"></div>'); |
---|
164 | this.canvas._elem.append(el); |
---|
165 | // set text |
---|
166 | this.escapeHtml ? el.text(t) : el.html(t); |
---|
167 | // style it |
---|
168 | // remove styles we don't want overridden. |
---|
169 | delete css.position; |
---|
170 | delete css.marginRight; |
---|
171 | delete css.marginLeft; |
---|
172 | if (!css.background && !css.backgroundColor && !css.backgroundImage){ |
---|
173 | css.background = colorGenerator.next(); |
---|
174 | } |
---|
175 | el.css(css); |
---|
176 | w = el.outerWidth(); |
---|
177 | h = el.outerHeight(); |
---|
178 | left = gd[0] - w/2 + 'px'; |
---|
179 | top = gd[1] - h/2 + 'px'; |
---|
180 | el.css({left:left, top:top}); |
---|
181 | el = null; |
---|
182 | } |
---|
183 | }; |
---|
184 | |
---|
185 | $.jqplot.BlockCanvas = function() { |
---|
186 | $.jqplot.ElemContainer.call(this); |
---|
187 | this._ctx; |
---|
188 | }; |
---|
189 | |
---|
190 | $.jqplot.BlockCanvas.prototype = new $.jqplot.ElemContainer(); |
---|
191 | $.jqplot.BlockCanvas.prototype.constructor = $.jqplot.BlockCanvas; |
---|
192 | |
---|
193 | $.jqplot.BlockCanvas.prototype.createElement = function(offsets, clss, plotDimensions) { |
---|
194 | this._offsets = offsets; |
---|
195 | var klass = 'jqplot-blockCanvas'; |
---|
196 | if (clss != undefined) { |
---|
197 | klass = clss; |
---|
198 | } |
---|
199 | var elem; |
---|
200 | // if this canvas already has a dom element, don't make a new one. |
---|
201 | if (this._elem) { |
---|
202 | elem = this._elem.get(0); |
---|
203 | } |
---|
204 | else { |
---|
205 | elem = document.createElement('div'); |
---|
206 | } |
---|
207 | // if new plotDimensions supplied, use them. |
---|
208 | if (plotDimensions != undefined) { |
---|
209 | this._plotDimensions = plotDimensions; |
---|
210 | } |
---|
211 | |
---|
212 | var w = this._plotDimensions.width - this._offsets.left - this._offsets.right + 'px'; |
---|
213 | var h = this._plotDimensions.height - this._offsets.top - this._offsets.bottom + 'px'; |
---|
214 | this._elem = $(elem); |
---|
215 | this._elem.css({ position: 'absolute', width:w, height:h, left: this._offsets.left, top: this._offsets.top }); |
---|
216 | |
---|
217 | this._elem.addClass(klass); |
---|
218 | return this._elem; |
---|
219 | }; |
---|
220 | |
---|
221 | $.jqplot.BlockCanvas.prototype.setContext = function() { |
---|
222 | this._ctx = { |
---|
223 | canvas:{ |
---|
224 | width:0, |
---|
225 | height:0 |
---|
226 | }, |
---|
227 | clearRect:function(){return null;} |
---|
228 | }; |
---|
229 | return this._ctx; |
---|
230 | }; |
---|
231 | |
---|
232 | })(jQuery); |
---|
233 | |
---|
234 | |
---|