public/javascripts/jqplot/plugins/jqplot.pointLabels.js

   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
  33     /**
  34      * Class: $.jqplot.PointLabels
  35      * Plugin for putting labels at the data points.
  36      *
  37      * To use this plugin, include the js
  38      * file in your source:
  39      *
  40      * > <script type="text/javascript" src="plugins/jqplot.pointLabels.js"></script>
  41      *
  42      * By default, the last value in the data ponit array in the data series is used
  43      * for the label.  For most series renderers, extra data can be added to the
  44      * data point arrays and the last value will be used as the label.
  45      *
  46      * For instance,
  47      * this series:
  48      *
  49      * > [[1,4], [3,5], [7,2]]
  50      *
  51      * Would, by default, use the y values in the labels.
  52      * Extra data can be added to the series like so:
  53      *
  54      * > [[1,4,'mid'], [3 5,'hi'], [7,2,'low']]
  55      *
  56      * And now the point labels would be 'mid', 'low', and 'hi'.
  57      *
  58      * Options to the point labels and a custom labels array can be passed into the
  59      * "pointLabels" option on the series option like so:
  60      *
  61      * > series:[{pointLabels:{
  62      * >    labels:['mid', 'hi', 'low'],
  63      * >    location:'se',
  64      * >    ypadding: 12
  65      * >    }
  66      * > }]
  67      *
  68      * A custom labels array in the options takes precendence over any labels
  69      * in the series data.  If you have a custom labels array in the options,
  70      * but still want to use values from the series array as labels, set the
  71      * "labelsFromSeries" option to true.
  72      *
  73      * By default, html entities (<, >, etc.) are escaped in point labels.
  74      * If you want to include actual html markup in the labels,
  75      * set the "escapeHTML" option to false.
  76      *
  77      */
  78     $.jqplot.PointLabels = function(options) {
  79         // Group: Properties
  80         //
  81         // prop: show
  82         // show the labels or not.
  83         this.show = $.jqplot.config.enablePlugins;
  84         // prop: location
  85         // compass location where to position the label around the point.
  86         // 'n', 'ne', 'e', 'se', 's', 'sw', 'w', 'nw'
  87         this.location = 'n';
  88         // prop: labelsFromSeries
  89         // true to use labels within data point arrays.
  90         this.labelsFromSeries = false;
  91         // prop: seriesLabelIndex
  92         // array index for location of labels within data point arrays.
  93         // if null, will use the last element of the data point array.
  94         this.seriesLabelIndex = null;
  95         // prop: labels
  96         // array of arrays of labels, one array for each series.
  97         this.labels = [];
  98         // actual labels that will get displayed.
  99         // needed to preserve user specified labels in labels array.
 100         this._labels = [];
 101         // prop: stackedValue
 102         // true to display value as stacked in a stacked plot.
 103         // no effect if labels is specified.
 104         this.stackedValue = false;
 105         // prop: ypadding
 106         // vertical padding in pixels between point and label
 107         this.ypadding = 6;
 108         // prop: xpadding
 109         // horizontal padding in pixels between point and label
 110         this.xpadding = 6;
 111         // prop: escapeHTML
 112         // true to escape html entities in the labels.
 113         // If you want to include markup in the labels, set to false.
 114         this.escapeHTML = true;
 115         // prop: edgeTolerance
 116         // Number of pixels that the label must be away from an axis
 117         // boundary in order to be drawn.  Negative values will allow overlap
 118         // with the grid boundaries.
 119         this.edgeTolerance = -5;
 120         // prop: formatter
 121         // A class of a formatter for the tick text.  sprintf by default.
 122         this.formatter = $.jqplot.DefaultTickFormatter;
 123         // prop: formatString
 124         // string passed to the formatter.
 125         this.formatString = '';
 126         // prop: hideZeros
 127         // true to not show a label for a value which is 0.
 128         this.hideZeros = false;
 129         this._elems = [];
 130
 131         $.extend(true, this, options);
 132     };
 133
 134     var locations = ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w'];
 135     var locationIndicies = {'nw':0, 'n':1, 'ne':2, 'e':3, 'se':4, 's':5, 'sw':6, 'w':7};
 136     var oppositeLocations = ['se', 's', 'sw', 'w', 'nw', 'n', 'ne', 'e'];
 137
 138     // called with scope of a series
 139     $.jqplot.PointLabels.init = function (target, data, seriesDefaults, opts, plot){
 140         var options = $.extend(true, {}, seriesDefaults, opts);
 141         options.pointLabels = options.pointLabels || {};
 142         if (this.renderer.constructor === $.jqplot.BarRenderer && this.barDirection === 'horizontal' && !options.pointLabels.location) {
 143             options.pointLabels.location = 'e';
 144         }
 145         // add a pointLabels attribute to the series plugins
 146         this.plugins.pointLabels = new $.jqplot.PointLabels(options.pointLabels);
 147         this.plugins.pointLabels.setLabels.call(this);
 148     };
 149
 150     // called with scope of series
 151     $.jqplot.PointLabels.prototype.setLabels = function() {
 152         var p = this.plugins.pointLabels;
 153         var labelIdx;
 154         if (p.seriesLabelIndex != null) {
 155             labelIdx = p.seriesLabelIndex;
 156         }
 157         else if (this.renderer.constructor === $.jqplot.BarRenderer && this.barDirection === 'horizontal') {
 158             labelIdx = 0;
 159         }
 160         else {
 161             labelIdx = (this._plotData.length === 0) ? 0 : this._plotData[0].length -1;
 162         }
 163         p._labels = [];
 164         if (p.labels.length === 0 || p.labelsFromSeries) {
 165             if (p.stackedValue) {
 166                 if (this._plotData.length && this._plotData[0].length){
 167                     // var idx = p.seriesLabelIndex || this._plotData[0].length -1;
 168                     for (var i=0; i<this._plotData.length; i++) {
 169                         p._labels.push(this._plotData[i][labelIdx]);
 170                     }
 171                 }
 172             }
 173             else {
 174                 // var d = this._plotData;
 175                 var d = this.data;
 176                 if (this.renderer.constructor === $.jqplot.BarRenderer && this.waterfall) {
 177                     d = this._data;
 178                 }
 179                 if (d.length && d[0].length) {
 180                     // var idx = p.seriesLabelIndex || d[0].length -1;
 181                     for (var i=0; i<d.length; i++) {
 182                         p._labels.push(d[i][labelIdx]);
 183                     }
 184                 }
 185                 d = null;
 186             }
 187         }
 188         else if (p.labels.length){
 189             p._labels = p.labels;
 190         }
 191     };
 192
 193     $.jqplot.PointLabels.prototype.xOffset = function(elem, location, padding) {
 194         location = location || this.location;
 195         padding = padding || this.xpadding;
 196         var offset;
 197
 198         switch (location) {
 199             case 'nw':
 200                 offset = -elem.outerWidth(true) - this.xpadding;
 201                 break;
 202             case 'n':
 203                 offset = -elem.outerWidth(true)/2;
 204                 break;
 205             case 'ne':
 206                 offset =  this.xpadding;
 207                 break;
 208             case 'e':
 209                 offset = this.xpadding;
 210                 break;
 211             case 'se':
 212                 offset = this.xpadding;
 213                 break;
 214             case 's':
 215                 offset = -elem.outerWidth(true)/2;
 216                 break;
 217             case 'sw':
 218                 offset = -elem.outerWidth(true) - this.xpadding;
 219                 break;
 220             case 'w':
 221                 offset = -elem.outerWidth(true) - this.xpadding;
 222                 break;
 223             default: // same as 'nw'
 224                 offset = -elem.outerWidth(true) - this.xpadding;
 225                 break;
 226         }
 227         return offset;
 228     };
 229
 230     $.jqplot.PointLabels.prototype.yOffset = function(elem, location, padding) {
 231         location = location || this.location;
 232         padding = padding || this.xpadding;
 233         var offset;
 234
 235         switch (location) {
 236             case 'nw':
 237                 offset = -elem.outerHeight(true) - this.ypadding;
 238                 break;
 239             case 'n':
 240                 offset = -elem.outerHeight(true) - this.ypadding;
 241                 break;
 242             case 'ne':
 243                 offset = -elem.outerHeight(true) - this.ypadding;
 244                 break;
 245             case 'e':
 246                 offset = -elem.outerHeight(true)/2;
 247                 break;
 248             case 'se':
 249                 offset = this.ypadding;
 250                 break;
 251             case 's':
 252                 offset = this.ypadding;
 253                 break;
 254             case 'sw':
 255                 offset = this.ypadding;
 256                 break;
 257             case 'w':
 258                 offset = -elem.outerHeight(true)/2;
 259                 break;
 260             default: // same as 'nw'
 261                 offset = -elem.outerHeight(true) - this.ypadding;
 262                 break;
 263         }
 264         return offset;
 265     };
 266
 267     // called with scope of series
 268     $.jqplot.PointLabels.draw = function (sctx, options, plot) {
 269         var p = this.plugins.pointLabels;
 270         // set labels again in case they have changed.
 271         p.setLabels.call(this);
 272         // remove any previous labels
 273         for (var i=0; i<p._elems.length; i++) {
 274             // Memory Leaks patch
 275             // p._elems[i].remove();
 276             p._elems[i].emptyForce();
 277         }
 278         p._elems.splice(0, p._elems.length);
 279
 280         if (p.show) {
 281             var ax = '_'+this._stackAxis+'axis';
 282
 283             if (!p.formatString) {
 284                 p.formatString = this[ax]._ticks[0].formatString;
 285                 p.formatter = this[ax]._ticks[0].formatter;
 286             }
 287
 288             var pd = this._plotData;
 289             var ppd = this._prevPlotData;
 290             var xax = this._xaxis;
 291             var yax = this._yaxis;
 292             var elem, helem;
 293
 294             for (var i=0, l=p._labels.length; i < l; i++) {
 295                 var label = p._labels[i];
 296
 297                 if (p.hideZeros && parseInt(p._labels[i], 10) == 0) {
 298                     label = '';
 299                 }
 300
 301                 if (label != null) {
 302                     label = p.formatter(p.formatString, label);
 303                 }
 304
 305                 helem = document.createElement('div');
 306                 p._elems[i] = $(helem);
 307
 308                 elem = p._elems[i];
 309
 310
 311                 elem.addClass('jqplot-point-label jqplot-series-'+this.index+' jqplot-point-'+i);
 312                 elem.css('position', 'absolute');
 313                 elem.insertAfter(sctx.canvas);
 314
 315                 if (p.escapeHTML) {
 316                     elem.text(label);
 317                 }
 318                 else {
 319                     elem.html(label);
 320                 }
 321                 var location = p.location;
 322                 if ((this.fillToZero && pd[i][1] < 0) || (this.fillToZero && this._type === 'bar' && this.barDirection === 'horizontal' && pd[i][0] < 0) || (this.waterfall && parseInt(label, 10)) < 0) {
 323                     location = oppositeLocations[locationIndicies[location]];
 324                 }
 325
 326
 327                 var ell = xax.u2p(pd[i][0]) + p.xOffset(elem, location);
 328                 var elt = yax.u2p(pd[i][1]) + p.yOffset(elem, location);
 329
 330                 // we have stacked chart but are not showing stacked values,
 331                 // place labels in center.
 332                 if (this._stack && !p.stackedValue) {
 333                     if (this.barDirection === "vertical") {
 334                         elt = (this._barPoints[i][0][1] + this._barPoints[i][1][1]) / 2 + plot._gridPadding.top - 0.5 * elem.outerHeight(true);
 335                     }
 336                     else {
 337                         ell = (this._barPoints[i][2][0] + this._barPoints[i][0][0]) / 2 + plot._gridPadding.left - 0.5 * elem.outerWidth(true);
 338                     }
 339                 }
 340
 341                 if (this.renderer.constructor == $.jqplot.BarRenderer) {
 342                     if (this.barDirection == "vertical") {
 343                         ell += this._barNudge;
 344                     }
 345                     else {
 346                         elt -= this._barNudge;
 347                     }
 348                 }
 349                 elem.css('left', ell);
 350                 elem.css('top', elt);
 351                 var elr = ell + elem.width();
 352                 var elb = elt + elem.height();
 353                 var et = p.edgeTolerance;
 354                 var scl = $(sctx.canvas).position().left;
 355                 var sct = $(sctx.canvas).position().top;
 356                 var scr = sctx.canvas.width + scl;
 357                 var scb = sctx.canvas.height + sct;
 358                 // if label is outside of allowed area, remove it
 359                 if (ell - et < scl || elt - et < sct || elr + et > scr || elb + et > scb) {
 360                     elem.remove();
 361                 }
 362
 363                 elem = null;
 364                 helem = null;
 365             }
 366
 367             // finally, animate them if the series is animated
 368             // if (this.renderer.animation && this.renderer.animation._supported && this.renderer.animation.show && plot._drawCount < 2) {
 369             //     var sel = '.jqplot-point-label.jqplot-series-'+this.index;
 370             //     $(sel).hide();
 371             //     $(sel).fadeIn(1000);
 372             // }
 373
 374         }
 375     };
 376
 377     $.jqplot.postSeriesInitHooks.push($.jqplot.PointLabels.init);
 378     $.jqplot.postDrawSeriesHooks.push($.jqplot.PointLabels.draw);
 379 })(jQuery);