tutorials/generic_sensor_tutorial/tutorial/SensorToCloud/example/ibm-frontend/public/dist/jquery/jqplot.categoryAxisRenderer.js

   1 /**
   2  * jqPlot
   3  * Pure JavaScript plotting plugin using jQuery
   4  *
   5  * Version: 1.0.9
   6  * Revision: d96a669
   7  *
   8  * Copyright (c) 2009-2016 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     /**
  33     *  class: $.jqplot.CategoryAxisRenderer
  34     *  A plugin for jqPlot to render a category style axis, with equal pixel spacing between y data values of a series.
  35     *
  36     *  To use this renderer, include the plugin in your source
  37     *  > <script type="text/javascript" language="javascript" src="plugins/jqplot.categoryAxisRenderer.js"></script>
  38     *
  39     *  and supply the appropriate options to your plot
  40     *
  41     *  > {axes:{xaxis:{renderer:$.jqplot.CategoryAxisRenderer}}}
  42     **/
  43     $.jqplot.CategoryAxisRenderer = function(options) {
  44         $.jqplot.LinearAxisRenderer.call(this);
  45         // prop: sortMergedLabels
  46         // True to sort tick labels when labels are created by merging
  47         // x axis values from multiple series.  That is, say you have
  48         // two series like:
  49         // > line1 = [[2006, 4],            [2008, 9], [2009, 16]];
  50         // > line2 = [[2006, 3], [2007, 7], [2008, 6]];
  51         // If no label array is specified, tick labels will be collected
  52         // from the x values of the series.  With sortMergedLabels
  53         // set to true, tick labels will be:
  54         // > [2006, 2007, 2008, 2009]
  55         // With sortMergedLabels set to false, tick labels will be:
  56         // > [2006, 2008, 2009, 2007]
  57         //
  58         // Note, this property is specified on the renderOptions for the
  59         // axes when creating a plot:
  60         // > axes:{xaxis:{renderer:$.jqplot.CategoryAxisRenderer, rendererOptions:{sortMergedLabels:true}}}
  61         this.sortMergedLabels = false;
  62     };
  63
  64     $.jqplot.CategoryAxisRenderer.prototype = new $.jqplot.LinearAxisRenderer();
  65     $.jqplot.CategoryAxisRenderer.prototype.constructor = $.jqplot.CategoryAxisRenderer;
  66
  67     $.jqplot.CategoryAxisRenderer.prototype.init = function(options){
  68         this.groups = 1;
  69         this.groupLabels = [];
  70         this._groupLabels = [];
  71         this._grouped = false;
  72         this._barsPerGroup = null;
  73         this.reverse = false;
  74         // prop: tickRenderer
  75         // A class of a rendering engine for creating the ticks labels displayed on the plot,
  76         // See <$.jqplot.AxisTickRenderer>.
  77         // this.tickRenderer = $.jqplot.AxisTickRenderer;
  78         // this.labelRenderer = $.jqplot.AxisLabelRenderer;
  79         $.extend(true, this, {tickOptions:{formatString:'%d'}}, options);
  80         var db = this._dataBounds;
  81         // Go through all the series attached to this axis and find
  82         // the min/max bounds for this axis.
  83         for (var i=0; i<this._series.length; i++) {
  84             var s = this._series[i];
  85             if (s.groups) {
  86                 this.groups = s.groups;
  87             }
  88             var d = s.data;
  89
  90             for (var j=0; j<d.length; j++) {
  91                 if (this.name == 'xaxis' || this.name == 'x2axis') {
  92                     if (d[j][0] < db.min || db.min == null) {
  93                         db.min = d[j][0];
  94                     }
  95                     if (d[j][0] > db.max || db.max == null) {
  96                         db.max = d[j][0];
  97                     }
  98                 }
  99                 else {
 100                     if (d[j][1] < db.min || db.min == null) {
 101                         db.min = d[j][1];
 102                     }
 103                     if (d[j][1] > db.max || db.max == null) {
 104                         db.max = d[j][1];
 105                     }
 106                 }
 107             }
 108         }
 109
 110         if (this.groupLabels.length) {
 111             this.groups = this.groupLabels.length;
 112         }
 113     };
 114
 115
 116     $.jqplot.CategoryAxisRenderer.prototype.createTicks = function() {
 117         // we're are operating on an axis here
 118         var ticks = this._ticks;
 119         var userTicks = this.ticks;
 120         var name = this.name;
 121         // databounds were set on axis initialization.
 122         var db = this._dataBounds;
 123         var dim, interval;
 124         var min, max;
 125         var pos1, pos2;
 126         var tt, i;
 127
 128         // if we already have ticks, use them.
 129         if (userTicks.length) {
 130             // adjust with blanks if we have groups
 131             if (this.groups > 1 && !this._grouped) {
 132                 var l = userTicks.length;
 133                 var skip = parseInt(l/this.groups, 10);
 134                 var count = 0;
 135                 for (var i=skip; i<l; i+=skip) {
 136                     userTicks.splice(i+count, 0, ' ');
 137                     count++;
 138                 }
 139                 this._grouped = true;
 140             }
 141             this.min = 0.5;
 142             this.max = userTicks.length + 0.5;
 143             var range = this.max - this.min;
 144             this.numberTicks = 2*userTicks.length + 1;
 145             for (i=0; i<userTicks.length; i++){
 146                 tt = this.min + 2 * i * range / (this.numberTicks-1);
 147                 // need a marker before and after the tick
 148                 var t = new this.tickRenderer(this.tickOptions);
 149                 t.showLabel = false;
 150                 // t.showMark = true;
 151                 t.setTick(tt, this.name);
 152                 this._ticks.push(t);
 153                 var t = new this.tickRenderer(this.tickOptions);
 154                 t.label = userTicks[i];
 155                 // t.showLabel = true;
 156                 t.showMark = false;
 157                 t.showGridline = false;
 158                 t.setTick(tt+0.5, this.name);
 159                 this._ticks.push(t);
 160             }
 161             // now add the last tick at the end
 162             var t = new this.tickRenderer(this.tickOptions);
 163             t.showLabel = false;
 164             // t.showMark = true;
 165             t.setTick(tt+1, this.name);
 166             this._ticks.push(t);
 167         }
 168
 169         // we don't have any ticks yet, let's make some!
 170         else {
 171             if (name == 'xaxis' || name == 'x2axis') {
 172                 dim = this._plotDimensions.width;
 173             }
 174             else {
 175                 dim = this._plotDimensions.height;
 176             }
 177
 178             // if min, max and number of ticks specified, user can't specify interval.
 179             if (this.min != null && this.max != null && this.numberTicks != null) {
 180                 this.tickInterval = null;
 181             }
 182
 183             // if max, min, and interval specified and interval won't fit, ignore interval.
 184             if (this.min != null && this.max != null && this.tickInterval != null) {
 185                 if (parseInt((this.max-this.min)/this.tickInterval, 10) != (this.max-this.min)/this.tickInterval) {
 186                     this.tickInterval = null;
 187                 }
 188             }
 189
 190             // find out how many categories are in the lines and collect labels
 191             var labels = [];
 192             var numcats = 0;
 193             var min = 0.5;
 194             var max, val;
 195             var isMerged = false;
 196             for (var i=0; i<this._series.length; i++) {
 197                 var s = this._series[i];
 198                 for (var j=0; j<s.data.length; j++) {
 199                     if (this.name == 'xaxis' || this.name == 'x2axis') {
 200                         val = s.data[j][0];
 201                     }
 202                     else {
 203                         val = s.data[j][1];
 204                     }
 205                     if ($.inArray(val, labels) == -1) {
 206                         isMerged = true;
 207                         numcats += 1;
 208                         labels.push(val);
 209                     }
 210                 }
 211             }
 212
 213             if (isMerged && this.sortMergedLabels) {
 214                 if (typeof labels[0] == "string") {
 215                     labels.sort();
 216                 } else {
 217                     labels.sort(function(a,b) { return a - b; });
 218                 }
 219             }
 220
 221             // keep a reference to these tick labels to use for redrawing plot (see bug #57)
 222             this.ticks = labels;
 223
 224             // now bin the data values to the right lables.
 225             for (var i=0; i<this._series.length; i++) {
 226                 var s = this._series[i];
 227                 for (var j=0; j<s.data.length; j++) {
 228                     if (this.name == 'xaxis' || this.name == 'x2axis') {
 229                         val = s.data[j][0];
 230                     }
 231                     else {
 232                         val = s.data[j][1];
 233                     }
 234                     // for category axis, force the values into category bins.
 235                     // we should have the value in the label array now.
 236                     var idx = $.inArray(val, labels)+1;
 237                     if (this.name == 'xaxis' || this.name == 'x2axis') {
 238                         s.data[j][0] = idx;
 239                     }
 240                     else {
 241                         s.data[j][1] = idx;
 242                     }
 243                 }
 244             }
 245
 246             // adjust with blanks if we have groups
 247             if (this.groups > 1 && !this._grouped) {
 248                 var l = labels.length;
 249                 var skip = parseInt(l/this.groups, 10);
 250                 var count = 0;
 251                 for (var i=skip; i<l; i+=skip+1) {
 252                     labels[i] = ' ';
 253                 }
 254                 this._grouped = true;
 255             }
 256
 257             max = numcats + 0.5;
 258             if (this.numberTicks == null) {
 259                 this.numberTicks = 2*numcats + 1;
 260             }
 261
 262             var range = max - min;
 263             this.min = min;
 264             this.max = max;
 265             var track = 0;
 266
 267             // todo: adjust this so more ticks displayed.
 268             var maxVisibleTicks = parseInt(3+dim/10, 10);
 269             var skip = parseInt(numcats/maxVisibleTicks, 10);
 270
 271             if (this.tickInterval == null) {
 272
 273                 this.tickInterval = range / (this.numberTicks-1);
 274
 275             }
 276             // if tickInterval is specified, we will ignore any computed maximum.
 277             for (var i=0; i<this.numberTicks; i++){
 278                 tt = this.min + i * this.tickInterval;
 279                 var t = new this.tickRenderer(this.tickOptions);
 280                 // if even tick, it isn't a category, it's a divider
 281                 if (i/2 == parseInt(i/2, 10)) {
 282                     t.showLabel = false;
 283                     t.showMark = true;
 284                 }
 285                 else {
 286                     if (skip>0 && track<skip) {
 287                         t.showLabel = false;
 288                         track += 1;
 289                     }
 290                     else {
 291                         t.showLabel = true;
 292                         track = 0;
 293                     }
 294                     t.label = t.formatter(t.formatString, labels[(i-1)/2]);
 295                     t.showMark = false;
 296                     t.showGridline = false;
 297                 }
 298                 t.setTick(tt, this.name);
 299                 this._ticks.push(t);
 300             }
 301         }
 302
 303     };
 304
 305     // called with scope of axis
 306     $.jqplot.CategoryAxisRenderer.prototype.draw = function(ctx, plot) {
 307         if (this.show) {
 308             // populate the axis label and value properties.
 309             // createTicks is a method on the renderer, but
 310             // call it within the scope of the axis.
 311             this.renderer.createTicks.call(this);
 312             // fill a div with axes labels in the right direction.
 313             // Need to pregenerate each axis to get its bounds and
 314             // position it and the labels correctly on the plot.
 315             var dim=0;
 316             var temp;
 317             // Added for theming.
 318             if (this._elem) {
 319                 // this._elem.empty();
 320                 // Memory Leaks patch
 321                 this._elem.emptyForce();
 322             }
 323
 324             this._elem = this._elem || $('<div class="jqplot-axis jqplot-'+this.name+'" style="position:absolute;"></div>');
 325
 326             if (this.name == 'xaxis' || this.name == 'x2axis') {
 327                 this._elem.width(this._plotDimensions.width);
 328             }
 329             else {
 330                 this._elem.height(this._plotDimensions.height);
 331             }
 332
 333             // create a _label object.
 334             this.labelOptions.axis = this.name;
 335             this._label = new this.labelRenderer(this.labelOptions);
 336             if (this._label.show) {
 337                 var elem = this._label.draw(ctx, plot);
 338                 elem.appendTo(this._elem);
 339             }
 340
 341             var t = this._ticks;
 342             for (var i=0; i<t.length; i++) {
 343                 var tick = t[i];
 344                 if (tick.showLabel && (!tick.isMinorTick || this.showMinorTicks)) {
 345                     var elem = tick.draw(ctx, plot);
 346                     elem.appendTo(this._elem);
 347                 }
 348             }
 349
 350             this._groupLabels = [];
 351             // now make group labels
 352             for (var i=0; i<this.groupLabels.length; i++)
 353             {
 354                 var elem = $('<div style="position:absolute;" class="jqplot-'+this.name+'-groupLabel"></div>');
 355                 elem.html(this.groupLabels[i]);
 356                 this._groupLabels.push(elem);
 357                 elem.appendTo(this._elem);
 358             }
 359         }
 360         return this._elem;
 361     };
 362
 363     // called with scope of axis
 364     $.jqplot.CategoryAxisRenderer.prototype.set = function() {
 365         var dim = 0;
 366         var temp;
 367         var w = 0;
 368         var h = 0;
 369         var lshow = (this._label == null) ? false : this._label.show;
 370         if (this.show) {
 371             var t = this._ticks;
 372             for (var i=0; i<t.length; i++) {
 373                 var tick = t[i];
 374                 if (tick.showLabel && (!tick.isMinorTick || this.showMinorTicks)) {
 375                     if (this.name == 'xaxis' || this.name == 'x2axis') {
 376                         temp = tick._elem.outerHeight(true);
 377                     }
 378                     else {
 379                         temp = tick._elem.outerWidth(true);
 380                     }
 381                     if (temp > dim) {
 382                         dim = temp;
 383                     }
 384                 }
 385             }
 386
 387             var dim2 = 0;
 388             for (var i=0; i<this._groupLabels.length; i++) {
 389                 var l = this._groupLabels[i];
 390                 if (this.name == 'xaxis' || this.name == 'x2axis') {
 391                     temp = l.outerHeight(true);
 392                 }
 393                 else {
 394                     temp = l.outerWidth(true);
 395                 }
 396                 if (temp > dim2) {
 397                     dim2 = temp;
 398                 }
 399             }
 400
 401             if (lshow) {
 402                 w = this._label._elem.outerWidth(true);
 403                 h = this._label._elem.outerHeight(true);
 404             }
 405             if (this.name == 'xaxis') {
 406                 dim += dim2 + h;
 407                 this._elem.css({'height':dim+'px', left:'0px', bottom:'0px'});
 408             }
 409             else if (this.name == 'x2axis') {
 410                 dim += dim2 + h;
 411                 this._elem.css({'height':dim+'px', left:'0px', top:'0px'});
 412             }
 413             else if (this.name == 'yaxis') {
 414                 dim += dim2 + w;
 415                 this._elem.css({'width':dim+'px', left:'0px', top:'0px'});
 416                 if (lshow && this._label.constructor == $.jqplot.AxisLabelRenderer) {
 417                     this._label._elem.css('width', w+'px');
 418                 }
 419             }
 420             else {
 421                 dim += dim2 + w;
 422                 this._elem.css({'width':dim+'px', right:'0px', top:'0px'});
 423                 if (lshow && this._label.constructor == $.jqplot.AxisLabelRenderer) {
 424                     this._label._elem.css('width', w+'px');
 425                 }
 426             }
 427         }
 428     };
 429
 430     // called with scope of axis
 431     $.jqplot.CategoryAxisRenderer.prototype.pack = function(pos, offsets) {
 432         var ticks = this._ticks;
 433         var max = this.max;
 434         var min = this.min;
 435         var offmax = offsets.max;
 436         var offmin = offsets.min;
 437         var lshow = (this._label == null) ? false : this._label.show;
 438         var i;
 439
 440         for (var p in pos) {
 441             this._elem.css(p, pos[p]);
 442         }
 443
 444         this._offsets = offsets;
 445         // pixellength will be + for x axes and - for y axes becasue pixels always measured from top left.
 446         var pixellength = offmax - offmin;
 447         var unitlength = max - min;
 448
 449         if (!this.reverse) {
 450             // point to unit and unit to point conversions references to Plot DOM element top left corner.
 451
 452             this.u2p = function(u){
 453                 return (u - min) * pixellength / unitlength + offmin;
 454             };
 455
 456             this.p2u = function(p){
 457                 return (p - offmin) * unitlength / pixellength + min;
 458             };
 459
 460             if (this.name == 'xaxis' || this.name == 'x2axis'){
 461                 this.series_u2p = function(u){
 462                     return (u - min) * pixellength / unitlength;
 463                 };
 464                 this.series_p2u = function(p){
 465                     return p * unitlength / pixellength + min;
 466                 };
 467             }
 468
 469             else {
 470                 this.series_u2p = function(u){
 471                     return (u - max) * pixellength / unitlength;
 472                 };
 473                 this.series_p2u = function(p){
 474                     return p * unitlength / pixellength + max;
 475                 };
 476             }
 477         }
 478
 479         else {
 480             // point to unit and unit to point conversions references to Plot DOM element top left corner.
 481
 482             this.u2p = function(u){
 483                 return offmin + (max - u) * pixellength / unitlength;
 484             };
 485
 486             this.p2u = function(p){
 487                 return min + (p - offmin) * unitlength / pixellength;
 488             };
 489
 490             if (this.name == 'xaxis' || this.name == 'x2axis'){
 491                 this.series_u2p = function(u){
 492                     return (max - u) * pixellength / unitlength;
 493                 };
 494                 this.series_p2u = function(p){
 495                     return p * unitlength / pixellength + max;
 496                 };
 497             }
 498
 499             else {
 500                 this.series_u2p = function(u){
 501                     return (min - u) * pixellength / unitlength;
 502                 };
 503                 this.series_p2u = function(p){
 504                     return p * unitlength / pixellength + min;
 505                 };
 506             }
 507
 508         }
 509
 510
 511         if (this.show) {
 512             if (this.name == 'xaxis' || this.name == 'x2axis') {
 513                 for (i=0; i<ticks.length; i++) {
 514                     var t = ticks[i];
 515                     if (t.show && t.showLabel) {
 516                         var shim;
 517
 518                         if (t.constructor == $.jqplot.CanvasAxisTickRenderer && t.angle) {
 519                             // will need to adjust auto positioning based on which axis this is.
 520                             var temp = (this.name == 'xaxis') ? 1 : -1;
 521                             switch (t.labelPosition) {
 522                                 case 'auto':
 523                                     // position at end
 524                                     if (temp * t.angle < 0) {
 525                                         shim = -t.getWidth() + t._textRenderer.height * Math.sin(-t._textRenderer.angle) / 2;
 526                                     }
 527                                     // position at start
 528                                     else {
 529                                         shim = -t._textRenderer.height * Math.sin(t._textRenderer.angle) / 2;
 530                                     }
 531                                     break;
 532                                 case 'end':
 533                                     shim = -t.getWidth() + t._textRenderer.height * Math.sin(-t._textRenderer.angle) / 2;
 534                                     break;
 535                                 case 'start':
 536                                     shim = -t._textRenderer.height * Math.sin(t._textRenderer.angle) / 2;
 537                                     break;
 538                                 case 'middle':
 539                                     shim = -t.getWidth()/2 + t._textRenderer.height * Math.sin(-t._textRenderer.angle) / 2;
 540                                     break;
 541                                 default:
 542                                     shim = -t.getWidth()/2 + t._textRenderer.height * Math.sin(-t._textRenderer.angle) / 2;
 543                                     break;
 544                             }
 545                         }
 546                         else {
 547                             shim = -t.getWidth()/2;
 548                         }
 549                         var val = this.u2p(t.value) + shim + 'px';
 550                         t._elem.css('left', val);
 551                         t.pack();
 552                     }
 553                 }
 554
 555                 var labeledge=['bottom', 0];
 556                 if (lshow) {
 557                     var w = this._label._elem.outerWidth(true);
 558                     this._label._elem.css('left', offmin + pixellength/2 - w/2 + 'px');
 559                     if (this.name == 'xaxis') {
 560                         this._label._elem.css('bottom', '0px');
 561                         labeledge = ['bottom', this._label._elem.outerHeight(true)];
 562                     }
 563                     else {
 564                         this._label._elem.css('top', '0px');
 565                         labeledge = ['top', this._label._elem.outerHeight(true)];
 566                     }
 567                     this._label.pack();
 568                 }
 569
 570                 // draw the group labels
 571                 var step = parseInt(this._ticks.length/this.groups, 10) + 1;
 572                 for (i=0; i<this._groupLabels.length; i++) {
 573                     var mid = 0;
 574                     var count = 0;
 575                     for (var j=i*step; j<(i+1)*step; j++) {
 576                         if (j >= this._ticks.length-1) continue; // the last tick does not exist as there is no other group in order to have an empty one.
 577                         if (this._ticks[j]._elem && this._ticks[j].label != " ") {
 578                             var t = this._ticks[j]._elem;
 579                             var p = t.position();
 580                             mid += p.left + t.outerWidth(true)/2;
 581                             count++;
 582                         }
 583                     }
 584                     mid = mid/count;
 585                     this._groupLabels[i].css({'left':(mid - this._groupLabels[i].outerWidth(true)/2)});
 586                     this._groupLabels[i].css(labeledge[0], labeledge[1]);
 587                 }
 588             }
 589             else {
 590                 for (i=0; i<ticks.length; i++) {
 591                     var t = ticks[i];
 592                     if (t.show && t.showLabel) {
 593                         var shim;
 594                         if (t.constructor == $.jqplot.CanvasAxisTickRenderer && t.angle) {
 595                             // will need to adjust auto positioning based on which axis this is.
 596                             var temp = (this.name == 'yaxis') ? 1 : -1;
 597                             switch (t.labelPosition) {
 598                                 case 'auto':
 599                                     // position at end
 600                                 case 'end':
 601                                     if (temp * t.angle < 0) {
 602                                         shim = -t._textRenderer.height * Math.cos(-t._textRenderer.angle) / 2;
 603                                     }
 604                                     else {
 605                                         shim = -t.getHeight() + t._textRenderer.height * Math.cos(t._textRenderer.angle) / 2;
 606                                     }
 607                                     break;
 608                                 case 'start':
 609                                     if (t.angle > 0) {
 610                                         shim = -t._textRenderer.height * Math.cos(-t._textRenderer.angle) / 2;
 611                                     }
 612                                     else {
 613                                         shim = -t.getHeight() + t._textRenderer.height * Math.cos(t._textRenderer.angle) / 2;
 614                                     }
 615                                     break;
 616                                 case 'middle':
 617                                     // if (t.angle > 0) {
 618                                     //     shim = -t.getHeight()/2 + t._textRenderer.height * Math.sin(-t._textRenderer.angle) / 2;
 619                                     // }
 620                                     // else {
 621                                     //     shim = -t.getHeight()/2 - t._textRenderer.height * Math.sin(t._textRenderer.angle) / 2;
 622                                     // }
 623                                     shim = -t.getHeight()/2;
 624                                     break;
 625                                 default:
 626                                     shim = -t.getHeight()/2;
 627                                     break;
 628                             }
 629                         }
 630                         else {
 631                             shim = -t.getHeight()/2;
 632                         }
 633
 634                         var val = this.u2p(t.value) + shim + 'px';
 635                         t._elem.css('top', val);
 636                         t.pack();
 637                     }
 638                 }
 639
 640                 var labeledge=['left', 0];
 641                 if (lshow) {
 642                     var h = this._label._elem.outerHeight(true);
 643                     this._label._elem.css('top', offmax - pixellength/2 - h/2 + 'px');
 644                     if (this.name == 'yaxis') {
 645                         this._label._elem.css('left', '0px');
 646                         labeledge = ['left', this._label._elem.outerWidth(true)];
 647                     }
 648                     else {
 649                         this._label._elem.css('right', '0px');
 650                         labeledge = ['right', this._label._elem.outerWidth(true)];
 651                     }
 652                     this._label.pack();
 653                 }
 654
 655                 // draw the group labels, position top here, do left after label position.
 656                 var step = parseInt(this._ticks.length/this.groups, 10) + 1; // step is one more than before as we don't want to have overlaps in loops
 657                 for (i=0; i<this._groupLabels.length; i++) {
 658                     var mid = 0;
 659                     var count = 0;
 660                     for (var j=i*step; j<(i+1)*step; j++) { // j must never reach (i+1)*step as we don't want to have overlap between loops
 661                         if (j >= this._ticks.length-1) continue; // the last tick does not exist as there is no other group in order to have an empty one.
 662                         if (this._ticks[j]._elem && this._ticks[j].label != " ") {
 663                             var t = this._ticks[j]._elem;
 664                             var p = t.position();
 665                             mid += p.top + t.outerHeight()/2;
 666                             count++;
 667                         }
 668                     }
 669                     mid = mid/count;
 670                     this._groupLabels[i].css({'top':mid - this._groupLabels[i].outerHeight()/2});
 671                     this._groupLabels[i].css(labeledge[0], labeledge[1]);
 672
 673                 }
 674             }
 675         }
 676     };
 677
 678
 679 })(jQuery);