jqplot.pointLabels.js 14 KB

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