| 9 |
lars |
1 |
/**
|
|
|
2 |
* jqPlot
|
|
|
3 |
* Pure JavaScript plotting plugin using jQuery
|
|
|
4 |
*
|
|
|
5 |
* Version: 1.0.8
|
|
|
6 |
* Revision: 1250
|
|
|
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 |
/**
|
|
|
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 = (this._plotData[0].length < 3) ? 0 : this._plotData[0].length -1;
|
|
|
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 (label == null || (p.hideZeros && parseInt(label, 10) == 0)) {
|
|
|
298 |
continue;
|
|
|
299 |
}
|
|
|
300 |
|
|
|
301 |
label = p.formatter(p.formatString, label);
|
|
|
302 |
|
|
|
303 |
helem = document.createElement('div');
|
|
|
304 |
p._elems[i] = $(helem);
|
|
|
305 |
|
|
|
306 |
elem = p._elems[i];
|
|
|
307 |
|
|
|
308 |
|
|
|
309 |
elem.addClass('jqplot-point-label jqplot-series-'+this.index+' jqplot-point-'+i);
|
|
|
310 |
elem.css('position', 'absolute');
|
|
|
311 |
elem.insertAfter(sctx.canvas);
|
|
|
312 |
|
|
|
313 |
if (p.escapeHTML) {
|
|
|
314 |
elem.text(label);
|
|
|
315 |
}
|
|
|
316 |
else {
|
|
|
317 |
elem.html(label);
|
|
|
318 |
}
|
|
|
319 |
var location = p.location;
|
|
|
320 |
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) {
|
|
|
321 |
location = oppositeLocations[locationIndicies[location]];
|
|
|
322 |
}
|
|
|
323 |
|
|
|
324 |
|
|
|
325 |
var ell = xax.u2p(pd[i][0]) + p.xOffset(elem, location);
|
|
|
326 |
var elt = yax.u2p(pd[i][1]) + p.yOffset(elem, location);
|
|
|
327 |
|
|
|
328 |
// we have stacked chart but are not showing stacked values,
|
|
|
329 |
// place labels in center.
|
|
|
330 |
if (this._stack && !p.stackedValue) {
|
|
|
331 |
if (this.barDirection === "vertical") {
|
|
|
332 |
elt = (this._barPoints[i][0][1] + this._barPoints[i][1][1]) / 2 + plot._gridPadding.top - 0.5 * elem.outerHeight(true);
|
|
|
333 |
}
|
|
|
334 |
else {
|
|
|
335 |
ell = (this._barPoints[i][2][0] + this._barPoints[i][0][0]) / 2 + plot._gridPadding.left - 0.5 * elem.outerWidth(true);
|
|
|
336 |
}
|
|
|
337 |
}
|
|
|
338 |
|
|
|
339 |
if (this.renderer.constructor == $.jqplot.BarRenderer) {
|
|
|
340 |
if (this.barDirection == "vertical") {
|
|
|
341 |
ell += this._barNudge;
|
|
|
342 |
}
|
|
|
343 |
else {
|
|
|
344 |
elt -= this._barNudge;
|
|
|
345 |
}
|
|
|
346 |
}
|
|
|
347 |
elem.css('left', ell);
|
|
|
348 |
elem.css('top', elt);
|
|
|
349 |
var elr = ell + elem.width();
|
|
|
350 |
var elb = elt + elem.height();
|
|
|
351 |
var et = p.edgeTolerance;
|
|
|
352 |
var scl = $(sctx.canvas).position().left;
|
|
|
353 |
var sct = $(sctx.canvas).position().top;
|
|
|
354 |
var scr = sctx.canvas.width + scl;
|
|
|
355 |
var scb = sctx.canvas.height + sct;
|
|
|
356 |
// if label is outside of allowed area, remove it
|
|
|
357 |
if (ell - et < scl || elt - et < sct || elr + et > scr || elb + et > scb) {
|
|
|
358 |
elem.remove();
|
|
|
359 |
}
|
|
|
360 |
|
|
|
361 |
elem = null;
|
|
|
362 |
helem = null;
|
|
|
363 |
}
|
|
|
364 |
|
|
|
365 |
// finally, animate them if the series is animated
|
|
|
366 |
// if (this.renderer.animation && this.renderer.animation._supported && this.renderer.animation.show && plot._drawCount < 2) {
|
|
|
367 |
// var sel = '.jqplot-point-label.jqplot-series-'+this.index;
|
|
|
368 |
// $(sel).hide();
|
|
|
369 |
// $(sel).fadeIn(1000);
|
|
|
370 |
// }
|
|
|
371 |
|
|
|
372 |
}
|
|
|
373 |
};
|
|
|
374 |
|
|
|
375 |
$.jqplot.postSeriesInitHooks.push($.jqplot.PointLabels.init);
|
|
|
376 |
$.jqplot.postDrawSeriesHooks.push($.jqplot.PointLabels.draw);
|
|
|
377 |
})(jQuery);
|