Free cookie consent management tool by TermsFeed Policy Generator

source: branches/OaaS/HeuristicLab.Services.Optimization.Web/Content/jqplot/src/plugins/jqplot.logAxisRenderer.js @ 14777

Last change on this file since 14777 was 9062, checked in by fschoepp, 12 years ago

#1888:
Backend changes:

  • Simplified job state detection (only one hive call will be made to detect all states now, instead of one additional call per job)
  • Reorganized classes (moved model classes into Model folder)

Website changes:

  • Website now heavily uses JavaScript to achieve better user experience
  • JavaScript degrades gracefully, except for plots
  • Tables: Added jquery-datatable-plugin to extend tables (pagination + search functionality)
  • OaaS-Website now uses the design of the HL websites (found in WebApplication branch)
  • Added jqplot to render zoomable line plots for HL-Datatables
  • Styling.js: Plots will be generated by using an ajax call; additional jquery-styling occurs within this file.
  • Added jquery-ui-1.9.2 which is capable of handling/rendering tabs, accordions and resizers.
File size: 18.8 KB
Line 
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.LogAxisRenderer
33    *  A plugin for a jqPlot to render a logarithmic axis.
34    *
35    *  To use this renderer, include the plugin in your source
36    *  > <script type="text/javascript" language="javascript" src="plugins/jqplot.logAxisRenderer.js"></script>
37    * 
38    *  and supply the appropriate options to your plot
39    * 
40    *  > {axes:{xaxis:{renderer:$.jqplot.LogAxisRenderer}}}
41    **/
42    $.jqplot.LogAxisRenderer = function() {
43        $.jqplot.LinearAxisRenderer.call(this);
44        // prop: axisDefaults
45        // Default properties which will be applied directly to the series.
46        //
47        // Group: Properties
48        //
49        // Properties
50        //
51        /// base - the logarithmic base, commonly 2, 10 or Math.E
52        // tickDistribution - 'even' or 'power'.  'even' gives equal pixel
53        // spacing of the ticks on the plot.  'power' gives ticks in powers
54        // of 10.
55        this.axisDefaults = {
56            base : 10,
57            tickDistribution :'even'
58        };
59    };
60   
61    $.jqplot.LogAxisRenderer.prototype = new $.jqplot.LinearAxisRenderer();
62    $.jqplot.LogAxisRenderer.prototype.constructor = $.jqplot.LogAxisRenderer;
63   
64    $.jqplot.LogAxisRenderer.prototype.init = function(options) {
65        // prop: tickRenderer
66        // A class of a rendering engine for creating the ticks labels displayed on the plot,
67        // See <$.jqplot.AxisTickRenderer>.
68        // this.tickRenderer = $.jqplot.AxisTickRenderer;
69        // this.labelRenderer = $.jqplot.AxisLabelRenderer;
70        $.extend(true, this.renderer, options);
71        for (var d in this.renderer.axisDefaults) {
72            if (this[d] == null) {
73                this[d] = this.renderer.axisDefaults[d];
74            }
75        }
76        var db = this._dataBounds;
77        // Go through all the series attached to this axis and find
78        // the min/max bounds for this axis.
79        for (var i=0; i<this._series.length; i++) {
80            var s = this._series[i];
81            var d = s.data;
82           
83            for (var j=0; j<d.length; j++) {
84                if (this.name == 'xaxis' || this.name == 'x2axis') {
85                    if ((d[j][0] != null && d[j][0] < db.min) || db.min == null) {
86                        db.min = d[j][0];
87                    }
88                    if ((d[j][0] != null && d[j][0] > db.max) || db.max == null) {
89                        db.max = d[j][0];
90                    }
91                }             
92                else {
93                    if ((d[j][1] != null && d[j][1] < db.min) || db.min == null) {
94                        db.min = d[j][1];
95                    }
96                    if ((d[j][1] != null && d[j][1] > db.max) || db.max == null) {
97                        db.max = d[j][1];
98                    }
99                }               
100            }
101        }
102    };
103   
104    $.jqplot.LogAxisRenderer.prototype.createTicks = function() {
105        // we're are operating on an axis here
106        var ticks = this._ticks;
107        var userTicks = this.ticks;
108        var name = this.name;
109        var db = this._dataBounds;
110        var dim, interval;
111        var min, max;
112        var pos1, pos2;
113        var tt, i;
114
115        // if we already have ticks, use them.
116        // ticks must be in order of increasing value.
117        if (userTicks.length) {
118            // ticks could be 1D or 2D array of [val, val, ,,,] or [[val, label], [val, label], ...] or mixed
119            for (i=0; i<userTicks.length; i++){
120                var ut = userTicks[i];
121                var t = new this.tickRenderer(this.tickOptions);
122                if (ut.constructor == Array) {
123                    t.value = ut[0];
124                    t.label = ut[1];
125                    if (!this.showTicks) {
126                        t.showLabel = false;
127                        t.showMark = false;
128                    }
129                    else if (!this.showTickMarks) {
130                        t.showMark = false;
131                    }
132                    t.setTick(ut[0], this.name);
133                    this._ticks.push(t);
134                }
135               
136                else {
137                    t.value = ut;
138                    if (!this.showTicks) {
139                        t.showLabel = false;
140                        t.showMark = false;
141                    }
142                    else if (!this.showTickMarks) {
143                        t.showMark = false;
144                    }
145                    t.setTick(ut, this.name);
146                    this._ticks.push(t);
147                }
148            }
149            this.numberTicks = userTicks.length;
150            this.min = this._ticks[0].value;
151            this.max = this._ticks[this.numberTicks-1].value;
152        }
153       
154        // we don't have any ticks yet, let's make some!
155        else {
156            if (name == 'xaxis' || name == 'x2axis') {
157                dim = this._plotDimensions.width;
158            }
159            else {
160                dim = this._plotDimensions.height;
161            }
162       
163            min = ((this.min != null) ? this.min : db.min);
164            max = ((this.max != null) ? this.max : db.max);
165           
166            // if min and max are same, space them out a bit
167            if (min == max) {
168                var adj = 0.05;
169                min = min*(1-adj);
170                max = max*(1+adj);
171            }
172           
173            // perform some checks
174            if (this.min != null && this.min <= 0) {
175                throw('log axis minimum must be greater than 0');
176            }
177            if (this.max != null && this.max <= 0) {
178                throw('log axis maximum must be greater than 0');
179            }
180            // if (this.pad >1.99) this.pad = 1.99;
181            var range = max - min;
182            var rmin, rmax;
183
184            if (this.tickDistribution == 'even') {                   
185                rmin = (this.min != null) ? this.min : min - min*((this.padMin-1)/2);
186                rmax = (this.max != null) ? this.max : max + max*((this.padMax-1)/2);
187                this.min = rmin;
188                this.max = rmax;
189                range = this.max - this.min;           
190       
191                if (this.numberTicks == null){
192                    if (dim > 100) {
193                        this.numberTicks = parseInt(3+(dim-100)/75, 10);
194                    }
195                    else {
196                        this.numberTicks = 2;
197                    }
198                }
199   
200                var u = Math.pow(this.base, (1/(this.numberTicks-1)*Math.log(this.max/this.min)/Math.log(this.base)));
201                for (var i=0; i<this.numberTicks; i++){
202                    tt = this.min * Math.pow(u, i);
203                    var t = new this.tickRenderer(this.tickOptions);
204                    if (!this.showTicks) {
205                        t.showLabel = false;
206                        t.showMark = false;
207                    }
208                    else if (!this.showTickMarks) {
209                        t.showMark = false;
210                    }
211                    t.setTick(tt, this.name);
212                    this._ticks.push(t);
213                }
214               
215            }
216           
217            else if (this.tickDistribution == 'power'){
218                // for power distribution, open up range to get a nice power of axis.renderer.base.
219                // power distribution won't respect the user's min/max settings.
220                rmin = Math.pow(this.base, Math.ceil(Math.log(min*(2-this.padMin))/Math.log(this.base))-1);
221                rmax = Math.pow(this.base, Math.floor(Math.log(max*this.padMax)/Math.log(this.base))+1);
222                this.min = rmin;
223                this.max = rmax;
224                range = this.max - this.min;           
225       
226                var fittedTicks = 0;
227                var minorTicks = 0;
228                if (this.numberTicks == null){
229                    if (dim > 100) {
230                        this.numberTicks = Math.round(Math.log(this.max/this.min)/Math.log(this.base) + 1);
231                        if (this.numberTicks < 2) {
232                            this.numberTicks = 2;
233                        }
234                        fittedTicks = parseInt(3+(dim-100)/75, 10);
235                    }
236                    else {
237                        this.numberTicks = 2;
238                        fittedTicks = 2;
239                    }
240                    // if we don't have enough ticks, add some intermediate ticks
241                    // how many to have between major ticks.
242                    if (this.numberTicks < fittedTicks-1) {
243                        minorTicks = Math.floor(fittedTicks/this.numberTicks);
244                    }
245                }
246
247                for (var i=0; i<this.numberTicks; i++){
248                    tt = Math.pow(this.base, i - this.numberTicks + 1) * this.max;
249                    var t = new this.tickRenderer(this.tickOptions);
250                    if (!this.showTicks) {
251                        t.showLabel = false;
252                        t.showMark = false;
253                    }
254                    else if (!this.showTickMarks) {
255                        t.showMark = false;
256                    }
257                    t.setTick(tt, this.name);
258                    this._ticks.push(t);
259           
260                    if (minorTicks && i<this.numberTicks-1) {
261                        var tt1 = Math.pow(this.base, i - this.numberTicks + 2) * this.max;
262                        var spread = tt1 - tt;
263                        var interval = tt1 / (minorTicks+1);
264                        for (var j=minorTicks-1; j>=0; j--) {
265                            var val = tt1-interval*(j+1);
266                            var t = new this.tickRenderer(this.tickOptions);
267                            if (!this.showTicks) {
268                                t.showLabel = false;
269                                t.showMark = false;
270                            }
271                            else if (!this.showTickMarks) {
272                                t.showMark = false;
273                            }
274                            t.setTick(val, this.name);
275                            this._ticks.push(t);
276                        }
277                    }       
278                }                   
279            }       
280        }
281    };
282   
283    $.jqplot.LogAxisRenderer.prototype.pack = function(pos, offsets) {
284        var lb = parseInt(this.base, 10);
285        var ticks = this._ticks;
286        var trans = function (v) { return Math.log(v)/Math.log(lb); };
287        var invtrans = function (v) { return Math.pow(Math.E, (Math.log(lb)*v)); };
288        var max = trans(this.max);
289        var min = trans(this.min);
290        var offmax = offsets.max;
291        var offmin = offsets.min;
292        var lshow = (this._label == null) ? false : this._label.show;
293       
294        for (var p in pos) {
295            this._elem.css(p, pos[p]);
296        }
297       
298        this._offsets = offsets;
299        // pixellength will be + for x axes and - for y axes becasue pixels always measured from top left.
300        var pixellength = offmax - offmin;
301        var unitlength = max - min;
302       
303        // point to unit and unit to point conversions references to Plot DOM element top left corner.
304        this.p2u = function(p){
305            return invtrans((p - offmin) * unitlength / pixellength + min);
306        };
307       
308        this.u2p = function(u){
309            return (trans(u) - min) * pixellength / unitlength + offmin;
310        };
311       
312        if (this.name == 'xaxis' || this.name == 'x2axis'){
313            this.series_u2p = function(u){
314                return (trans(u) - min) * pixellength / unitlength;
315            };
316            this.series_p2u = function(p){
317                return invtrans(p * unitlength / pixellength + min);
318            };
319        }
320        // yaxis is max at top of canvas.
321        else {
322            this.series_u2p = function(u){
323                return (trans(u) - max) * pixellength / unitlength;
324            };
325            this.series_p2u = function(p){
326                return invtrans(p * unitlength / pixellength + max);
327            };
328        }
329       
330        if (this.show) {
331            if (this.name == 'xaxis' || this.name == 'x2axis') {
332                for (var i=0; i<ticks.length; i++) {
333                    var t = ticks[i];
334                    if (t.show && t.showLabel) {
335                        var shim;
336                       
337                        if (t.constructor == $.jqplot.CanvasAxisTickRenderer && t.angle) {
338                            switch (t.labelPosition) {
339                                case 'auto':
340                                    // position at end
341                                    if (t.angle < 0) {
342                                        shim = -t.getWidth() + t._textRenderer.height * Math.sin(-t._textRenderer.angle) / 2;
343                                    }
344                                    // position at start
345                                    else {
346                                        shim = -t._textRenderer.height * Math.sin(t._textRenderer.angle) / 2;
347                                    }
348                                    break;
349                                case 'end':
350                                    shim = -t.getWidth() + t._textRenderer.height * Math.sin(-t._textRenderer.angle) / 2;
351                                    break;
352                                case 'start':
353                                    shim = -t._textRenderer.height * Math.sin(t._textRenderer.angle) / 2;
354                                    break;
355                                case 'middle':
356                                    shim = -t.getWidth()/2 + t._textRenderer.height * Math.sin(-t._textRenderer.angle) / 2;
357                                    break;
358                                default:
359                                    shim = -t.getWidth()/2 + t._textRenderer.height * Math.sin(-t._textRenderer.angle) / 2;
360                                    break;
361                            }
362                        }
363                        else {
364                            shim = -t.getWidth()/2;
365                        }
366                        // var shim = t.getWidth()/2;
367                        var val = this.u2p(t.value) + shim + 'px';
368                        t._elem.css('left', val);
369                        t.pack();
370                    }
371                }
372                if (lshow) {
373                    var w = this._label._elem.outerWidth(true);
374                    this._label._elem.css('left', offmin + pixellength/2 - w/2 + 'px');
375                    if (this.name == 'xaxis') {
376                        this._label._elem.css('bottom', '0px');
377                    }
378                    else {
379                        this._label._elem.css('top', '0px');
380                    }
381                    this._label.pack();
382                }
383            }
384            else {
385                for (var i=0; i<ticks.length; i++) {
386                    var t = ticks[i];
387                    if (t.show && t.showLabel) {                       
388                        var shim;
389                        if (t.constructor == $.jqplot.CanvasAxisTickRenderer && t.angle) {
390                            switch (t.labelPosition) {
391                                case 'auto':
392                                    // position at end
393                                case 'end':
394                                    if (t.angle < 0) {
395                                        shim = -t._textRenderer.height * Math.cos(-t._textRenderer.angle) / 2;
396                                    }
397                                    else {
398                                        shim = -t.getHeight() + t._textRenderer.height * Math.cos(t._textRenderer.angle) / 2;
399                                    }
400                                    break;
401                                case 'start':
402                                    if (t.angle > 0) {
403                                        shim = -t._textRenderer.height * Math.cos(-t._textRenderer.angle) / 2;
404                                    }
405                                    else {
406                                        shim = -t.getHeight() + t._textRenderer.height * Math.cos(t._textRenderer.angle) / 2;
407                                    }
408                                    break;
409                                case 'middle':
410                                    // if (t.angle > 0) {
411                                    //     shim = -t.getHeight()/2 + t._textRenderer.height * Math.sin(-t._textRenderer.angle) / 2;
412                                    // }
413                                    // else {
414                                    //     shim = -t.getHeight()/2 - t._textRenderer.height * Math.sin(t._textRenderer.angle) / 2;
415                                    // }
416                                    shim = -t.getHeight()/2;
417                                    break;
418                                default:
419                                    shim = -t.getHeight()/2;
420                                    break;
421                            }
422                        }
423                        else {
424                            shim = -t.getHeight()/2;
425                        }
426                       
427                        var val = this.u2p(t.value) + shim + 'px';
428                        t._elem.css('top', val);
429                        t.pack();
430                    }
431                }
432                if (lshow) {
433                    var h = this._label._elem.outerHeight(true);
434                    this._label._elem.css('top', offmax - pixellength/2 - h/2 + 'px');
435                    if (this.name == 'yaxis') {
436                        this._label._elem.css('left', '0px');
437                    }
438                    else {
439                        this._label._elem.css('right', '0px');
440                    }   
441                    this._label.pack();
442                }
443            }
444        }       
445    };
446})(jQuery);
Note: See TracBrowser for help on using the repository browser.