| blob | 4035488aa77d35832af22a9ec0e626af014a632d |
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 $.jqplot.PyramidAxisRenderer = function() {
33 $.jqplot.LinearAxisRenderer.call(this);
34 };
36 $.jqplot.PyramidAxisRenderer.prototype = new $.jqplot.LinearAxisRenderer();
37 $.jqplot.PyramidAxisRenderer.prototype.constructor = $.jqplot.PyramidAxisRenderer;
39 // called with scope of axis
40 $.jqplot.PyramidAxisRenderer.prototype.init = function(options){
41 // Group: Properties
42 //
43 // prop: position
44 // Position of axis. Values are: top, bottom , left, center, right.
45 // By default, x and x2 axes are bottom, y axis is center.
46 this.position = null;
47 // prop: drawBaseline
48 // True to draw the axis baseline.
49 this.drawBaseline = true;
50 // prop: baselineWidth
51 // width of the baseline in pixels.
52 this.baselineWidth = null;
53 // prop: baselineColor
54 // CSS color spec for the baseline.
55 this.baselineColor = null;
56 this.tickSpacingFactor = 25;
57 this._type = 'pyramid';
58 this._splitAxis = false;
59 this._splitLength = null;
60 this.category = false;
61 this._autoFormatString = '';
62 this._overrideFormatString = false;
64 $.extend(true, this, options);
65 this.renderer.options = options;
67 this.resetDataBounds = this.renderer.resetDataBounds;
68 this.resetDataBounds();
70 };
72 $.jqplot.PyramidAxisRenderer.prototype.resetDataBounds = function() {
73 // Go through all the series attached to this axis and find
74 // the min/max bounds for this axis.
75 var db = this._dataBounds;
76 db.min = null;
77 db.max = null;
78 var temp;
79 for (var i=0; i<this._series.length; i++) {
80 var s = this._series[i];
81 var d = s._plotData;
83 for (var j=0, l=d.length; j<l; j++) {
84 if (this.name.charAt(0) === 'x') {
85 temp = d[j][1];
86 if ((temp !== null && temp < db.min) || db.min === null) {
87 db.min = temp;
88 }
89 if ((temp !== null && temp > db.max) || db.max === null) {
90 db.max = temp;
91 }
92 }
93 else {
94 temp = d[j][0];
95 if ((temp !== null && temp < db.min) || db.min === null) {
96 db.min = temp;
97 }
98 if ((temp !== null && temp > db.max) || db.max === null) {
99 db.max = temp;
100 }
101 }
102 }
103 }
104 };
106 // called with scope of axis
107 $.jqplot.PyramidAxisRenderer.prototype.draw = function(ctx, plot) {
108 if (this.show) {
109 // populate the axis label and value properties.
110 // createTicks is a method on the renderer, but
111 // call it within the scope of the axis.
112 this.renderer.createTicks.call(this, plot);
113 // fill a div with axes labels in the right direction.
114 // Need to pregenerate each axis to get it's bounds and
115 // position it and the labels correctly on the plot.
116 var dim=0;
117 var temp;
118 // Added for theming.
119 if (this._elem) {
120 // Memory Leaks patch
121 //this._elem.empty();
122 this._elem.emptyForce();
123 this._elem = null;
124 }
126 this._elem = $(document.createElement('div'));
127 this._elem.addClass('jqplot-axis jqplot-'+this.name);
128 this._elem.css('position', 'absolute');
131 if (this.name == 'xaxis' || this.name == 'x2axis') {
132 this._elem.width(this._plotDimensions.width);
133 }
134 else {
135 this._elem.height(this._plotDimensions.height);
136 }
138 // create a _label object.
139 this.labelOptions.axis = this.name;
140 this._label = new this.labelRenderer(this.labelOptions);
141 if (this._label.show) {
142 var elem = this._label.draw(ctx, plot);
143 elem.appendTo(this._elem);
144 elem = null;
145 }
147 var t = this._ticks;
148 var tick;
149 for (var i=0; i<t.length; i++) {
150 tick = t[i];
151 if (tick.show && tick.showLabel && (!tick.isMinorTick)) {
152 this._elem.append(tick.draw(ctx, plot));
153 }
154 }
155 tick = null;
156 t = null;
157 }
158 return this._elem;
159 };
161 // Note, primes can be found on http://primes.utm.edu/
162 var _primes = [2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97, 101, 103, 107, 109, 113, 127, 131, 137, 139, 149, 151, 157, 163, 167, 173, 179, 181, 191, 193, 197, 199, 211, 223, 227, 229, 233, 239, 241, 251, 257, 263, 269, 271, 277, 281, 283, 293, 307, 311, 313, 317, 331, 337, 347, 349, 353, 359, 367, 373, 379, 383, 389, 397, 401, 409, 419, 421, 431, 433, 439, 443, 449, 457, 461, 463, 467, 479, 487, 491, 499, 503, 509, 521, 523, 541, 547, 557, 563, 569, 571, 577, 587, 593, 599, 601, 607, 613, 617, 619, 631, 641, 643, 647, 653, 659, 661, 673, 677, 683, 691, 701, 709, 719, 727, 733, 739, 743, 751, 757, 761, 769, 773, 787, 797, 809, 811, 821, 823, 827, 829, 839, 853, 857, 859, 863, 877, 881, 883, 887, 907, 911, 919, 929, 937, 941, 947, 953, 967, 971, 977, 983, 991, 997];
165 var _primesHash = {};
167 for (var i =0, l = _primes.length; i < l; i++) {
168 _primesHash[_primes[i]] = _primes[i];
169 }
171 // called with scope of axis
172 $.jqplot.PyramidAxisRenderer.prototype.createTicks = function(plot) {
173 // we're are operating on an axis here
174 var userTicks = this.ticks;
175 // databounds were set on axis initialization.
176 var db = this._dataBounds;
177 var dim;
178 var interval;
179 var min;
180 var max;
181 var range;
182 var pos1;
183 var pos2;
184 var tt;
185 var i;
186 var l;
187 var s;
188 // get a copy of user's settings for min/max.
189 var userMin = this.min;
190 var userMax = this.max;
191 var ut;
192 var t;
193 var threshold;
194 var tdim;
195 var scalefact;
196 var ret;
197 var tumin;
198 var tumax;
199 var maxVisibleTicks;
200 var val;
201 var skip = null;
202 var temp;
204 // if we already have ticks, use them.
205 // ticks must be in order of increasing value.
207 if (userTicks.length) {
208 // ticks could be 1D or 2D array of [val, val, ,,,] or [[val, label], [val, label], ...] or mixed
209 for (i=0, l=userTicks.length; i<l; i++){
210 ut = userTicks[i];
211 t = new this.tickRenderer(this.tickOptions);
212 if ($.isArray(ut)) {
213 t.value = ut[0];
214 t.label = ut[1];
215 t.setTick(ut[0], this.name);
216 this._ticks.push(t);
217 }
219 else if ($.isPlainObject(ut)) {
220 $.extend(true, t, ut);
221 t.axis = this.name;
222 this._ticks.push(t);
223 }
225 else {
226 if (typeof ut === 'string') {
227 val = i + plot.defaultAxisStart;
228 }
229 else {
230 val = ut;
231 }
232 t.value = val;
233 t.label = ut;
234 t.axis = this.name;
235 this._ticks.push(t);
236 }
237 }
238 this.numberTicks = userTicks.length;
239 this.min = this._ticks[0].value;
240 this.max = this._ticks[this.numberTicks-1].value;
241 this.tickInterval = (this.max - this.min) / (this.numberTicks - 1);
243 // use user specified tickInterval if there is one
244 if (this._options.tickInterval) {
245 // hide every tick except for ticks on interval
246 var ti = this._options.tickInterval;
247 for (i=0; i<this.numberTicks; i++) {
248 if (i%ti !== 0) {
249 // this._ticks[i].show = false;
250 this._ticks[i].isMinorTick = true;
251 }
252 }
253 }
255 else {
256 // check if we have too many ticks
257 dim = (this.name.charAt(0) === 'x') ? this._plotDimensions.width : this._plotDimensions.height;
258 maxVisibleTicks = Math.round(2.0 + dim/this.tickSpacingFactor);
260 if (this.numberTicks > maxVisibleTicks) {
261 // check for number of ticks we can skip
262 temp = this.numberTicks - 1;
263 for (i=2; i<temp; i++) {
264 if (temp % i === 0 && temp/i < maxVisibleTicks) {
265 skip = i-1;
266 break;
267 }
268 }
270 if (skip !== null) {
271 var count = 1;
272 for (i=1, l=this._ticks.length; i<l; i++) {
273 if (count <= skip) {
274 this._ticks[i].show = false;
275 count += 1;
276 }
277 else {
278 count = 1;
279 }
280 }
281 }
282 }
283 }
285 // if category style, add minor ticks in between
286 temp = [];
287 if (this.category) {
288 // turn off gridline and mark on first tick
289 this._ticks[0].showGridline = false;
290 this._ticks[0].showMark = false;
292 for (i=this._ticks.length-1; i>0; i--) {
293 t = new this.tickRenderer(this.tickOptions);
294 t.value = this._ticks[i-1].value + this.tickInterval/2.0;
295 t.label = '';
296 t.showLabel = false;
297 t.axis = this.name;
298 this._ticks[i].showGridline = false;
299 this._ticks[i].showMark = false;
300 this._ticks.splice(i, 0, t);
301 // temp.push(t);
302 }
304 // merge in the new ticks
305 // for (i=1, l=temp.length; i<l; i++) {
306 // this._ticks.splice(i, 0, temp[i]);
307 // }
309 // now add a tick at beginning and end
310 t = new this.tickRenderer(this.tickOptions);
311 t.value = this._ticks[0].value - this.tickInterval/2.0;
312 t.label = '';
313 t.showLabel = false;
314 t.axis = this.name;
315 this._ticks.unshift(t);
317 t = new this.tickRenderer(this.tickOptions);
318 t.value = this._ticks[this._ticks.length-1].value + this.tickInterval/2.0;
319 t.label = '';
320 t.showLabel = false;
321 t.axis = this.name;
322 this._ticks.push(t);
324 this.tickInterval = this.tickInterval / 2.0;
325 this.numberTicks = this._ticks.length;
326 this.min = this._ticks[0].value;
327 this.max = this._ticks[this._ticks.length-1].value;
328 }
329 }
331 // we don't have any ticks yet, let's make some!
332 else {
333 if (this.name.charAt(0) === 'x') {
334 dim = this._plotDimensions.width;
335 // make sure x axis is symetric about 0.
336 var tempmax = Math.max(db.max, Math.abs(db.min));
337 var tempmin = Math.min(db.min, -tempmax);
338 // min = ((this.min != null) ? this.min : tempmin);
339 // max = ((this.max != null) ? this.max : tempmax);
340 min = tempmin;
341 max = tempmax;
342 range = max - min;
344 if (this.tickOptions == null || !this.tickOptions.formatString) {
345 this._overrideFormatString = true;
346 }
348 threshold = 30;
349 tdim = Math.max(dim, threshold+1);
350 scalefact = (tdim-threshold)/300.0;
351 ret = $.jqplot.LinearTickGenerator(min, max, scalefact);
352 // calculate a padded max and min, points should be less than these
353 // so that they aren't too close to the edges of the plot.
354 // User can adjust how much padding is allowed with pad, padMin and PadMax options.
355 tumin = min + range*(this.padMin - 1);
356 tumax = max - range*(this.padMax - 1);
358 if (min < tumin || max > tumax) {
359 tumin = min - range*(this.padMin - 1);
360 tumax = max + range*(this.padMax - 1);
361 ret = $.jqplot.LinearTickGenerator(tumin, tumax, scalefact);
362 }
364 this.min = ret[0];
365 this.max = ret[1];
366 this.numberTicks = ret[2];
367 this._autoFormatString = ret[3];
368 this.tickInterval = ret[4];
369 }
370 else {
371 dim = this._plotDimensions.height;
373 // ticks will be on whole integers like 1, 2, 3, ... or 1, 4, 7, ...
374 min = db.min;
375 max = db.max;
376 s = this._series[0];
377 this._ticks = [];
379 range = max - min;
381 // if range is a prime, will get only 2 ticks, expand range in that case.
382 if (_primesHash[range]) {
383 range += 1;
384 max += 1;
385 }
387 this.max = max;
388 this.min = min;
390 maxVisibleTicks = Math.round(2.0 + dim/this.tickSpacingFactor);
392 if (range + 1 <= maxVisibleTicks) {
393 this.numberTicks = range + 1;
394 this.tickInterval = 1.0;
395 }
397 else {
398 // figure out a round number of ticks to skip in every interval
399 // range / ti + 1 = nt
400 // ti = range / (nt - 1)
401 for (var i=maxVisibleTicks; i>1; i--) {
402 if (range/(i - 1) === Math.round(range/(i - 1))) {
403 this.numberTicks = i;
404 this.tickInterval = range/(i - 1);
405 break;
406 }
408 }
409 }
410 }
412 if (this._overrideFormatString && this._autoFormatString != '') {
413 this.tickOptions = this.tickOptions || {};
414 this.tickOptions.formatString = this._autoFormatString;
415 }
417 var labelval;
418 for (i=0; i<this.numberTicks; i++) {
419 this.tickOptions.axis = this.name;
420 labelval = this.min + this.tickInterval * i;
421 if (this.name.charAt(0) === 'x') {
422 labelval = Math.abs(labelval);
423 }
424 // this.tickOptions.label = String (labelval);
425 this.tickOptions.value = this.min + this.tickInterval * i;
426 t = new this.tickRenderer(this.tickOptions);
428 t.label = t.prefix + t.formatter(t.formatString, labelval);
430 this._ticks.push(t);
431 // for x axis, if y axis is in middle, add a symetrical 0 tick
432 if (this.name.charAt(0) === 'x' && plot.axes.yMidAxis.show && this.tickOptions.value === 0) {
433 this._splitAxis = true;
434 this._splitLength = plot.axes.yMidAxis.getWidth();
435 // t.value = -this.max/2000.0;
436 t = new this.tickRenderer(this.tickOptions);
437 this._ticks.push(t);
438 t.value = this.max/2000.0;
439 }
440 }
441 t = null;
442 }
443 };
445 // called with scope of axis
446 $.jqplot.PyramidAxisRenderer.prototype.set = function() {
447 var dim = 0;
448 var temp;
449 var w = 0;
450 var h = 0;
451 var i;
452 var t;
453 var tick;
454 var lshow = (this._label == null) ? false : this._label.show;
455 if (this.show) {
456 t = this._ticks;
457 l = t.length;
458 for (i=0; i<l; i++) {
459 tick = t[i];
460 if (!tick._breakTick && tick.show && tick.showLabel && !tick.isMinorTick) {
461 if (this.name.charAt(0) === 'x') {
462 temp = tick._elem.outerHeight(true);
463 }
464 else {
465 temp = tick._elem.outerWidth(true);
466 }
467 if (temp > dim) {
468 dim = temp;
469 }
470 }
471 }
473 if (this.name === 'yMidAxis') {
474 for (i=0; i<l; i++) {
475 tick = t[i];
476 if (tick._elem) {
477 temp = (dim - tick._elem.outerWidth(true))/2.0;
478 tick._elem.css('left', temp);
479 }
480 }
481 }
482 tick = null;
483 t = null;
485 if (lshow) {
486 w = this._label._elem.outerWidth(true);
487 h = this._label._elem.outerHeight(true);
488 }
489 if (this.name === 'xaxis') {
490 dim = dim + h;
491 this._elem.css({'height':dim+'px', left:'0px', bottom:'0px'});
492 }
493 else if (this.name === 'x2axis') {
494 dim = dim + h;
495 this._elem.css({'height':dim+'px', left:'0px', top:'0px'});
496 }
497 else if (this.name === 'yaxis') {
498 dim = dim + w;
499 this._elem.css({'width':dim+'px', left:'0px', top:'0px'});
500 if (lshow && this._label.constructor == $.jqplot.AxisLabelRenderer) {
501 this._label._elem.css('width', w+'px');
502 }
503 }
504 else if (this.name === 'yMidAxis') {
505 // don't include width of label at all in width of axis?
506 // dim = (dim > w) ? dim : w;
507 var temp = dim/2.0 - w/2.0;
508 this._elem.css({'width':dim+'px', top:'0px'});
509 if (lshow && this._label.constructor == $.jqplot.AxisLabelRenderer) {
510 this._label._elem.css({width: w, left: temp, top: 0});
511 }
512 }
513 else {
514 dim = dim + w;
515 this._elem.css({'width':dim+'px', right:'0px', top:'0px'});
516 if (lshow && this._label.constructor == $.jqplot.AxisLabelRenderer) {
517 this._label._elem.css('width', w+'px');
518 }
519 }
520 }
521 };
523 $.jqplot.PyramidAxisRenderer.prototype.pack = function(pos, offsets) {
524 // Add defaults for repacking from resetTickValues function.
525 pos = pos || {};
526 offsets = offsets || this._offsets;
528 var ticks = this._ticks;
529 var max = this.max;
530 var min = this.min;
531 var offmax = offsets.max;
532 var offmin = offsets.min;
533 var lshow = (this._label == null) ? false : this._label.show;
535 for (var p in pos) {
536 this._elem.css(p, pos[p]);
537 }
539 this._offsets = offsets;
540 // pixellength will be + for x axes and - for y axes becasue pixels always measured from top left.
541 var pixellength = offmax - offmin;
542 var unitlength = max - min;
543 var sl = this._splitLength;
545 // point to unit and unit to point conversions references to Plot DOM element top left corner.
546 if (this._splitAxis) {
547 pixellength -= this._splitLength;
549 // don't know that this one is correct.
550 this.p2u = function(p){
551 return (p - offmin) * unitlength / pixellength + min;
552 };
554 this.u2p = function(u){
555 if (u <= 0) {
556 return (u - min) * pixellength / unitlength + offmin;
557 }
558 else {
559 return (u - min) * pixellength / unitlength + offmin + sl;
560 }
561 };
563 this.series_u2p = function(u){
564 if (u <= 0) {
565 return (u - min) * pixellength / unitlength;
566 }
567 else {
568 return (u - min) * pixellength / unitlength + sl;
569 }
570 };
572 // don't know that this one is correct.
573 this.series_p2u = function(p){
574 return p * unitlength / pixellength + min;
575 };
576 }
577 else {
578 this.p2u = function(p){
579 return (p - offmin) * unitlength / pixellength + min;
580 };
582 this.u2p = function(u){
583 return (u - min) * pixellength / unitlength + offmin;
584 };
586 if (this.name.charAt(0) === 'x'){
587 this.series_u2p = function(u){
588 return (u - min) * pixellength / unitlength;
589 };
590 this.series_p2u = function(p){
591 return p * unitlength / pixellength + min;
592 };
593 }
595 else {
596 this.series_u2p = function(u){
597 return (u - max) * pixellength / unitlength;
598 };
599 this.series_p2u = function(p){
600 return p * unitlength / pixellength + max;
601 };
602 }
603 }
605 if (this.show) {
606 if (this.name.charAt(0) === 'x') {
607 for (var i=0; i<ticks.length; i++) {
608 var t = ticks[i];
609 if (t.show && t.showLabel) {
610 var shim;
612 if (t.constructor == $.jqplot.CanvasAxisTickRenderer && t.angle) {
613 // will need to adjust auto positioning based on which axis this is.
614 var temp = (this.name == 'xaxis') ? 1 : -1;
615 switch (t.labelPosition) {
616 case 'auto':
617 // position at end
618 if (temp * t.angle < 0) {
619 shim = -t.getWidth() + t._textRenderer.height * Math.sin(-t._textRenderer.angle) / 2;
620 }
621 // position at start
622 else {
623 shim = -t._textRenderer.height * Math.sin(t._textRenderer.angle) / 2;
624 }
625 break;
626 case 'end':
627 shim = -t.getWidth() + t._textRenderer.height * Math.sin(-t._textRenderer.angle) / 2;
628 break;
629 case 'start':
630 shim = -t._textRenderer.height * Math.sin(t._textRenderer.angle) / 2;
631 break;
632 case 'middle':
633 shim = -t.getWidth()/2 + t._textRenderer.height * Math.sin(-t._textRenderer.angle) / 2;
634 break;
635 default:
636 shim = -t.getWidth()/2 + t._textRenderer.height * Math.sin(-t._textRenderer.angle) / 2;
637 break;
638 }
639 }
640 else {
641 shim = -t.getWidth()/2;
642 }
643 var val = this.u2p(t.value) + shim + 'px';
644 t._elem.css('left', val);
645 t.pack();
646 }
647 }
648 if (lshow) {
649 var w = this._label._elem.outerWidth(true);
650 this._label._elem.css('left', offmin + pixellength/2 - w/2 + 'px');
651 if (this.name == 'xaxis') {
652 this._label._elem.css('bottom', '0px');
653 }
654 else {
655 this._label._elem.css('top', '0px');
656 }
657 this._label.pack();
658 }
659 }
660 else {
661 for (var i=0; i<ticks.length; i++) {
662 var t = ticks[i];
663 if (t.show && t.showLabel && !t.isMinorTick) {
664 var shim;
665 if (t.constructor == $.jqplot.CanvasAxisTickRenderer && t.angle) {
666 // will need to adjust auto positioning based on which axis this is.
667 var temp = (this.name == 'yaxis') ? 1 : -1;
668 switch (t.labelPosition) {
669 case 'auto':
670 // position at end
671 case 'end':
672 if (temp * t.angle < 0) {
673 shim = -t._textRenderer.height * Math.cos(-t._textRenderer.angle) / 2;
674 }
675 else {
676 shim = -t.getHeight() + t._textRenderer.height * Math.cos(t._textRenderer.angle) / 2;
677 }
678 break;
679 case 'start':
680 if (t.angle > 0) {
681 shim = -t._textRenderer.height * Math.cos(-t._textRenderer.angle) / 2;
682 }
683 else {
684 shim = -t.getHeight() + t._textRenderer.height * Math.cos(t._textRenderer.angle) / 2;
685 }
686 break;
687 case 'middle':
688 // if (t.angle > 0) {
689 // shim = -t.getHeight()/2 + t._textRenderer.height * Math.sin(-t._textRenderer.angle) / 2;
690 // }
691 // else {
692 // shim = -t.getHeight()/2 - t._textRenderer.height * Math.sin(t._textRenderer.angle) / 2;
693 // }
694 shim = -t.getHeight()/2;
695 break;
696 default:
697 shim = -t.getHeight()/2;
698 break;
699 }
700 }
701 else {
702 shim = -t.getHeight()/2;
703 }
705 var val = this.u2p(t.value) + shim + 'px';
706 t._elem.css('top', val);
707 t.pack();
708 }
709 }
710 if (lshow) {
711 var h = this._label._elem.outerHeight(true);
712 if (this.name !== 'yMidAxis') {
713 this._label._elem.css('top', offmax - pixellength/2 - h/2 + 'px');
714 }
715 if (this.name == 'yaxis') {
716 this._label._elem.css('left', '0px');
717 }
718 else if (this.name !== 'yMidAxis') {
719 this._label._elem.css('right', '0px');
720 }
721 this._label.pack();
722 }
723 }
724 }
726 ticks = null;
727 };
728 })(jQuery);