Free cookie consent management tool by TermsFeed Policy Generator

source: branches/1888_OaaS/HeuristicLab.Services.Optimization.Web/Content/jqplot/src/plugins/jqplot.dateAxisRenderer.js @ 18242

Last change on this file since 18242 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: 17.4 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.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
Note: See TracBrowser for help on using the repository browser.