1 | /** |
---|
2 | * jqPlot |
---|
3 | * Pure JavaScript plotting plugin using jQuery |
---|
4 | * |
---|
5 | * Version: @VERSION |
---|
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.DateAxisRenderer |
---|
33 | * A plugin for a jqPlot to render an axis as a series of date values. |
---|
34 | * This renderer has no options beyond those supplied by the <Axis> class. |
---|
35 | * It supplies it's own tick formatter, so the tickOptions.formatter option |
---|
36 | * should not be overridden. |
---|
37 | * |
---|
38 | * Thanks to Ken Synder for his enhanced Date instance methods which are |
---|
39 | * included with this code <http://kendsnyder.com/sandbox/date/>. |
---|
40 | * |
---|
41 | * To use this renderer, include the plugin in your source |
---|
42 | * > <script type="text/javascript" language="javascript" src="plugins/jqplot.dateAxisRenderer.js"></script> |
---|
43 | * |
---|
44 | * and supply the appropriate options to your plot |
---|
45 | * |
---|
46 | * > {axes:{xaxis:{renderer:$.jqplot.DateAxisRenderer}}} |
---|
47 | * |
---|
48 | * Dates can be passed into the axis in almost any recognizable value and |
---|
49 | * will be parsed. They will be rendered on the axis in the format |
---|
50 | * specified by tickOptions.formatString. e.g. tickOptions.formatString = '%Y-%m-%d'. |
---|
51 | * |
---|
52 | * Accecptable format codes |
---|
53 | * are: |
---|
54 | * |
---|
55 | * > Code Result Description |
---|
56 | * > == Years == |
---|
57 | * > %Y 2008 Four-digit year |
---|
58 | * > %y 08 Two-digit year |
---|
59 | * > == Months == |
---|
60 | * > %m 09 Two-digit month |
---|
61 | * > %#m 9 One or two-digit month |
---|
62 | * > %B September Full month name |
---|
63 | * > %b Sep Abbreviated month name |
---|
64 | * > == Days == |
---|
65 | * > %d 05 Two-digit day of month |
---|
66 | * > %#d 5 One or two-digit day of month |
---|
67 | * > %e 5 One or two-digit day of month |
---|
68 | * > %A Sunday Full name of the day of the week |
---|
69 | * > %a Sun Abbreviated name of the day of the week |
---|
70 | * > %w 0 Number of the day of the week (0 = Sunday, 6 = Saturday) |
---|
71 | * > %o th The ordinal suffix string following the day of the month |
---|
72 | * > == Hours == |
---|
73 | * > %H 23 Hours in 24-hour format (two digits) |
---|
74 | * > %#H 3 Hours in 24-hour integer format (one or two digits) |
---|
75 | * > %I 11 Hours in 12-hour format (two digits) |
---|
76 | * > %#I 3 Hours in 12-hour integer format (one or two digits) |
---|
77 | * > %p PM AM or PM |
---|
78 | * > == Minutes == |
---|
79 | * > %M 09 Minutes (two digits) |
---|
80 | * > %#M 9 Minutes (one or two digits) |
---|
81 | * > == Seconds == |
---|
82 | * > %S 02 Seconds (two digits) |
---|
83 | * > %#S 2 Seconds (one or two digits) |
---|
84 | * > %s 1206567625723 Unix timestamp (Seconds past 1970-01-01 00:00:00) |
---|
85 | * > == Milliseconds == |
---|
86 | * > %N 008 Milliseconds (three digits) |
---|
87 | * > %#N 8 Milliseconds (one to three digits) |
---|
88 | * > == Timezone == |
---|
89 | * > %O 360 difference in minutes between local time and GMT |
---|
90 | * > %Z Mountain Standard Time Name of timezone as reported by browser |
---|
91 | * > %G -06:00 Hours and minutes between GMT |
---|
92 | * > == Shortcuts == |
---|
93 | * > %F 2008-03-26 %Y-%m-%d |
---|
94 | * > %T 05:06:30 %H:%M:%S |
---|
95 | * > %X 05:06:30 %H:%M:%S |
---|
96 | * > %x 03/26/08 %m/%d/%y |
---|
97 | * > %D 03/26/08 %m/%d/%y |
---|
98 | * > %#c Wed Mar 26 15:31:00 2008 %a %b %e %H:%M:%S %Y |
---|
99 | * > %v 3-Sep-2008 %e-%b-%Y |
---|
100 | * > %R 15:31 %H:%M |
---|
101 | * > %r 3:31:00 PM %I:%M:%S %p |
---|
102 | * > == Characters == |
---|
103 | * > %n \n Newline |
---|
104 | * > %t \t Tab |
---|
105 | * > %% % Percent Symbol |
---|
106 | */ |
---|
107 | $.jqplot.DateAxisRenderer = function() { |
---|
108 | $.jqplot.LinearAxisRenderer.call(this); |
---|
109 | this.date = new $.jsDate(); |
---|
110 | }; |
---|
111 | |
---|
112 | $.jqplot.DateAxisRenderer.prototype = new $.jqplot.LinearAxisRenderer(); |
---|
113 | $.jqplot.DateAxisRenderer.prototype.constructor = $.jqplot.DateAxisRenderer; |
---|
114 | |
---|
115 | $.jqplot.DateTickFormatter = function(format, val) { |
---|
116 | if (!format) { |
---|
117 | format = '%Y/%m/%d'; |
---|
118 | } |
---|
119 | return $.jsDate.strftime(val, format); |
---|
120 | }; |
---|
121 | |
---|
122 | $.jqplot.DateAxisRenderer.prototype.init = function(options){ |
---|
123 | // prop: tickRenderer |
---|
124 | // A class of a rendering engine for creating the ticks labels displayed on the plot, |
---|
125 | // See <$.jqplot.AxisTickRenderer>. |
---|
126 | // this.tickRenderer = $.jqplot.AxisTickRenderer; |
---|
127 | // this.labelRenderer = $.jqplot.AxisLabelRenderer; |
---|
128 | this.tickOptions.formatter = $.jqplot.DateTickFormatter; |
---|
129 | this.daTickInterval = null; |
---|
130 | this._daTickInterval = null; |
---|
131 | |
---|
132 | $.extend(true, this, options); |
---|
133 | |
---|
134 | var db = this._dataBounds, |
---|
135 | stats, |
---|
136 | sum, |
---|
137 | s, |
---|
138 | d, |
---|
139 | pd, |
---|
140 | sd, |
---|
141 | intv; |
---|
142 | |
---|
143 | // Go through all the series attached to this axis and find |
---|
144 | // the min/max bounds for this axis. |
---|
145 | for (var i=0; i<this._series.length; i++) { |
---|
146 | stats = {intervals:[], frequencies:{}, sortedIntervals:[], min:null, max:null, mean:null}; |
---|
147 | sum = 0; |
---|
148 | s = this._series[i]; |
---|
149 | d = s.data; |
---|
150 | pd = s._plotData; |
---|
151 | sd = s._stackData; |
---|
152 | intv = 0; |
---|
153 | |
---|
154 | for (var j=0; j<d.length; j++) { |
---|
155 | if (this.name == 'xaxis' || this.name == 'x2axis') { |
---|
156 | d[j][0] = new $.jsDate(d[j][0]).getTime(); |
---|
157 | pd[j][0] = new $.jsDate(d[j][0]).getTime(); |
---|
158 | sd[j][0] = new $.jsDate(d[j][0]).getTime(); |
---|
159 | if ((d[j][0] != null && d[j][0] < db.min) || db.min == null) { |
---|
160 | db.min = d[j][0]; |
---|
161 | } |
---|
162 | if ((d[j][0] != null && d[j][0] > db.max) || db.max == null) { |
---|
163 | db.max = d[j][0]; |
---|
164 | } |
---|
165 | if (j>0) { |
---|
166 | intv = Math.abs(d[j][0] - d[j-1][0]); |
---|
167 | stats.intervals.push(intv); |
---|
168 | if (stats.frequencies.hasOwnProperty(intv)) { |
---|
169 | stats.frequencies[intv] += 1; |
---|
170 | } |
---|
171 | else { |
---|
172 | stats.frequencies[intv] = 1; |
---|
173 | } |
---|
174 | } |
---|
175 | sum += intv; |
---|
176 | |
---|
177 | } |
---|
178 | else { |
---|
179 | d[j][1] = new $.jsDate(d[j][1]).getTime(); |
---|
180 | pd[j][1] = new $.jsDate(d[j][1]).getTime(); |
---|
181 | sd[j][1] = new $.jsDate(d[j][1]).getTime(); |
---|
182 | if ((d[j][1] != null && d[j][1] < db.min) || db.min == null) { |
---|
183 | db.min = d[j][1]; |
---|
184 | } |
---|
185 | if ((d[j][1] != null && d[j][1] > db.max) || db.max == null) { |
---|
186 | db.max = d[j][1]; |
---|
187 | } |
---|
188 | if (j>0) { |
---|
189 | intv = Math.abs(d[j][1] - d[j-1][1]); |
---|
190 | stats.intervals.push(intv); |
---|
191 | if (stats.frequencies.hasOwnProperty(intv)) { |
---|
192 | stats.frequencies[intv] += 1; |
---|
193 | } |
---|
194 | else { |
---|
195 | stats.frequencies[intv] = 1; |
---|
196 | } |
---|
197 | } |
---|
198 | } |
---|
199 | sum += intv; |
---|
200 | } |
---|
201 | |
---|
202 | var tempf = 0, |
---|
203 | tempn=0; |
---|
204 | for (var n in stats.frequencies) { |
---|
205 | stats.sortedIntervals.push({interval:n, frequency:stats.frequencies[n]}); |
---|
206 | } |
---|
207 | stats.sortedIntervals.sort(function(a, b){ |
---|
208 | return b.frequency - a.frequency; |
---|
209 | }); |
---|
210 | |
---|
211 | stats.min = $.jqplot.arrayMin(stats.intervals); |
---|
212 | stats.max = $.jqplot.arrayMax(stats.intervals); |
---|
213 | stats.mean = sum/d.length; |
---|
214 | this._intervalStats.push(stats); |
---|
215 | stats = sum = s = d = pd = sd = null; |
---|
216 | } |
---|
217 | db = null; |
---|
218 | |
---|
219 | }; |
---|
220 | |
---|
221 | // called with scope of an axis |
---|
222 | $.jqplot.DateAxisRenderer.prototype.reset = function() { |
---|
223 | this.min = this._min; |
---|
224 | this.max = this._max; |
---|
225 | this.tickInterval = this._tickInterval; |
---|
226 | this.numberTicks = this._numberTicks; |
---|
227 | this.daTickInterval = this._daTickInterval; |
---|
228 | // this._ticks = this.__ticks; |
---|
229 | }; |
---|
230 | |
---|
231 | $.jqplot.DateAxisRenderer.prototype.createTicks = function() { |
---|
232 | // we're are operating on an axis here |
---|
233 | var ticks = this._ticks; |
---|
234 | var userTicks = this.ticks; |
---|
235 | var name = this.name; |
---|
236 | // databounds were set on axis initialization. |
---|
237 | var db = this._dataBounds; |
---|
238 | var iv = this._intervalStats; |
---|
239 | var dim, interval; |
---|
240 | var min, max; |
---|
241 | var pos1, pos2; |
---|
242 | var tt, i; |
---|
243 | |
---|
244 | // if we already have ticks, use them. |
---|
245 | // ticks must be in order of increasing value. |
---|
246 | |
---|
247 | min = ((this.min != null) ? new $.jsDate(this.min).getTime() : db.min); |
---|
248 | max = ((this.max != null) ? new $.jsDate(this.max).getTime() : db.max); |
---|
249 | |
---|
250 | var range = max - min; |
---|
251 | |
---|
252 | if (userTicks.length) { |
---|
253 | // ticks could be 1D or 2D array of [val, val, ,,,] or [[val, label], [val, label], ...] or mixed |
---|
254 | for (i=0; i<userTicks.length; i++){ |
---|
255 | var ut = userTicks[i]; |
---|
256 | var t = new this.tickRenderer(this.tickOptions); |
---|
257 | if (ut.constructor == Array) { |
---|
258 | t.value = new $.jsDate(ut[0]).getTime(); |
---|
259 | t.label = ut[1]; |
---|
260 | if (!this.showTicks) { |
---|
261 | t.showLabel = false; |
---|
262 | t.showMark = false; |
---|
263 | } |
---|
264 | else if (!this.showTickMarks) { |
---|
265 | t.showMark = false; |
---|
266 | } |
---|
267 | t.setTick(t.value, this.name); |
---|
268 | this._ticks.push(t); |
---|
269 | } |
---|
270 | |
---|
271 | else { |
---|
272 | t.value = new $.jsDate(ut).getTime(); |
---|
273 | if (!this.showTicks) { |
---|
274 | t.showLabel = false; |
---|
275 | t.showMark = false; |
---|
276 | } |
---|
277 | else if (!this.showTickMarks) { |
---|
278 | t.showMark = false; |
---|
279 | } |
---|
280 | t.setTick(t.value, this.name); |
---|
281 | this._ticks.push(t); |
---|
282 | } |
---|
283 | } |
---|
284 | this.numberTicks = userTicks.length; |
---|
285 | this.min = this._ticks[0].value; |
---|
286 | this.max = this._ticks[this.numberTicks-1].value; |
---|
287 | this.daTickInterval = [(this.max - this.min) / (this.numberTicks - 1)/1000, 'seconds']; |
---|
288 | } |
---|
289 | |
---|
290 | //////// |
---|
291 | // We don't have any ticks yet, let's make some! |
---|
292 | // Doing complete autoscaling, no user options specified |
---|
293 | //////// |
---|
294 | |
---|
295 | else if (this.tickInterval == null && this.min == null && this.max == null && this.numberTicks == null) { |
---|
296 | var ret = $.jqplot.LinearTickGenerator(min, max); |
---|
297 | // calculate a padded max and min, points should be less than these |
---|
298 | // so that they aren't too close to the edges of the plot. |
---|
299 | // User can adjust how much padding is allowed with pad, padMin and PadMax options. |
---|
300 | var tumin = min + range*(this.padMin - 1); |
---|
301 | var tumax = max - range*(this.padMax - 1); |
---|
302 | |
---|
303 | if (min <=tumin || max >= tumax) { |
---|
304 | tumin = min - range*(this.padMin - 1); |
---|
305 | tumax = max + range*(this.padMax - 1); |
---|
306 | ret = $.jqplot.LinearTickGenerator(tumin, tumax); |
---|
307 | } |
---|
308 | |
---|
309 | this.min = ret[0]; |
---|
310 | this.max = ret[1]; |
---|
311 | this.numberTicks = ret[2]; |
---|
312 | this.tickInterval = ret[4]; |
---|
313 | this.daTickInterval = [this.tickInterval/1000, 'seconds']; |
---|
314 | |
---|
315 | for (var i=0; i<this.numberTicks; i++){ |
---|
316 | var min = new $.jsDate(this.min); |
---|
317 | tt = min.add(i*this.daTickInterval[0], this.daTickInterval[1]).getTime(); |
---|
318 | var t = new this.tickRenderer(this.tickOptions); |
---|
319 | // var t = new $.jqplot.AxisTickRenderer(this.tickOptions); |
---|
320 | if (!this.showTicks) { |
---|
321 | t.showLabel = false; |
---|
322 | t.showMark = false; |
---|
323 | } |
---|
324 | else if (!this.showTickMarks) { |
---|
325 | t.showMark = false; |
---|
326 | } |
---|
327 | t.setTick(tt, this.name); |
---|
328 | this._ticks.push(t); |
---|
329 | } |
---|
330 | } |
---|
331 | |
---|
332 | //////// |
---|
333 | // Some option(s) specified, work around that. |
---|
334 | //////// |
---|
335 | |
---|
336 | else { |
---|
337 | if (name == 'xaxis' || name == 'x2axis') { |
---|
338 | dim = this._plotDimensions.width; |
---|
339 | } |
---|
340 | else { |
---|
341 | dim = this._plotDimensions.height; |
---|
342 | } |
---|
343 | |
---|
344 | // if min, max and number of ticks specified, user can't specify interval. |
---|
345 | if (this.min != null && this.max != null && this.numberTicks != null) { |
---|
346 | this.tickInterval = null; |
---|
347 | } |
---|
348 | |
---|
349 | // if user specified a tick interval, convert to usable. |
---|
350 | if (this.tickInterval != null) |
---|
351 | { |
---|
352 | // if interval is a number or can be converted to one, use it. |
---|
353 | // Assume it is in SECONDS!!! |
---|
354 | if (Number(this.tickInterval)) { |
---|
355 | this.daTickInterval = [Number(this.tickInterval), 'seconds']; |
---|
356 | } |
---|
357 | // else, parse out something we can build from. |
---|
358 | else if (typeof this.tickInterval == "string") { |
---|
359 | var parts = this.tickInterval.split(' '); |
---|
360 | if (parts.length == 1) { |
---|
361 | this.daTickInterval = [1, parts[0]]; |
---|
362 | } |
---|
363 | else if (parts.length == 2) { |
---|
364 | this.daTickInterval = [parts[0], parts[1]]; |
---|
365 | } |
---|
366 | } |
---|
367 | } |
---|
368 | |
---|
369 | // if min and max are same, space them out a bit |
---|
370 | if (min == max) { |
---|
371 | var adj = 24*60*60*500; // 1/2 day |
---|
372 | min -= adj; |
---|
373 | max += adj; |
---|
374 | } |
---|
375 | |
---|
376 | range = max - min; |
---|
377 | |
---|
378 | var optNumTicks = 2 + parseInt(Math.max(0, dim-100)/100, 10); |
---|
379 | |
---|
380 | |
---|
381 | // Here try to set ticks based on data spacing. |
---|
382 | // if (this.min == null && this.max == null && this.numberTicks == null && this.tickInterval == null) { |
---|
383 | // // |
---|
384 | // } |
---|
385 | |
---|
386 | |
---|
387 | var rmin, rmax; |
---|
388 | |
---|
389 | rmin = (this.min != null) ? new $.jsDate(this.min).getTime() : min - range/2*(this.padMin - 1); |
---|
390 | rmax = (this.max != null) ? new $.jsDate(this.max).getTime() : max + range/2*(this.padMax - 1); |
---|
391 | this.min = rmin; |
---|
392 | this.max = rmax; |
---|
393 | range = this.max - this.min; |
---|
394 | |
---|
395 | if (this.numberTicks == null){ |
---|
396 | // if tickInterval is specified by user, we will ignore computed maximum. |
---|
397 | // max will be equal or greater to fit even # of ticks. |
---|
398 | if (this.daTickInterval != null) { |
---|
399 | var nc = new $.jsDate(this.max).diff(this.min, this.daTickInterval[1], true); |
---|
400 | this.numberTicks = Math.ceil(nc/this.daTickInterval[0]) +1; |
---|
401 | // this.max = new $.jsDate(this.min).add(this.numberTicks-1, this.daTickInterval[1]).getTime(); |
---|
402 | this.max = new $.jsDate(this.min).add((this.numberTicks-1) * this.daTickInterval[0], this.daTickInterval[1]).getTime(); |
---|
403 | } |
---|
404 | else if (dim > 200) { |
---|
405 | this.numberTicks = parseInt(3+(dim-200)/100, 10); |
---|
406 | } |
---|
407 | else { |
---|
408 | this.numberTicks = 2; |
---|
409 | } |
---|
410 | } |
---|
411 | |
---|
412 | if (this.daTickInterval == null) { |
---|
413 | this.daTickInterval = [range / (this.numberTicks-1)/1000, 'seconds']; |
---|
414 | } |
---|
415 | for (var i=0; i<this.numberTicks; i++){ |
---|
416 | var min = new $.jsDate(this.min); |
---|
417 | tt = min.add(i*this.daTickInterval[0], this.daTickInterval[1]).getTime(); |
---|
418 | var t = new this.tickRenderer(this.tickOptions); |
---|
419 | // var t = new $.jqplot.AxisTickRenderer(this.tickOptions); |
---|
420 | if (!this.showTicks) { |
---|
421 | t.showLabel = false; |
---|
422 | t.showMark = false; |
---|
423 | } |
---|
424 | else if (!this.showTickMarks) { |
---|
425 | t.showMark = false; |
---|
426 | } |
---|
427 | t.setTick(tt, this.name); |
---|
428 | this._ticks.push(t); |
---|
429 | } |
---|
430 | } |
---|
431 | |
---|
432 | |
---|
433 | if (this._daTickInterval == null) { |
---|
434 | this._daTickInterval = this.daTickInterval; |
---|
435 | } |
---|
436 | }; |
---|
437 | |
---|
438 | })(jQuery); |
---|
439 | |
---|