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."
32 $.jqplot.PyramidAxisRenderer = function() {
33 $.jqplot.LinearAxisRenderer.call(this);
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){
44 // Position of axis. Values are: top, bottom , left, center, right.
45 // By default, x and x2 axes are bottom, y axis is center.
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();
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;
79 for (var i=0; i<this._series.length; i++) {
80 var s = this._series[i];
83 for (var j=0, l=d.length; j<l; j++) {
84 if (this.name.charAt(0) === 'x') {
86 if ((temp !== null && temp < db.min) || db.min === null) {
89 if ((temp !== null && temp > db.max) || db.max === null) {
95 if ((temp !== null && temp < db.min) || db.min === null) {
98 if ((temp !== null && temp > db.max) || db.max === null) {
106 // called with scope of axis
107 $.jqplot.PyramidAxisRenderer.prototype.draw = function(ctx, plot) {
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.
118 // Added for theming.
120 // Memory Leaks patch
121 //this._elem.empty();
122 this._elem.emptyForce();
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);
135 this._elem.height(this._plotDimensions.height);
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);
149 for (var i=0; i<t.length; i++) {
151 if (tick.show && tick.showLabel && (!tick.isMinorTick)) {
152 this._elem.append(tick.draw(ctx, plot));
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];
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;
188 // get a copy of user's settings for min/max.
189 var userMin = this.min;
190 var userMax = this.max;
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++){
211 t = new this.tickRenderer(this.tickOptions);
215 t.setTick(ut[0], this.name);
219 else if ($.isPlainObject(ut)) {
220 $.extend(true, t, ut);
226 if (typeof ut === 'string') {
227 val = i + plot.defaultAxisStart;
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++) {
249 // this._ticks[i].show = false;
250 this._ticks[i].isMinorTick = true;
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) {
272 for (i=1, l=this._ticks.length; i<l; i++) {
274 this._ticks[i].show = false;
285 // if category style, add minor ticks in between
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;
298 this._ticks[i].showGridline = false;
299 this._ticks[i].showMark = false;
300 this._ticks.splice(i, 0, t);
304 // merge in the new ticks
305 // for (i=1, l=temp.length; i<l; i++) {
306 // this._ticks.splice(i, 0, temp[i]);
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;
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;
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;
331 // we don't have any ticks yet, let's make some!
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);
344 if (this.tickOptions == null || !this.tickOptions.formatString) {
345 this._overrideFormatString = true;
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);
366 this.numberTicks = ret[2];
367 this._autoFormatString = ret[3];
368 this.tickInterval = ret[4];
371 dim = this._plotDimensions.height;
373 // ticks will be on whole integers like 1, 2, 3, ... or 1, 4, 7, ...
381 // if range is a prime, will get only 2 ticks, expand range in that case.
382 if (_primesHash[range]) {
390 maxVisibleTicks = Math.round(2.0 + dim/this.tickSpacingFactor);
392 if (range + 1 <= maxVisibleTicks) {
393 this.numberTicks = range + 1;
394 this.tickInterval = 1.0;
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);
412 if (this._overrideFormatString && this._autoFormatString != '') {
413 this.tickOptions = this.tickOptions || {};
414 this.tickOptions.formatString = this._autoFormatString;
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);
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);
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);
438 t.value = this.max/2000.0;
445 // called with scope of axis
446 $.jqplot.PyramidAxisRenderer.prototype.set = function() {
454 var lshow = (this._label == null) ? false : this._label.show;
458 for (i=0; i<l; i++) {
460 if (!tick._breakTick && tick.show && tick.showLabel && !tick.isMinorTick) {
461 if (this.name.charAt(0) === 'x') {
462 temp = tick._elem.outerHeight(true);
465 temp = tick._elem.outerWidth(true);
473 if (this.name === 'yMidAxis') {
474 for (i=0; i<l; i++) {
477 temp = (dim - tick._elem.outerWidth(true))/2.0;
478 tick._elem.css('left', temp);
486 w = this._label._elem.outerWidth(true);
487 h = this._label._elem.outerHeight(true);
489 if (this.name === 'xaxis') {
491 this._elem.css({'height':dim+'px', left:'0px', bottom:'0px'});
493 else if (this.name === 'x2axis') {
495 this._elem.css({'height':dim+'px', left:'0px', top:'0px'});
497 else if (this.name === 'yaxis') {
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');
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});
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');
523 $.jqplot.PyramidAxisRenderer.prototype.pack = function(pos, offsets) {
524 // Add defaults for repacking from resetTickValues function.
526 offsets = offsets || this._offsets;
528 var ticks = this._ticks;
531 var offmax = offsets.max;
532 var offmin = offsets.min;
533 var lshow = (this._label == null) ? false : this._label.show;
536 this._elem.css(p, pos[p]);
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;
554 this.u2p = function(u){
556 return (u - min) * pixellength / unitlength + offmin;
559 return (u - min) * pixellength / unitlength + offmin + sl;
563 this.series_u2p = function(u){
565 return (u - min) * pixellength / unitlength;
568 return (u - min) * pixellength / unitlength + sl;
572 // don't know that this one is correct.
573 this.series_p2u = function(p){
574 return p * unitlength / pixellength + min;
578 this.p2u = function(p){
579 return (p - offmin) * unitlength / pixellength + min;
582 this.u2p = function(u){
583 return (u - min) * pixellength / unitlength + offmin;
586 if (this.name.charAt(0) === 'x'){
587 this.series_u2p = function(u){
588 return (u - min) * pixellength / unitlength;
590 this.series_p2u = function(p){
591 return p * unitlength / pixellength + min;
596 this.series_u2p = function(u){
597 return (u - max) * pixellength / unitlength;
599 this.series_p2u = function(p){
600 return p * unitlength / pixellength + max;
606 if (this.name.charAt(0) === 'x') {
607 for (var i=0; i<ticks.length; i++) {
609 if (t.show && t.showLabel) {
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) {
618 if (temp * t.angle < 0) {
619 shim = -t.getWidth() + t._textRenderer.height * Math.sin(-t._textRenderer.angle) / 2;
623 shim = -t._textRenderer.height * Math.sin(t._textRenderer.angle) / 2;
627 shim = -t.getWidth() + t._textRenderer.height * Math.sin(-t._textRenderer.angle) / 2;
630 shim = -t._textRenderer.height * Math.sin(t._textRenderer.angle) / 2;
633 shim = -t.getWidth()/2 + t._textRenderer.height * Math.sin(-t._textRenderer.angle) / 2;
636 shim = -t.getWidth()/2 + t._textRenderer.height * Math.sin(-t._textRenderer.angle) / 2;
641 shim = -t.getWidth()/2;
643 var val = this.u2p(t.value) + shim + 'px';
644 t._elem.css('left', val);
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');
655 this._label._elem.css('top', '0px');
661 for (var i=0; i<ticks.length; i++) {
663 if (t.show && t.showLabel && !t.isMinorTick) {
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) {
672 if (temp * t.angle < 0) {
673 shim = -t._textRenderer.height * Math.cos(-t._textRenderer.angle) / 2;
676 shim = -t.getHeight() + t._textRenderer.height * Math.cos(t._textRenderer.angle) / 2;
681 shim = -t._textRenderer.height * Math.cos(-t._textRenderer.angle) / 2;
684 shim = -t.getHeight() + t._textRenderer.height * Math.cos(t._textRenderer.angle) / 2;
688 // if (t.angle > 0) {
689 // shim = -t.getHeight()/2 + t._textRenderer.height * Math.sin(-t._textRenderer.angle) / 2;
692 // shim = -t.getHeight()/2 - t._textRenderer.height * Math.sin(t._textRenderer.angle) / 2;
694 shim = -t.getHeight()/2;
697 shim = -t.getHeight()/2;
702 shim = -t.getHeight()/2;
705 var val = this.u2p(t.value) + shim + 'px';
706 t._elem.css('top', val);
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');
715 if (this.name == 'yaxis') {
716 this._label._elem.css('left', '0px');
718 else if (this.name !== 'yMidAxis') {
719 this._label._elem.css('right', '0px');