root / hci / trunk / eneraptor-web-app / web-app / js / flot / jquery.flot.js @ 11
History | View | Annotate | Download (87.6 KB)
1 |
/* Javascript plotting library for jQuery, v. 0.6.
|
---|---|
2 |
*
|
3 |
* Released under the MIT license by IOLA, December 2007.
|
4 |
*
|
5 |
*/
|
6 |
|
7 |
// first an inline dependency, jquery.colorhelpers.js, we inline it here
|
8 |
// for convenience
|
9 |
|
10 |
/* Plugin for jQuery for working with colors.
|
11 |
*
|
12 |
* Version 1.0.
|
13 |
*
|
14 |
* Inspiration from jQuery color animation plugin by John Resig.
|
15 |
*
|
16 |
* Released under the MIT license by Ole Laursen, October 2009.
|
17 |
*
|
18 |
* Examples:
|
19 |
*
|
20 |
* $.color.parse("#fff").scale('rgb', 0.25).add('a', -0.5).toString()
|
21 |
* var c = $.color.extract($("#mydiv"), 'background-color');
|
22 |
* console.log(c.r, c.g, c.b, c.a);
|
23 |
* $.color.make(100, 50, 25, 0.4).toString() // returns "rgba(100,50,25,0.4)"
|
24 |
*
|
25 |
* Note that .scale() and .add() work in-place instead of returning
|
26 |
* new objects.
|
27 |
*/
|
28 |
(function(){jQuery.color={};jQuery.color.make=function(E,D,B,C){var F={};F.r=E||0;F.g=D||0;F.b=B||0;F.a=C!=null?C:1;F.add=function(I,H){for(var G=0;G<I.length;++G){F[I.charAt(G)]+=H}return F.normalize()};F.scale=function(I,H){for(var G=0;G<I.length;++G){F[I.charAt(G)]*=H}return F.normalize()};F.toString=function(){if(F.a>=1){return"rgb("+[F.r,F.g,F.b].join(",")+")"}else{return"rgba("+[F.r,F.g,F.b,F.a].join(",")+")"}};F.normalize=function(){function G(I,J,H){return J<I?I:(J>H?H:J)}F.r=G(0,parseInt(F.r),255);F.g=G(0,parseInt(F.g),255);F.b=G(0,parseInt(F.b),255);F.a=G(0,F.a,1);return F};F.clone=function(){return jQuery.color.make(F.r,F.b,F.g,F.a)};return F.normalize()};jQuery.color.extract=function(C,B){var D;do{D=C.css(B).toLowerCase();if(D!=""&&D!="transparent"){break}C=C.parent()}while(!jQuery.nodeName(C.get(0),"body"));if(D=="rgba(0, 0, 0, 0)"){D="transparent"}return jQuery.color.parse(D)};jQuery.color.parse=function(E){var D,B=jQuery.color.make;if(D=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(E)){return B(parseInt(D[1],10),parseInt(D[2],10),parseInt(D[3],10))}if(D=/rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(E)){return B(parseInt(D[1],10),parseInt(D[2],10),parseInt(D[3],10),parseFloat(D[4]))}if(D=/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(E)){return B(parseFloat(D[1])*2.55,parseFloat(D[2])*2.55,parseFloat(D[3])*2.55)}if(D=/rgba\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(E)){return B(parseFloat(D[1])*2.55,parseFloat(D[2])*2.55,parseFloat(D[3])*2.55,parseFloat(D[4]))}if(D=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(E)){return B(parseInt(D[1],16),parseInt(D[2],16),parseInt(D[3],16))}if(D=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(E)){return B(parseInt(D[1]+D[1],16),parseInt(D[2]+D[2],16),parseInt(D[3]+D[3],16))}var C=jQuery.trim(E).toLowerCase();if(C=="transparent"){return B(255,255,255,0)}else{D=A[C];return B(D[0],D[1],D[2])}};var A={aqua:[0,255,255],azure:[240,255,255],beige:[245,245,220],black:[0,0,0],blue:[0,0,255],brown:[165,42,42],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgrey:[169,169,169],darkgreen:[0,100,0],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkviolet:[148,0,211],fuchsia:[255,0,255],gold:[255,215,0],green:[0,128,0],indigo:[75,0,130],khaki:[240,230,140],lightblue:[173,216,230],lightcyan:[224,255,255],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightyellow:[255,255,224],lime:[0,255,0],magenta:[255,0,255],maroon:[128,0,0],navy:[0,0,128],olive:[128,128,0],orange:[255,165,0],pink:[255,192,203],purple:[128,0,128],violet:[128,0,128],red:[255,0,0],silver:[192,192,192],white:[255,255,255],yellow:[255,255,0]}})(); |
29 |
|
30 |
// the actual Flot code
|
31 |
(function($) { |
32 |
function Plot(placeholder, data_, options_, plugins) { |
33 |
// data is on the form:
|
34 |
// [ series1, series2 ... ]
|
35 |
// where series is either just the data as [ [x1, y1], [x2, y2], ... ]
|
36 |
// or { data: [ [x1, y1], [x2, y2], ... ], label: "some label", ... }
|
37 |
|
38 |
var series = [],
|
39 |
options = { |
40 |
// the color theme used for graphs
|
41 |
colors: ["#edc240", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"], |
42 |
legend: {
|
43 |
show: true, |
44 |
noColumns: 1, // number of colums in legend table |
45 |
labelFormatter: null, // fn: string -> string |
46 |
labelBoxBorderColor: "#ccc", // border color for the little label boxes |
47 |
container: null, // container (as jQuery object) to put legend in, null means default on top of graph |
48 |
position: "ne", // position of default legend container within plot |
49 |
margin: 5, // distance from grid edge to default legend container within plot |
50 |
backgroundColor: null, // null means auto-detect |
51 |
backgroundOpacity: 0.85 // set to 0 to avoid background |
52 |
}, |
53 |
xaxis: {
|
54 |
mode: null, // null or "time" |
55 |
transform: null, // null or f: number -> number to transform axis |
56 |
inverseTransform: null, // if transform is set, this should be the inverse function |
57 |
min: null, // min. value to show, null means set automatically |
58 |
max: null, // max. value to show, null means set automatically |
59 |
autoscaleMargin: null, // margin in % to add if auto-setting min/max |
60 |
ticks: null, // either [1, 3] or [[1, "a"], 3] or (fn: axis info -> ticks) or app. number of ticks for auto-ticks |
61 |
tickFormatter: null, // fn: number -> string |
62 |
labelWidth: null, // size of tick labels in pixels |
63 |
labelHeight: null, |
64 |
|
65 |
// mode specific options
|
66 |
tickDecimals: null, // no. of decimals, null means auto |
67 |
tickSize: null, // number or [number, "unit"] |
68 |
minTickSize: null, // number or [number, "unit"] |
69 |
monthNames: null, // list of names of months |
70 |
timeformat: null, // format string to use |
71 |
twelveHourClock: false // 12 or 24 time in time mode |
72 |
}, |
73 |
yaxis: {
|
74 |
autoscaleMargin: 0.02 |
75 |
}, |
76 |
x2axis: {
|
77 |
autoscaleMargin: null |
78 |
}, |
79 |
y2axis: {
|
80 |
autoscaleMargin: 0.02 |
81 |
}, |
82 |
series: {
|
83 |
points: {
|
84 |
show: false, |
85 |
radius: 3, |
86 |
lineWidth: 2, // in pixels |
87 |
fill: true, |
88 |
fillColor: "#ffffff" |
89 |
}, |
90 |
lines: {
|
91 |
// we don't put in show: false so we can see
|
92 |
// whether lines were actively disabled
|
93 |
lineWidth: 2, // in pixels |
94 |
fill: false, |
95 |
fillColor: null, |
96 |
steps: false |
97 |
}, |
98 |
bars: {
|
99 |
show: false, |
100 |
lineWidth: 2, // in pixels |
101 |
barWidth: 1, // in units of the x axis |
102 |
fill: true, |
103 |
fillColor: null, |
104 |
align: "left", // or "center" |
105 |
horizontal: false // when horizontal, left is now top |
106 |
}, |
107 |
shadowSize: 3 |
108 |
}, |
109 |
grid: {
|
110 |
show: true, |
111 |
aboveData: false, |
112 |
color: "#545454", // primary color used for outline and labels |
113 |
backgroundColor: null, // null for transparent, else color |
114 |
tickColor: "rgba(0,0,0,0.15)", // color used for the ticks |
115 |
labelMargin: 5, // in pixels |
116 |
borderWidth: 2, // in pixels |
117 |
borderColor: null, // set if different from the grid color |
118 |
markings: null, // array of ranges or fn: axes -> array of ranges |
119 |
markingsColor: "#f4f4f4", |
120 |
markingsLineWidth: 2, |
121 |
// interactive stuff
|
122 |
clickable: false, |
123 |
hoverable: false, |
124 |
autoHighlight: true, // highlight in case mouse is near |
125 |
mouseActiveRadius: 10 // how far the mouse can be away to activate an item |
126 |
}, |
127 |
hooks: {}
|
128 |
}, |
129 |
canvas = null, // the canvas for the plot itself |
130 |
overlay = null, // canvas for interactive stuff on top of plot |
131 |
eventHolder = null, // jQuery object that events should be bound to |
132 |
ctx = null, octx = null, |
133 |
axes = { xaxis: {}, yaxis: {}, x2axis: {}, y2axis: {} }, |
134 |
plotOffset = { left: 0, right: 0, top: 0, bottom: 0}, |
135 |
canvasWidth = 0, canvasHeight = 0, |
136 |
plotWidth = 0, plotHeight = 0, |
137 |
hooks = { |
138 |
processOptions: [],
|
139 |
processRawData: [],
|
140 |
processDatapoints: [],
|
141 |
draw: [],
|
142 |
bindEvents: [],
|
143 |
drawOverlay: []
|
144 |
}, |
145 |
plot = this;
|
146 |
|
147 |
// public functions
|
148 |
plot.setData = setData; |
149 |
plot.setupGrid = setupGrid; |
150 |
plot.draw = draw; |
151 |
plot.getPlaceholder = function() { return placeholder; }; |
152 |
plot.getCanvas = function() { return canvas; }; |
153 |
plot.getPlotOffset = function() { return plotOffset; }; |
154 |
plot.width = function () { return plotWidth; }; |
155 |
plot.height = function () { return plotHeight; }; |
156 |
plot.offset = function () { |
157 |
var o = eventHolder.offset();
|
158 |
o.left += plotOffset.left; |
159 |
o.top += plotOffset.top; |
160 |
return o;
|
161 |
}; |
162 |
plot.getData = function() { return series; }; |
163 |
plot.getAxes = function() { return axes; }; |
164 |
plot.getOptions = function() { return options; }; |
165 |
plot.highlight = highlight; |
166 |
plot.unhighlight = unhighlight; |
167 |
plot.triggerRedrawOverlay = triggerRedrawOverlay; |
168 |
plot.pointOffset = function(point) { |
169 |
return { left: parseInt(axisSpecToRealAxis(point, "xaxis").p2c(+point.x) + plotOffset.left), |
170 |
top: parseInt(axisSpecToRealAxis(point, "yaxis").p2c(+point.y) + plotOffset.top) }; |
171 |
}; |
172 |
|
173 |
|
174 |
// public attributes
|
175 |
plot.hooks = hooks; |
176 |
|
177 |
// initialize
|
178 |
initPlugins(plot); |
179 |
parseOptions(options_); |
180 |
constructCanvas(); |
181 |
setData(data_); |
182 |
setupGrid(); |
183 |
draw(); |
184 |
bindEvents(); |
185 |
|
186 |
|
187 |
function executeHooks(hook, args) { |
188 |
args = [plot].concat(args); |
189 |
for (var i = 0; i < hook.length; ++i) |
190 |
hook[i].apply(this, args);
|
191 |
} |
192 |
|
193 |
function initPlugins() { |
194 |
for (var i = 0; i < plugins.length; ++i) { |
195 |
var p = plugins[i];
|
196 |
p.init(plot); |
197 |
if (p.options)
|
198 |
$.extend(true, options, p.options); |
199 |
} |
200 |
} |
201 |
|
202 |
function parseOptions(opts) { |
203 |
$.extend(true, options, opts); |
204 |
if (options.grid.borderColor == null) |
205 |
options.grid.borderColor = options.grid.color; |
206 |
// backwards compatibility, to be removed in future
|
207 |
if (options.xaxis.noTicks && options.xaxis.ticks == null) |
208 |
options.xaxis.ticks = options.xaxis.noTicks; |
209 |
if (options.yaxis.noTicks && options.yaxis.ticks == null) |
210 |
options.yaxis.ticks = options.yaxis.noTicks; |
211 |
if (options.grid.coloredAreas)
|
212 |
options.grid.markings = options.grid.coloredAreas; |
213 |
if (options.grid.coloredAreasColor)
|
214 |
options.grid.markingsColor = options.grid.coloredAreasColor; |
215 |
if (options.lines)
|
216 |
$.extend(true, options.series.lines, options.lines); |
217 |
if (options.points)
|
218 |
$.extend(true, options.series.points, options.points); |
219 |
if (options.bars)
|
220 |
$.extend(true, options.series.bars, options.bars); |
221 |
if (options.shadowSize)
|
222 |
options.series.shadowSize = options.shadowSize; |
223 |
|
224 |
for (var n in hooks) |
225 |
if (options.hooks[n] && options.hooks[n].length)
|
226 |
hooks[n] = hooks[n].concat(options.hooks[n]); |
227 |
|
228 |
executeHooks(hooks.processOptions, [options]); |
229 |
} |
230 |
|
231 |
function setData(d) { |
232 |
series = parseData(d); |
233 |
fillInSeriesOptions(); |
234 |
processData(); |
235 |
} |
236 |
|
237 |
function parseData(d) { |
238 |
var res = [];
|
239 |
for (var i = 0; i < d.length; ++i) { |
240 |
var s = $.extend(true, {}, options.series); |
241 |
|
242 |
if (d[i].data) {
|
243 |
s.data = d[i].data; // move the data instead of deep-copy
|
244 |
delete d[i].data;
|
245 |
|
246 |
$.extend(true, s, d[i]); |
247 |
|
248 |
d[i].data = s.data; |
249 |
} |
250 |
else
|
251 |
s.data = d[i]; |
252 |
res.push(s); |
253 |
} |
254 |
|
255 |
return res;
|
256 |
} |
257 |
|
258 |
function axisSpecToRealAxis(obj, attr) { |
259 |
var a = obj[attr];
|
260 |
if (!a || a == 1) |
261 |
return axes[attr];
|
262 |
if (typeof a == "number") |
263 |
return axes[attr.charAt(0) + a + attr.slice(1)]; |
264 |
return a; // assume it's OK |
265 |
} |
266 |
|
267 |
function fillInSeriesOptions() { |
268 |
var i;
|
269 |
|
270 |
// collect what we already got of colors
|
271 |
var neededColors = series.length,
|
272 |
usedColors = [], |
273 |
assignedColors = []; |
274 |
for (i = 0; i < series.length; ++i) { |
275 |
var sc = series[i].color;
|
276 |
if (sc != null) { |
277 |
--neededColors; |
278 |
if (typeof sc == "number") |
279 |
assignedColors.push(sc); |
280 |
else
|
281 |
usedColors.push($.color.parse(series[i].color));
|
282 |
} |
283 |
} |
284 |
|
285 |
// we might need to generate more colors if higher indices
|
286 |
// are assigned
|
287 |
for (i = 0; i < assignedColors.length; ++i) { |
288 |
neededColors = Math.max(neededColors, assignedColors[i] + 1);
|
289 |
} |
290 |
|
291 |
// produce colors as needed
|
292 |
var colors = [], variation = 0; |
293 |
i = 0;
|
294 |
while (colors.length < neededColors) {
|
295 |
var c;
|
296 |
if (options.colors.length == i) // check degenerate case |
297 |
c = $.color.make(100, 100, 100); |
298 |
else
|
299 |
c = $.color.parse(options.colors[i]);
|
300 |
|
301 |
// vary color if needed
|
302 |
var sign = variation % 2 == 1 ? -1 : 1; |
303 |
c.scale('rgb', 1 + sign * Math.ceil(variation / 2) * 0.2) |
304 |
|
305 |
// FIXME: if we're getting to close to something else,
|
306 |
// we should probably skip this one
|
307 |
colors.push(c); |
308 |
|
309 |
++i; |
310 |
if (i >= options.colors.length) {
|
311 |
i = 0;
|
312 |
++variation; |
313 |
} |
314 |
} |
315 |
|
316 |
// fill in the options
|
317 |
var colori = 0, s; |
318 |
for (i = 0; i < series.length; ++i) { |
319 |
s = series[i]; |
320 |
|
321 |
// assign colors
|
322 |
if (s.color == null) { |
323 |
s.color = colors[colori].toString(); |
324 |
++colori; |
325 |
} |
326 |
else if (typeof s.color == "number") |
327 |
s.color = colors[s.color].toString(); |
328 |
|
329 |
// turn on lines automatically in case nothing is set
|
330 |
if (s.lines.show == null) { |
331 |
var v, show = true; |
332 |
for (v in s) |
333 |
if (s[v].show) {
|
334 |
show = false;
|
335 |
break;
|
336 |
} |
337 |
if (show)
|
338 |
s.lines.show = true;
|
339 |
} |
340 |
|
341 |
// setup axes
|
342 |
s.xaxis = axisSpecToRealAxis(s, "xaxis");
|
343 |
s.yaxis = axisSpecToRealAxis(s, "yaxis");
|
344 |
} |
345 |
} |
346 |
|
347 |
function processData() { |
348 |
var topSentry = Number.POSITIVE_INFINITY,
|
349 |
bottomSentry = Number.NEGATIVE_INFINITY, |
350 |
i, j, k, m, length, |
351 |
s, points, ps, x, y, axis, val, f, p; |
352 |
|
353 |
for (axis in axes) { |
354 |
axes[axis].datamin = topSentry; |
355 |
axes[axis].datamax = bottomSentry; |
356 |
axes[axis].used = false;
|
357 |
} |
358 |
|
359 |
function updateAxis(axis, min, max) { |
360 |
if (min < axis.datamin)
|
361 |
axis.datamin = min; |
362 |
if (max > axis.datamax)
|
363 |
axis.datamax = max; |
364 |
} |
365 |
|
366 |
for (i = 0; i < series.length; ++i) { |
367 |
s = series[i]; |
368 |
s.datapoints = { points: [] };
|
369 |
|
370 |
executeHooks(hooks.processRawData, [ s, s.data, s.datapoints ]); |
371 |
} |
372 |
|
373 |
// first pass: clean and copy data
|
374 |
for (i = 0; i < series.length; ++i) { |
375 |
s = series[i]; |
376 |
|
377 |
var data = s.data, format = s.datapoints.format;
|
378 |
|
379 |
if (!format) {
|
380 |
format = []; |
381 |
// find out how to copy
|
382 |
format.push({ x: true, number: true, required: true }); |
383 |
format.push({ y: true, number: true, required: true }); |
384 |
|
385 |
if (s.bars.show)
|
386 |
format.push({ y: true, number: true, required: false, defaultValue: 0 }); |
387 |
|
388 |
s.datapoints.format = format; |
389 |
} |
390 |
|
391 |
if (s.datapoints.pointsize != null) |
392 |
continue; // already filled in |
393 |
|
394 |
if (s.datapoints.pointsize == null) |
395 |
s.datapoints.pointsize = format.length; |
396 |
|
397 |
ps = s.datapoints.pointsize; |
398 |
points = s.datapoints.points; |
399 |
|
400 |
insertSteps = s.lines.show && s.lines.steps; |
401 |
s.xaxis.used = s.yaxis.used = true;
|
402 |
|
403 |
for (j = k = 0; j < data.length; ++j, k += ps) { |
404 |
p = data[j]; |
405 |
|
406 |
var nullify = p == null; |
407 |
if (!nullify) {
|
408 |
for (m = 0; m < ps; ++m) { |
409 |
val = p[m]; |
410 |
f = format[m]; |
411 |
|
412 |
if (f) {
|
413 |
if (f.number && val != null) { |
414 |
val = +val; // convert to number
|
415 |
if (isNaN(val))
|
416 |
val = null;
|
417 |
} |
418 |
|
419 |
if (val == null) { |
420 |
if (f.required)
|
421 |
nullify = true;
|
422 |
|
423 |
if (f.defaultValue != null) |
424 |
val = f.defaultValue; |
425 |
} |
426 |
} |
427 |
|
428 |
points[k + m] = val; |
429 |
} |
430 |
} |
431 |
|
432 |
if (nullify) {
|
433 |
for (m = 0; m < ps; ++m) { |
434 |
val = points[k + m]; |
435 |
if (val != null) { |
436 |
f = format[m]; |
437 |
// extract min/max info
|
438 |
if (f.x)
|
439 |
updateAxis(s.xaxis, val, val); |
440 |
if (f.y)
|
441 |
updateAxis(s.yaxis, val, val); |
442 |
} |
443 |
points[k + m] = null;
|
444 |
} |
445 |
} |
446 |
else {
|
447 |
// a little bit of line specific stuff that
|
448 |
// perhaps shouldn't be here, but lacking
|
449 |
// better means...
|
450 |
if (insertSteps && k > 0 |
451 |
&& points[k - ps] != null
|
452 |
&& points[k - ps] != points[k] |
453 |
&& points[k - ps + 1] != points[k + 1]) { |
454 |
// copy the point to make room for a middle point
|
455 |
for (m = 0; m < ps; ++m) |
456 |
points[k + ps + m] = points[k + m]; |
457 |
|
458 |
// middle point has same y
|
459 |
points[k + 1] = points[k - ps + 1]; |
460 |
|
461 |
// we've added a point, better reflect that
|
462 |
k += ps; |
463 |
} |
464 |
} |
465 |
} |
466 |
} |
467 |
|
468 |
// give the hooks a chance to run
|
469 |
for (i = 0; i < series.length; ++i) { |
470 |
s = series[i]; |
471 |
|
472 |
executeHooks(hooks.processDatapoints, [ s, s.datapoints]); |
473 |
} |
474 |
|
475 |
// second pass: find datamax/datamin for auto-scaling
|
476 |
for (i = 0; i < series.length; ++i) { |
477 |
s = series[i]; |
478 |
points = s.datapoints.points, |
479 |
ps = s.datapoints.pointsize; |
480 |
|
481 |
var xmin = topSentry, ymin = topSentry,
|
482 |
xmax = bottomSentry, ymax = bottomSentry; |
483 |
|
484 |
for (j = 0; j < points.length; j += ps) { |
485 |
if (points[j] == null) |
486 |
continue;
|
487 |
|
488 |
for (m = 0; m < ps; ++m) { |
489 |
val = points[j + m]; |
490 |
f = format[m]; |
491 |
if (!f)
|
492 |
continue;
|
493 |
|
494 |
if (f.x) {
|
495 |
if (val < xmin)
|
496 |
xmin = val; |
497 |
if (val > xmax)
|
498 |
xmax = val; |
499 |
} |
500 |
if (f.y) {
|
501 |
if (val < ymin)
|
502 |
ymin = val; |
503 |
if (val > ymax)
|
504 |
ymax = val; |
505 |
} |
506 |
} |
507 |
} |
508 |
|
509 |
if (s.bars.show) {
|
510 |
// make sure we got room for the bar on the dancing floor
|
511 |
var delta = s.bars.align == "left" ? 0 : -s.bars.barWidth/2; |
512 |
if (s.bars.horizontal) {
|
513 |
ymin += delta; |
514 |
ymax += delta + s.bars.barWidth; |
515 |
} |
516 |
else {
|
517 |
xmin += delta; |
518 |
xmax += delta + s.bars.barWidth; |
519 |
} |
520 |
} |
521 |
|
522 |
updateAxis(s.xaxis, xmin, xmax); |
523 |
updateAxis(s.yaxis, ymin, ymax); |
524 |
} |
525 |
|
526 |
for (axis in axes) { |
527 |
if (axes[axis].datamin == topSentry)
|
528 |
axes[axis].datamin = null;
|
529 |
if (axes[axis].datamax == bottomSentry)
|
530 |
axes[axis].datamax = null;
|
531 |
} |
532 |
} |
533 |
|
534 |
function constructCanvas() { |
535 |
function makeCanvas(width, height) { |
536 |
var c = document.createElement('canvas'); |
537 |
c.width = width; |
538 |
c.height = height; |
539 |
if ($.browser.msie) // excanvas hack |
540 |
c = window.G_vmlCanvasManager.initElement(c); |
541 |
return c;
|
542 |
} |
543 |
|
544 |
canvasWidth = placeholder.width(); |
545 |
canvasHeight = placeholder.height(); |
546 |
placeholder.html(""); // clear placeholder |
547 |
if (placeholder.css("position") == 'static') |
548 |
placeholder.css("position", "relative"); // for positioning labels and overlay |
549 |
|
550 |
if (canvasWidth <= 0 || canvasHeight <= 0) |
551 |
throw "Invalid dimensions for plot, width = " + canvasWidth + ", height = " + canvasHeight; |
552 |
|
553 |
if ($.browser.msie) // excanvas hack |
554 |
window.G_vmlCanvasManager.init_(document); // make sure everything is setup
|
555 |
|
556 |
// the canvas
|
557 |
canvas = $(makeCanvas(canvasWidth, canvasHeight)).appendTo(placeholder).get(0); |
558 |
ctx = canvas.getContext("2d");
|
559 |
|
560 |
// overlay canvas for interactive features
|
561 |
overlay = $(makeCanvas(canvasWidth, canvasHeight)).css({ position: 'absolute', left: 0, top: 0 }).appendTo(placeholder).get(0); |
562 |
octx = overlay.getContext("2d");
|
563 |
octx.stroke(); |
564 |
} |
565 |
|
566 |
function bindEvents() { |
567 |
// we include the canvas in the event holder too, because IE 7
|
568 |
// sometimes has trouble with the stacking order
|
569 |
eventHolder = $([overlay, canvas]);
|
570 |
|
571 |
// bind events
|
572 |
if (options.grid.hoverable)
|
573 |
eventHolder.mousemove(onMouseMove); |
574 |
|
575 |
if (options.grid.clickable)
|
576 |
eventHolder.click(onClick); |
577 |
|
578 |
executeHooks(hooks.bindEvents, [eventHolder]); |
579 |
} |
580 |
|
581 |
function setupGrid() { |
582 |
function setTransformationHelpers(axis, o) { |
583 |
function identity(x) { return x; } |
584 |
|
585 |
var s, m, t = o.transform || identity,
|
586 |
it = o.inverseTransform; |
587 |
|
588 |
// add transformation helpers
|
589 |
if (axis == axes.xaxis || axis == axes.x2axis) {
|
590 |
// precompute how much the axis is scaling a point
|
591 |
// in canvas space
|
592 |
s = axis.scale = plotWidth / (t(axis.max) - t(axis.min)); |
593 |
m = t(axis.min); |
594 |
|
595 |
// data point to canvas coordinate
|
596 |
if (t == identity) // slight optimization |
597 |
axis.p2c = function (p) { return (p - m) * s; }; |
598 |
else
|
599 |
axis.p2c = function (p) { return (t(p) - m) * s; }; |
600 |
// canvas coordinate to data point
|
601 |
if (!it)
|
602 |
axis.c2p = function (c) { return m + c / s; }; |
603 |
else
|
604 |
axis.c2p = function (c) { return it(m + c / s); }; |
605 |
} |
606 |
else {
|
607 |
s = axis.scale = plotHeight / (t(axis.max) - t(axis.min)); |
608 |
m = t(axis.max); |
609 |
|
610 |
if (t == identity)
|
611 |
axis.p2c = function (p) { return (m - p) * s; }; |
612 |
else
|
613 |
axis.p2c = function (p) { return (m - t(p)) * s; }; |
614 |
if (!it)
|
615 |
axis.c2p = function (c) { return m - c / s; }; |
616 |
else
|
617 |
axis.c2p = function (c) { return it(m - c / s); }; |
618 |
} |
619 |
} |
620 |
|
621 |
function measureLabels(axis, axisOptions) { |
622 |
var i, labels = [], l;
|
623 |
|
624 |
axis.labelWidth = axisOptions.labelWidth; |
625 |
axis.labelHeight = axisOptions.labelHeight; |
626 |
|
627 |
if (axis == axes.xaxis || axis == axes.x2axis) {
|
628 |
// to avoid measuring the widths of the labels, we
|
629 |
// construct fixed-size boxes and put the labels inside
|
630 |
// them, we don't need the exact figures and the
|
631 |
// fixed-size box content is easy to center
|
632 |
if (axis.labelWidth == null) |
633 |
axis.labelWidth = canvasWidth / (axis.ticks.length > 0 ? axis.ticks.length : 1); |
634 |
|
635 |
// measure x label heights
|
636 |
if (axis.labelHeight == null) { |
637 |
labels = []; |
638 |
for (i = 0; i < axis.ticks.length; ++i) { |
639 |
l = axis.ticks[i].label; |
640 |
if (l)
|
641 |
labels.push('<div class="tickLabel" style="float:left;width:' + axis.labelWidth + 'px">' + l + '</div>'); |
642 |
} |
643 |
|
644 |
if (labels.length > 0) { |
645 |
var dummyDiv = $('<div style="position:absolute;top:-10000px;width:10000px;font-size:smaller">' |
646 |
+ labels.join("") + '<div style="clear:left"></div></div>').appendTo(placeholder); |
647 |
axis.labelHeight = dummyDiv.height(); |
648 |
dummyDiv.remove(); |
649 |
} |
650 |
} |
651 |
} |
652 |
else if (axis.labelWidth == null || axis.labelHeight == null) { |
653 |
// calculate y label dimensions
|
654 |
for (i = 0; i < axis.ticks.length; ++i) { |
655 |
l = axis.ticks[i].label; |
656 |
if (l)
|
657 |
labels.push('<div class="tickLabel">' + l + '</div>'); |
658 |
} |
659 |
|
660 |
if (labels.length > 0) { |
661 |
var dummyDiv = $('<div style="position:absolute;top:-10000px;font-size:smaller">' |
662 |
+ labels.join("") + '</div>').appendTo(placeholder); |
663 |
if (axis.labelWidth == null) |
664 |
axis.labelWidth = dummyDiv.width(); |
665 |
if (axis.labelHeight == null) |
666 |
axis.labelHeight = dummyDiv.find("div").height();
|
667 |
dummyDiv.remove(); |
668 |
} |
669 |
|
670 |
} |
671 |
|
672 |
if (axis.labelWidth == null) |
673 |
axis.labelWidth = 0;
|
674 |
if (axis.labelHeight == null) |
675 |
axis.labelHeight = 0;
|
676 |
} |
677 |
|
678 |
function setGridSpacing() { |
679 |
// get the most space needed around the grid for things
|
680 |
// that may stick out
|
681 |
var maxOutset = options.grid.borderWidth;
|
682 |
for (i = 0; i < series.length; ++i) |
683 |
maxOutset = Math.max(maxOutset, 2 * (series[i].points.radius + series[i].points.lineWidth/2)); |
684 |
|
685 |
plotOffset.left = plotOffset.right = plotOffset.top = plotOffset.bottom = maxOutset; |
686 |
|
687 |
var margin = options.grid.labelMargin + options.grid.borderWidth;
|
688 |
|
689 |
if (axes.xaxis.labelHeight > 0) |
690 |
plotOffset.bottom = Math.max(maxOutset, axes.xaxis.labelHeight + margin); |
691 |
if (axes.yaxis.labelWidth > 0) |
692 |
plotOffset.left = Math.max(maxOutset, axes.yaxis.labelWidth + margin); |
693 |
if (axes.x2axis.labelHeight > 0) |
694 |
plotOffset.top = Math.max(maxOutset, axes.x2axis.labelHeight + margin); |
695 |
if (axes.y2axis.labelWidth > 0) |
696 |
plotOffset.right = Math.max(maxOutset, axes.y2axis.labelWidth + margin); |
697 |
|
698 |
plotWidth = canvasWidth - plotOffset.left - plotOffset.right; |
699 |
plotHeight = canvasHeight - plotOffset.bottom - plotOffset.top; |
700 |
} |
701 |
|
702 |
var axis;
|
703 |
for (axis in axes) |
704 |
setRange(axes[axis], options[axis]); |
705 |
|
706 |
if (options.grid.show) {
|
707 |
for (axis in axes) { |
708 |
prepareTickGeneration(axes[axis], options[axis]); |
709 |
setTicks(axes[axis], options[axis]); |
710 |
measureLabels(axes[axis], options[axis]); |
711 |
} |
712 |
|
713 |
setGridSpacing(); |
714 |
} |
715 |
else {
|
716 |
plotOffset.left = plotOffset.right = plotOffset.top = plotOffset.bottom = 0;
|
717 |
plotWidth = canvasWidth; |
718 |
plotHeight = canvasHeight; |
719 |
} |
720 |
|
721 |
for (axis in axes) |
722 |
setTransformationHelpers(axes[axis], options[axis]); |
723 |
|
724 |
if (options.grid.show)
|
725 |
insertLabels(); |
726 |
|
727 |
insertLegend(); |
728 |
} |
729 |
|
730 |
function setRange(axis, axisOptions) { |
731 |
var min = +(axisOptions.min != null ? axisOptions.min : axis.datamin), |
732 |
max = +(axisOptions.max != null ? axisOptions.max : axis.datamax),
|
733 |
delta = max - min; |
734 |
|
735 |
if (delta == 0.0) { |
736 |
// degenerate case
|
737 |
var widen = max == 0 ? 1 : 0.01; |
738 |
|
739 |
if (axisOptions.min == null) |
740 |
min -= widen; |
741 |
// alway widen max if we couldn't widen min to ensure we
|
742 |
// don't fall into min == max which doesn't work
|
743 |
if (axisOptions.max == null || axisOptions.min != null) |
744 |
max += widen; |
745 |
} |
746 |
else {
|
747 |
// consider autoscaling
|
748 |
var margin = axisOptions.autoscaleMargin;
|
749 |
if (margin != null) { |
750 |
if (axisOptions.min == null) { |
751 |
min -= delta * margin; |
752 |
// make sure we don't go below zero if all values
|
753 |
// are positive
|
754 |
if (min < 0 && axis.datamin != null && axis.datamin >= 0) |
755 |
min = 0;
|
756 |
} |
757 |
if (axisOptions.max == null) { |
758 |
max += delta * margin; |
759 |
if (max > 0 && axis.datamax != null && axis.datamax <= 0) |
760 |
max = 0;
|
761 |
} |
762 |
} |
763 |
} |
764 |
axis.min = min; |
765 |
axis.max = max; |
766 |
} |
767 |
|
768 |
function prepareTickGeneration(axis, axisOptions) { |
769 |
// estimate number of ticks
|
770 |
var noTicks;
|
771 |
if (typeof axisOptions.ticks == "number" && axisOptions.ticks > 0) |
772 |
noTicks = axisOptions.ticks; |
773 |
else if (axis == axes.xaxis || axis == axes.x2axis) |
774 |
// heuristic based on the model a*sqrt(x) fitted to
|
775 |
// some reasonable data points
|
776 |
noTicks = 0.3 * Math.sqrt(canvasWidth);
|
777 |
else
|
778 |
noTicks = 0.3 * Math.sqrt(canvasHeight);
|
779 |
|
780 |
var delta = (axis.max - axis.min) / noTicks,
|
781 |
size, generator, unit, formatter, i, magn, norm; |
782 |
|
783 |
if (axisOptions.mode == "time") { |
784 |
// pretty handling of time
|
785 |
|
786 |
// map of app. size of time units in milliseconds
|
787 |
var timeUnitSize = {
|
788 |
"second": 1000, |
789 |
"minute": 60 * 1000, |
790 |
"hour": 60 * 60 * 1000, |
791 |
"day": 24 * 60 * 60 * 1000, |
792 |
"month": 30 * 24 * 60 * 60 * 1000, |
793 |
"year": 365.2425 * 24 * 60 * 60 * 1000 |
794 |
}; |
795 |
|
796 |
|
797 |
// the allowed tick sizes, after 1 year we use
|
798 |
// an integer algorithm
|
799 |
var spec = [
|
800 |
[1, "second"], [2, "second"], [5, "second"], [10, "second"], |
801 |
[30, "second"], |
802 |
[1, "minute"], [2, "minute"], [5, "minute"], [10, "minute"], |
803 |
[30, "minute"], |
804 |
[1, "hour"], [2, "hour"], [4, "hour"], |
805 |
[8, "hour"], [12, "hour"], |
806 |
[1, "day"], [2, "day"], [3, "day"], |
807 |
[0.25, "month"], [0.5, "month"], [1, "month"], |
808 |
[2, "month"], [3, "month"], [6, "month"], |
809 |
[1, "year"] |
810 |
]; |
811 |
|
812 |
var minSize = 0; |
813 |
if (axisOptions.minTickSize != null) { |
814 |
if (typeof axisOptions.tickSize == "number") |
815 |
minSize = axisOptions.tickSize; |
816 |
else
|
817 |
minSize = axisOptions.minTickSize[0] * timeUnitSize[axisOptions.minTickSize[1]]; |
818 |
} |
819 |
|
820 |
for (i = 0; i < spec.length - 1; ++i) |
821 |
if (delta < (spec[i][0] * timeUnitSize[spec[i][1]] |
822 |
+ spec[i + 1][0] * timeUnitSize[spec[i + 1][1]]) / 2 |
823 |
&& spec[i][0] * timeUnitSize[spec[i][1]] >= minSize) |
824 |
break;
|
825 |
size = spec[i][0];
|
826 |
unit = spec[i][1];
|
827 |
|
828 |
// special-case the possibility of several years
|
829 |
if (unit == "year") { |
830 |
magn = Math.pow(10, Math.floor(Math.log(delta / timeUnitSize.year) / Math.LN10));
|
831 |
norm = (delta / timeUnitSize.year) / magn; |
832 |
if (norm < 1.5) |
833 |
size = 1;
|
834 |
else if (norm < 3) |
835 |
size = 2;
|
836 |
else if (norm < 7.5) |
837 |
size = 5;
|
838 |
else
|
839 |
size = 10;
|
840 |
|
841 |
size *= magn; |
842 |
} |
843 |
|
844 |
if (axisOptions.tickSize) {
|
845 |
size = axisOptions.tickSize[0];
|
846 |
unit = axisOptions.tickSize[1];
|
847 |
} |
848 |
|
849 |
generator = function(axis) { |
850 |
var ticks = [],
|
851 |
tickSize = axis.tickSize[0], unit = axis.tickSize[1], |
852 |
d = new Date(axis.min);
|
853 |
|
854 |
var step = tickSize * timeUnitSize[unit];
|
855 |
|
856 |
if (unit == "second") |
857 |
d.setUTCSeconds(floorInBase(d.getUTCSeconds(), tickSize)); |
858 |
if (unit == "minute") |
859 |
d.setUTCMinutes(floorInBase(d.getUTCMinutes(), tickSize)); |
860 |
if (unit == "hour") |
861 |
d.setUTCHours(floorInBase(d.getUTCHours(), tickSize)); |
862 |
if (unit == "month") |
863 |
d.setUTCMonth(floorInBase(d.getUTCMonth(), tickSize)); |
864 |
if (unit == "year") |
865 |
d.setUTCFullYear(floorInBase(d.getUTCFullYear(), tickSize)); |
866 |
|
867 |
// reset smaller components
|
868 |
d.setUTCMilliseconds(0);
|
869 |
if (step >= timeUnitSize.minute)
|
870 |
d.setUTCSeconds(0);
|
871 |
if (step >= timeUnitSize.hour)
|
872 |
d.setUTCMinutes(0);
|
873 |
if (step >= timeUnitSize.day)
|
874 |
d.setUTCHours(0);
|
875 |
if (step >= timeUnitSize.day * 4) |
876 |
d.setUTCDate(1);
|
877 |
if (step >= timeUnitSize.year)
|
878 |
d.setUTCMonth(0);
|
879 |
|
880 |
|
881 |
var carry = 0, v = Number.NaN, prev; |
882 |
do {
|
883 |
prev = v; |
884 |
v = d.getTime(); |
885 |
ticks.push({ v: v, label: axis.tickFormatter(v, axis) }); |
886 |
if (unit == "month") { |
887 |
if (tickSize < 1) { |
888 |
// a bit complicated - we'll divide the month
|
889 |
// up but we need to take care of fractions
|
890 |
// so we don't end up in the middle of a day
|
891 |
d.setUTCDate(1);
|
892 |
var start = d.getTime();
|
893 |
d.setUTCMonth(d.getUTCMonth() + 1);
|
894 |
var end = d.getTime();
|
895 |
d.setTime(v + carry * timeUnitSize.hour + (end - start) * tickSize); |
896 |
carry = d.getUTCHours(); |
897 |
d.setUTCHours(0);
|
898 |
} |
899 |
else
|
900 |
d.setUTCMonth(d.getUTCMonth() + tickSize); |
901 |
} |
902 |
else if (unit == "year") { |
903 |
d.setUTCFullYear(d.getUTCFullYear() + tickSize); |
904 |
} |
905 |
else
|
906 |
d.setTime(v + step); |
907 |
} while (v < axis.max && v != prev);
|
908 |
|
909 |
return ticks;
|
910 |
}; |
911 |
|
912 |
formatter = function (v, axis) { |
913 |
var d = new Date(v); |
914 |
|
915 |
// first check global format
|
916 |
if (axisOptions.timeformat != null) |
917 |
return $.plot.formatDate(d, axisOptions.timeformat, axisOptions.monthNames); |
918 |
|
919 |
var t = axis.tickSize[0] * timeUnitSize[axis.tickSize[1]]; |
920 |
var span = axis.max - axis.min;
|
921 |
var suffix = (axisOptions.twelveHourClock) ? " %p" : ""; |
922 |
|
923 |
if (t < timeUnitSize.minute)
|
924 |
fmt = "%h:%M:%S" + suffix;
|
925 |
else if (t < timeUnitSize.day) { |
926 |
if (span < 2 * timeUnitSize.day) |
927 |
fmt = "%h:%M" + suffix;
|
928 |
else
|
929 |
fmt = "%b %d %h:%M" + suffix;
|
930 |
} |
931 |
else if (t < timeUnitSize.month) |
932 |
fmt = "%b %d";
|
933 |
else if (t < timeUnitSize.year) { |
934 |
if (span < timeUnitSize.year)
|
935 |
fmt = "%b";
|
936 |
else
|
937 |
fmt = "%b %y";
|
938 |
} |
939 |
else
|
940 |
fmt = "%y";
|
941 |
|
942 |
return $.plot.formatDate(d, fmt, axisOptions.monthNames); |
943 |
}; |
944 |
} |
945 |
else {
|
946 |
// pretty rounding of base-10 numbers
|
947 |
var maxDec = axisOptions.tickDecimals;
|
948 |
var dec = -Math.floor(Math.log(delta) / Math.LN10);
|
949 |
if (maxDec != null && dec > maxDec) |
950 |
dec = maxDec; |
951 |
|
952 |
magn = Math.pow(10, -dec);
|
953 |
norm = delta / magn; // norm is between 1.0 and 10.0
|
954 |
|
955 |
if (norm < 1.5) |
956 |
size = 1;
|
957 |
else if (norm < 3) { |
958 |
size = 2;
|
959 |
// special case for 2.5, requires an extra decimal
|
960 |
if (norm > 2.25 && (maxDec == null || dec + 1 <= maxDec)) { |
961 |
size = 2.5;
|
962 |
++dec; |
963 |
} |
964 |
} |
965 |
else if (norm < 7.5) |
966 |
size = 5;
|
967 |
else
|
968 |
size = 10;
|
969 |
|
970 |
size *= magn; |
971 |
|
972 |
if (axisOptions.minTickSize != null && size < axisOptions.minTickSize) |
973 |
size = axisOptions.minTickSize; |
974 |
|
975 |
if (axisOptions.tickSize != null) |
976 |
size = axisOptions.tickSize; |
977 |
|
978 |
axis.tickDecimals = Math.max(0, (maxDec != null) ? maxDec : dec); |
979 |
|
980 |
generator = function (axis) { |
981 |
var ticks = [];
|
982 |
|
983 |
// spew out all possible ticks
|
984 |
var start = floorInBase(axis.min, axis.tickSize),
|
985 |
i = 0, v = Number.NaN, prev; |
986 |
do {
|
987 |
prev = v; |
988 |
v = start + i * axis.tickSize; |
989 |
ticks.push({ v: v, label: axis.tickFormatter(v, axis) }); |
990 |
++i; |
991 |
} while (v < axis.max && v != prev);
|
992 |
return ticks;
|
993 |
}; |
994 |
|
995 |
formatter = function (v, axis) { |
996 |
return v.toFixed(axis.tickDecimals);
|
997 |
}; |
998 |
} |
999 |
|
1000 |
axis.tickSize = unit ? [size, unit] : size; |
1001 |
axis.tickGenerator = generator; |
1002 |
if ($.isFunction(axisOptions.tickFormatter)) |
1003 |
axis.tickFormatter = function (v, axis) { return "" + axisOptions.tickFormatter(v, axis); }; |
1004 |
else
|
1005 |
axis.tickFormatter = formatter; |
1006 |
} |
1007 |
|
1008 |
function setTicks(axis, axisOptions) { |
1009 |
axis.ticks = []; |
1010 |
|
1011 |
if (!axis.used)
|
1012 |
return;
|
1013 |
|
1014 |
if (axisOptions.ticks == null) |
1015 |
axis.ticks = axis.tickGenerator(axis); |
1016 |
else if (typeof axisOptions.ticks == "number") { |
1017 |
if (axisOptions.ticks > 0) |
1018 |
axis.ticks = axis.tickGenerator(axis); |
1019 |
} |
1020 |
else if (axisOptions.ticks) { |
1021 |
var ticks = axisOptions.ticks;
|
1022 |
|
1023 |
if ($.isFunction(ticks)) |
1024 |
// generate the ticks
|
1025 |
ticks = ticks({ min: axis.min, max: axis.max }); |
1026 |
|
1027 |
// clean up the user-supplied ticks, copy them over
|
1028 |
var i, v;
|
1029 |
for (i = 0; i < ticks.length; ++i) { |
1030 |
var label = null; |
1031 |
var t = ticks[i];
|
1032 |
if (typeof t == "object") { |
1033 |
v = t[0];
|
1034 |
if (t.length > 1) |
1035 |
label = t[1];
|
1036 |
} |
1037 |
else
|
1038 |
v = t; |
1039 |
if (label == null) |
1040 |
label = axis.tickFormatter(v, axis); |
1041 |
axis.ticks[i] = { v: v, label: label }; |
1042 |
} |
1043 |
} |
1044 |
|
1045 |
if (axisOptions.autoscaleMargin != null && axis.ticks.length > 0) { |
1046 |
// snap to ticks
|
1047 |
if (axisOptions.min == null) |
1048 |
axis.min = Math.min(axis.min, axis.ticks[0].v);
|
1049 |
if (axisOptions.max == null && axis.ticks.length > 1) |
1050 |
axis.max = Math.max(axis.max, axis.ticks[axis.ticks.length - 1].v);
|
1051 |
} |
1052 |
} |
1053 |
|
1054 |
function draw() { |
1055 |
ctx.clearRect(0, 0, canvasWidth, canvasHeight); |
1056 |
|
1057 |
var grid = options.grid;
|
1058 |
|
1059 |
if (grid.show && !grid.aboveData)
|
1060 |
drawGrid(); |
1061 |
|
1062 |
for (var i = 0; i < series.length; ++i) |
1063 |
drawSeries(series[i]); |
1064 |
|
1065 |
executeHooks(hooks.draw, [ctx]); |
1066 |
|
1067 |
if (grid.show && grid.aboveData)
|
1068 |
drawGrid(); |
1069 |
} |
1070 |
|
1071 |
function extractRange(ranges, coord) { |
1072 |
var firstAxis = coord + "axis", |
1073 |
secondaryAxis = coord + "2axis",
|
1074 |
axis, from, to, reverse; |
1075 |
|
1076 |
if (ranges[firstAxis]) {
|
1077 |
axis = axes[firstAxis]; |
1078 |
from = ranges[firstAxis].from; |
1079 |
to = ranges[firstAxis].to; |
1080 |
} |
1081 |
else if (ranges[secondaryAxis]) { |
1082 |
axis = axes[secondaryAxis]; |
1083 |
from = ranges[secondaryAxis].from; |
1084 |
to = ranges[secondaryAxis].to; |
1085 |
} |
1086 |
else {
|
1087 |
// backwards-compat stuff - to be removed in future
|
1088 |
axis = axes[firstAxis]; |
1089 |
from = ranges[coord + "1"];
|
1090 |
to = ranges[coord + "2"];
|
1091 |
} |
1092 |
|
1093 |
// auto-reverse as an added bonus
|
1094 |
if (from != null && to != null && from > to) |
1095 |
return { from: to, to: from, axis: axis }; |
1096 |
|
1097 |
return { from: from, to: to, axis: axis }; |
1098 |
} |
1099 |
|
1100 |
function drawGrid() { |
1101 |
var i;
|
1102 |
|
1103 |
ctx.save(); |
1104 |
ctx.translate(plotOffset.left, plotOffset.top); |
1105 |
|
1106 |
// draw background, if any
|
1107 |
if (options.grid.backgroundColor) {
|
1108 |
ctx.fillStyle = getColorOrGradient(options.grid.backgroundColor, plotHeight, 0, "rgba(255, 255, 255, 0)"); |
1109 |
ctx.fillRect(0, 0, plotWidth, plotHeight); |
1110 |
} |
1111 |
|
1112 |
// draw markings
|
1113 |
var markings = options.grid.markings;
|
1114 |
if (markings) {
|
1115 |
if ($.isFunction(markings)) |
1116 |
// xmin etc. are backwards-compatible, to be removed in future
|
1117 |
markings = markings({ xmin: axes.xaxis.min, xmax: axes.xaxis.max, ymin: axes.yaxis.min, ymax: axes.yaxis.max, xaxis: axes.xaxis, yaxis: axes.yaxis, x2axis: axes.x2axis, y2axis: axes.y2axis }); |
1118 |
|
1119 |
for (i = 0; i < markings.length; ++i) { |
1120 |
var m = markings[i],
|
1121 |
xrange = extractRange(m, "x"),
|
1122 |
yrange = extractRange(m, "y");
|
1123 |
|
1124 |
// fill in missing
|
1125 |
if (xrange.from == null) |
1126 |
xrange.from = xrange.axis.min; |
1127 |
if (xrange.to == null) |
1128 |
xrange.to = xrange.axis.max; |
1129 |
if (yrange.from == null) |
1130 |
yrange.from = yrange.axis.min; |
1131 |
if (yrange.to == null) |
1132 |
yrange.to = yrange.axis.max; |
1133 |
|
1134 |
// clip
|
1135 |
if (xrange.to < xrange.axis.min || xrange.from > xrange.axis.max ||
|
1136 |
yrange.to < yrange.axis.min || yrange.from > yrange.axis.max) |
1137 |
continue;
|
1138 |
|
1139 |
xrange.from = Math.max(xrange.from, xrange.axis.min); |
1140 |
xrange.to = Math.min(xrange.to, xrange.axis.max); |
1141 |
yrange.from = Math.max(yrange.from, yrange.axis.min); |
1142 |
yrange.to = Math.min(yrange.to, yrange.axis.max); |
1143 |
|
1144 |
if (xrange.from == xrange.to && yrange.from == yrange.to)
|
1145 |
continue;
|
1146 |
|
1147 |
// then draw
|
1148 |
xrange.from = xrange.axis.p2c(xrange.from); |
1149 |
xrange.to = xrange.axis.p2c(xrange.to); |
1150 |
yrange.from = yrange.axis.p2c(yrange.from); |
1151 |
yrange.to = yrange.axis.p2c(yrange.to); |
1152 |
|
1153 |
if (xrange.from == xrange.to || yrange.from == yrange.to) {
|
1154 |
// draw line
|
1155 |
ctx.beginPath(); |
1156 |
ctx.strokeStyle = m.color || options.grid.markingsColor; |
1157 |
ctx.lineWidth = m.lineWidth || options.grid.markingsLineWidth; |
1158 |
//ctx.moveTo(Math.floor(xrange.from), yrange.from);
|
1159 |
//ctx.lineTo(Math.floor(xrange.to), yrange.to);
|
1160 |
ctx.moveTo(xrange.from, yrange.from); |
1161 |
ctx.lineTo(xrange.to, yrange.to); |
1162 |
ctx.stroke(); |
1163 |
} |
1164 |
else {
|
1165 |
// fill area
|
1166 |
ctx.fillStyle = m.color || options.grid.markingsColor; |
1167 |
ctx.fillRect(xrange.from, yrange.to, |
1168 |
xrange.to - xrange.from, |
1169 |
yrange.from - yrange.to); |
1170 |
} |
1171 |
} |
1172 |
} |
1173 |
|
1174 |
// draw the inner grid
|
1175 |
ctx.lineWidth = 1;
|
1176 |
ctx.strokeStyle = options.grid.tickColor; |
1177 |
ctx.beginPath(); |
1178 |
var v, axis = axes.xaxis;
|
1179 |
for (i = 0; i < axis.ticks.length; ++i) { |
1180 |
v = axis.ticks[i].v; |
1181 |
if (v <= axis.min || v >= axes.xaxis.max)
|
1182 |
continue; // skip those lying on the axes |
1183 |
|
1184 |
ctx.moveTo(Math.floor(axis.p2c(v)) + ctx.lineWidth/2, 0); |
1185 |
ctx.lineTo(Math.floor(axis.p2c(v)) + ctx.lineWidth/2, plotHeight);
|
1186 |
} |
1187 |
|
1188 |
axis = axes.yaxis; |
1189 |
for (i = 0; i < axis.ticks.length; ++i) { |
1190 |
v = axis.ticks[i].v; |
1191 |
if (v <= axis.min || v >= axis.max)
|
1192 |
continue;
|
1193 |
|
1194 |
ctx.moveTo(0, Math.floor(axis.p2c(v)) + ctx.lineWidth/2); |
1195 |
ctx.lineTo(plotWidth, Math.floor(axis.p2c(v)) + ctx.lineWidth/2);
|
1196 |
} |
1197 |
|
1198 |
axis = axes.x2axis; |
1199 |
for (i = 0; i < axis.ticks.length; ++i) { |
1200 |
v = axis.ticks[i].v; |
1201 |
if (v <= axis.min || v >= axis.max)
|
1202 |
continue;
|
1203 |
|
1204 |
ctx.moveTo(Math.floor(axis.p2c(v)) + ctx.lineWidth/2, -5); |
1205 |
ctx.lineTo(Math.floor(axis.p2c(v)) + ctx.lineWidth/2, 5); |
1206 |
} |
1207 |
|
1208 |
axis = axes.y2axis; |
1209 |
for (i = 0; i < axis.ticks.length; ++i) { |
1210 |
v = axis.ticks[i].v; |
1211 |
if (v <= axis.min || v >= axis.max)
|
1212 |
continue;
|
1213 |
|
1214 |
ctx.moveTo(plotWidth-5, Math.floor(axis.p2c(v)) + ctx.lineWidth/2); |
1215 |
ctx.lineTo(plotWidth+5, Math.floor(axis.p2c(v)) + ctx.lineWidth/2); |
1216 |
} |
1217 |
|
1218 |
ctx.stroke(); |
1219 |
|
1220 |
if (options.grid.borderWidth) {
|
1221 |
// draw border
|
1222 |
var bw = options.grid.borderWidth;
|
1223 |
ctx.lineWidth = bw; |
1224 |
ctx.strokeStyle = options.grid.borderColor; |
1225 |
ctx.strokeRect(-bw/2, -bw/2, plotWidth + bw, plotHeight + bw); |
1226 |
} |
1227 |
|
1228 |
ctx.restore(); |
1229 |
} |
1230 |
|
1231 |
function insertLabels() { |
1232 |
placeholder.find(".tickLabels").remove();
|
1233 |
|
1234 |
var html = ['<div class="tickLabels" style="font-size:smaller;color:' + options.grid.color + '">']; |
1235 |
|
1236 |
function addLabels(axis, labelGenerator) { |
1237 |
for (var i = 0; i < axis.ticks.length; ++i) { |
1238 |
var tick = axis.ticks[i];
|
1239 |
if (!tick.label || tick.v < axis.min || tick.v > axis.max)
|
1240 |
continue;
|
1241 |
html.push(labelGenerator(tick, axis)); |
1242 |
} |
1243 |
} |
1244 |
|
1245 |
var margin = options.grid.labelMargin + options.grid.borderWidth;
|
1246 |
|
1247 |
addLabels(axes.xaxis, function (tick, axis) {
|
1248 |
return '<div style="position:absolute;top:' + (plotOffset.top + plotHeight + margin) + 'px;left:' + Math.round(plotOffset.left + axis.p2c(tick.v) - axis.labelWidth/2) + 'px;width:' + axis.labelWidth + 'px;text-align:center" class="tickLabel">' + tick.label + "</div>"; |
1249 |
}); |
1250 |
|
1251 |
|
1252 |
addLabels(axes.yaxis, function (tick, axis) {
|
1253 |
return '<div style="position:absolute;top:' + Math.round(plotOffset.top + axis.p2c(tick.v) - axis.labelHeight/2) + 'px;right:' + (plotOffset.right + plotWidth + margin) + 'px;width:' + axis.labelWidth + 'px;text-align:right" class="tickLabel">' + tick.label + "</div>"; |
1254 |
}); |
1255 |
|
1256 |
addLabels(axes.x2axis, function (tick, axis) {
|
1257 |
return '<div style="position:absolute;bottom:' + (plotOffset.bottom + plotHeight + margin) + 'px;left:' + Math.round(plotOffset.left + axis.p2c(tick.v) - axis.labelWidth/2) + 'px;width:' + axis.labelWidth + 'px;text-align:center" class="tickLabel">' + tick.label + "</div>"; |
1258 |
}); |
1259 |
|
1260 |
addLabels(axes.y2axis, function (tick, axis) {
|
1261 |
return '<div style="position:absolute;top:' + Math.round(plotOffset.top + axis.p2c(tick.v) - axis.labelHeight/2) + 'px;left:' + (plotOffset.left + plotWidth + margin) +'px;width:' + axis.labelWidth + 'px;text-align:left" class="tickLabel">' + tick.label + "</div>"; |
1262 |
}); |
1263 |
|
1264 |
html.push('</div>');
|
1265 |
|
1266 |
placeholder.append(html.join(""));
|
1267 |
} |
1268 |
|
1269 |
function drawSeries(series) { |
1270 |
if (series.lines.show)
|
1271 |
drawSeriesLines(series); |
1272 |
if (series.bars.show)
|
1273 |
drawSeriesBars(series); |
1274 |
if (series.points.show)
|
1275 |
drawSeriesPoints(series); |
1276 |
} |
1277 |
|
1278 |
function drawSeriesLines(series) { |
1279 |
function plotLine(datapoints, xoffset, yoffset, axisx, axisy) { |
1280 |
var points = datapoints.points,
|
1281 |
ps = datapoints.pointsize, |
1282 |
prevx = null, prevy = null; |
1283 |
|
1284 |
ctx.beginPath(); |
1285 |
for (var i = ps; i < points.length; i += ps) { |
1286 |
var x1 = points[i - ps], y1 = points[i - ps + 1], |
1287 |
x2 = points[i], y2 = points[i + 1];
|
1288 |
|
1289 |
if (x1 == null || x2 == null) |
1290 |
continue;
|
1291 |
|
1292 |
// clip with ymin
|
1293 |
if (y1 <= y2 && y1 < axisy.min) {
|
1294 |
if (y2 < axisy.min)
|
1295 |
continue; // line segment is outside |
1296 |
// compute new intersection point
|
1297 |
x1 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1; |
1298 |
y1 = axisy.min; |
1299 |
} |
1300 |
else if (y2 <= y1 && y2 < axisy.min) { |
1301 |
if (y1 < axisy.min)
|
1302 |
continue;
|
1303 |
x2 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1; |
1304 |
y2 = axisy.min; |
1305 |
} |
1306 |
|
1307 |
// clip with ymax
|
1308 |
if (y1 >= y2 && y1 > axisy.max) {
|
1309 |
if (y2 > axisy.max)
|
1310 |
continue;
|
1311 |
x1 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1; |
1312 |
y1 = axisy.max; |
1313 |
} |
1314 |
else if (y2 >= y1 && y2 > axisy.max) { |
1315 |
if (y1 > axisy.max)
|
1316 |
continue;
|
1317 |
x2 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1; |
1318 |
y2 = axisy.max; |
1319 |
} |
1320 |
|
1321 |
// clip with xmin
|
1322 |
if (x1 <= x2 && x1 < axisx.min) {
|
1323 |
if (x2 < axisx.min)
|
1324 |
continue;
|
1325 |
y1 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1; |
1326 |
x1 = axisx.min; |
1327 |
} |
1328 |
else if (x2 <= x1 && x2 < axisx.min) { |
1329 |
if (x1 < axisx.min)
|
1330 |
continue;
|
1331 |
y2 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1; |
1332 |
x2 = axisx.min; |
1333 |
} |
1334 |
|
1335 |
// clip with xmax
|
1336 |
if (x1 >= x2 && x1 > axisx.max) {
|
1337 |
if (x2 > axisx.max)
|
1338 |
continue;
|
1339 |
y1 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1; |
1340 |
x1 = axisx.max; |
1341 |
} |
1342 |
else if (x2 >= x1 && x2 > axisx.max) { |
1343 |
if (x1 > axisx.max)
|
1344 |
continue;
|
1345 |
y2 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1; |
1346 |
x2 = axisx.max; |
1347 |
} |
1348 |
|
1349 |
if (x1 != prevx || y1 != prevy)
|
1350 |
ctx.moveTo(axisx.p2c(x1) + xoffset, axisy.p2c(y1) + yoffset); |
1351 |
|
1352 |
prevx = x2; |
1353 |
prevy = y2; |
1354 |
ctx.lineTo(axisx.p2c(x2) + xoffset, axisy.p2c(y2) + yoffset); |
1355 |
} |
1356 |
ctx.stroke(); |
1357 |
} |
1358 |
|
1359 |
function plotLineArea(datapoints, axisx, axisy) { |
1360 |
var points = datapoints.points,
|
1361 |
ps = datapoints.pointsize, |
1362 |
bottom = Math.min(Math.max(0, axisy.min), axisy.max),
|
1363 |
top, lastX = 0, areaOpen = false; |
1364 |
|
1365 |
for (var i = ps; i < points.length; i += ps) { |
1366 |
var x1 = points[i - ps], y1 = points[i - ps + 1], |
1367 |
x2 = points[i], y2 = points[i + 1];
|
1368 |
|
1369 |
if (areaOpen && x1 != null && x2 == null) { |
1370 |
// close area
|
1371 |
ctx.lineTo(axisx.p2c(lastX), axisy.p2c(bottom)); |
1372 |
ctx.fill(); |
1373 |
areaOpen = false;
|
1374 |
continue;
|
1375 |
} |
1376 |
|
1377 |
if (x1 == null || x2 == null) |
1378 |
continue;
|
1379 |
|
1380 |
// clip x values
|
1381 |
|
1382 |
// clip with xmin
|
1383 |
if (x1 <= x2 && x1 < axisx.min) {
|
1384 |
if (x2 < axisx.min)
|
1385 |
continue;
|
1386 |
y1 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1; |
1387 |
x1 = axisx.min; |
1388 |
} |
1389 |
else if (x2 <= x1 && x2 < axisx.min) { |
1390 |
if (x1 < axisx.min)
|
1391 |
continue;
|
1392 |
y2 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1; |
1393 |
x2 = axisx.min; |
1394 |
} |
1395 |
|
1396 |
// clip with xmax
|
1397 |
if (x1 >= x2 && x1 > axisx.max) {
|
1398 |
if (x2 > axisx.max)
|
1399 |
continue;
|
1400 |
y1 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1; |
1401 |
x1 = axisx.max; |
1402 |
} |
1403 |
else if (x2 >= x1 && x2 > axisx.max) { |
1404 |
if (x1 > axisx.max)
|
1405 |
continue;
|
1406 |
y2 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1; |
1407 |
x2 = axisx.max; |
1408 |
} |
1409 |
|
1410 |
if (!areaOpen) {
|
1411 |
// open area
|
1412 |
ctx.beginPath(); |
1413 |
ctx.moveTo(axisx.p2c(x1), axisy.p2c(bottom)); |
1414 |
areaOpen = true;
|
1415 |
} |
1416 |
|
1417 |
// now first check the case where both is outside
|
1418 |
if (y1 >= axisy.max && y2 >= axisy.max) {
|
1419 |
ctx.lineTo(axisx.p2c(x1), axisy.p2c(axisy.max)); |
1420 |
ctx.lineTo(axisx.p2c(x2), axisy.p2c(axisy.max)); |
1421 |
lastX = x2; |
1422 |
continue;
|
1423 |
} |
1424 |
else if (y1 <= axisy.min && y2 <= axisy.min) { |
1425 |
ctx.lineTo(axisx.p2c(x1), axisy.p2c(axisy.min)); |
1426 |
ctx.lineTo(axisx.p2c(x2), axisy.p2c(axisy.min)); |
1427 |
lastX = x2; |
1428 |
continue;
|
1429 |
} |
1430 |
|
1431 |
// else it's a bit more complicated, there might
|
1432 |
// be two rectangles and two triangles we need to fill
|
1433 |
// in; to find these keep track of the current x values
|
1434 |
var x1old = x1, x2old = x2;
|
1435 |
|
1436 |
// and clip the y values, without shortcutting
|
1437 |
|
1438 |
// clip with ymin
|
1439 |
if (y1 <= y2 && y1 < axisy.min && y2 >= axisy.min) {
|
1440 |
x1 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1; |
1441 |
y1 = axisy.min; |
1442 |
} |
1443 |
else if (y2 <= y1 && y2 < axisy.min && y1 >= axisy.min) { |
1444 |
x2 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1; |
1445 |
y2 = axisy.min; |
1446 |
} |
1447 |
|
1448 |
// clip with ymax
|
1449 |
if (y1 >= y2 && y1 > axisy.max && y2 <= axisy.max) {
|
1450 |
x1 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1; |
1451 |
y1 = axisy.max; |
1452 |
} |
1453 |
else if (y2 >= y1 && y2 > axisy.max && y1 <= axisy.max) { |
1454 |
x2 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1; |
1455 |
y2 = axisy.max; |
1456 |
} |
1457 |
|
1458 |
|
1459 |
// if the x value was changed we got a rectangle
|
1460 |
// to fill
|
1461 |
if (x1 != x1old) {
|
1462 |
if (y1 <= axisy.min)
|
1463 |
top = axisy.min; |
1464 |
else
|
1465 |
top = axisy.max; |
1466 |
|
1467 |
ctx.lineTo(axisx.p2c(x1old), axisy.p2c(top)); |
1468 |
ctx.lineTo(axisx.p2c(x1), axisy.p2c(top)); |
1469 |
} |
1470 |
|
1471 |
// fill the triangles
|
1472 |
ctx.lineTo(axisx.p2c(x1), axisy.p2c(y1)); |
1473 |
ctx.lineTo(axisx.p2c(x2), axisy.p2c(y2)); |
1474 |
|
1475 |
// fill the other rectangle if it's there
|
1476 |
if (x2 != x2old) {
|
1477 |
if (y2 <= axisy.min)
|
1478 |
top = axisy.min; |
1479 |
else
|
1480 |
top = axisy.max; |
1481 |
|
1482 |
ctx.lineTo(axisx.p2c(x2), axisy.p2c(top)); |
1483 |
ctx.lineTo(axisx.p2c(x2old), axisy.p2c(top)); |
1484 |
} |
1485 |
|
1486 |
lastX = Math.max(x2, x2old); |
1487 |
} |
1488 |
|
1489 |
if (areaOpen) {
|
1490 |
ctx.lineTo(axisx.p2c(lastX), axisy.p2c(bottom)); |
1491 |
ctx.fill(); |
1492 |
} |
1493 |
} |
1494 |
|
1495 |
ctx.save(); |
1496 |
ctx.translate(plotOffset.left, plotOffset.top); |
1497 |
ctx.lineJoin = "round";
|
1498 |
|
1499 |
var lw = series.lines.lineWidth,
|
1500 |
sw = series.shadowSize; |
1501 |
// FIXME: consider another form of shadow when filling is turned on
|
1502 |
if (lw > 0 && sw > 0) { |
1503 |
// draw shadow as a thick and thin line with transparency
|
1504 |
ctx.lineWidth = sw; |
1505 |
ctx.strokeStyle = "rgba(0,0,0,0.1)";
|
1506 |
// position shadow at angle from the mid of line
|
1507 |
var angle = Math.PI/18; |
1508 |
plotLine(series.datapoints, Math.sin(angle) * (lw/2 + sw/2), Math.cos(angle) * (lw/2 + sw/2), series.xaxis, series.yaxis); |
1509 |
ctx.lineWidth = sw/2;
|
1510 |
plotLine(series.datapoints, Math.sin(angle) * (lw/2 + sw/4), Math.cos(angle) * (lw/2 + sw/4), series.xaxis, series.yaxis); |
1511 |
} |
1512 |
|
1513 |
ctx.lineWidth = lw; |
1514 |
ctx.strokeStyle = series.color; |
1515 |
var fillStyle = getFillStyle(series.lines, series.color, 0, plotHeight); |
1516 |
if (fillStyle) {
|
1517 |
ctx.fillStyle = fillStyle; |
1518 |
plotLineArea(series.datapoints, series.xaxis, series.yaxis); |
1519 |
} |
1520 |
|
1521 |
if (lw > 0) |
1522 |
plotLine(series.datapoints, 0, 0, series.xaxis, series.yaxis); |
1523 |
ctx.restore(); |
1524 |
} |
1525 |
|
1526 |
function drawSeriesPoints(series) { |
1527 |
function plotPoints(datapoints, radius, fillStyle, offset, circumference, axisx, axisy) { |
1528 |
var points = datapoints.points, ps = datapoints.pointsize;
|
1529 |
|
1530 |
for (var i = 0; i < points.length; i += ps) { |
1531 |
var x = points[i], y = points[i + 1]; |
1532 |
if (x == null || x < axisx.min || x > axisx.max || y < axisy.min || y > axisy.max) |
1533 |
continue;
|
1534 |
|
1535 |
ctx.beginPath(); |
1536 |
ctx.arc(axisx.p2c(x), axisy.p2c(y) + offset, radius, 0, circumference, false); |
1537 |
if (fillStyle) {
|
1538 |
ctx.fillStyle = fillStyle; |
1539 |
ctx.fill(); |
1540 |
} |
1541 |
ctx.stroke(); |
1542 |
} |
1543 |
} |
1544 |
|
1545 |
ctx.save(); |
1546 |
ctx.translate(plotOffset.left, plotOffset.top); |
1547 |
|
1548 |
var lw = series.lines.lineWidth,
|
1549 |
sw = series.shadowSize, |
1550 |
radius = series.points.radius; |
1551 |
if (lw > 0 && sw > 0) { |
1552 |
// draw shadow in two steps
|
1553 |
var w = sw / 2; |
1554 |
ctx.lineWidth = w; |
1555 |
ctx.strokeStyle = "rgba(0,0,0,0.1)";
|
1556 |
plotPoints(series.datapoints, radius, null, w + w/2, Math.PI, |
1557 |
series.xaxis, series.yaxis); |
1558 |
|
1559 |
ctx.strokeStyle = "rgba(0,0,0,0.2)";
|
1560 |
plotPoints(series.datapoints, radius, null, w/2, Math.PI, |
1561 |
series.xaxis, series.yaxis); |
1562 |
} |
1563 |
|
1564 |
ctx.lineWidth = lw; |
1565 |
ctx.strokeStyle = series.color; |
1566 |
plotPoints(series.datapoints, radius, |
1567 |
getFillStyle(series.points, series.color), 0, 2 * Math.PI, |
1568 |
series.xaxis, series.yaxis); |
1569 |
ctx.restore(); |
1570 |
} |
1571 |
|
1572 |
function drawBar(x, y, b, barLeft, barRight, offset, fillStyleCallback, axisx, axisy, c, horizontal) { |
1573 |
var left, right, bottom, top,
|
1574 |
drawLeft, drawRight, drawTop, drawBottom, |
1575 |
tmp; |
1576 |
|
1577 |
if (horizontal) {
|
1578 |
drawBottom = drawRight = drawTop = true;
|
1579 |
drawLeft = false;
|
1580 |
left = b; |
1581 |
right = x; |
1582 |
top = y + barLeft; |
1583 |
bottom = y + barRight; |
1584 |
|
1585 |
// account for negative bars
|
1586 |
if (right < left) {
|
1587 |
tmp = right; |
1588 |
right = left; |
1589 |
left = tmp; |
1590 |
drawLeft = true;
|
1591 |
drawRight = false;
|
1592 |
} |
1593 |
} |
1594 |
else {
|
1595 |
drawLeft = drawRight = drawTop = true;
|
1596 |
drawBottom = false;
|
1597 |
left = x + barLeft; |
1598 |
right = x + barRight; |
1599 |
bottom = b; |
1600 |
top = y; |
1601 |
|
1602 |
// account for negative bars
|
1603 |
if (top < bottom) {
|
1604 |
tmp = top; |
1605 |
top = bottom; |
1606 |
bottom = tmp; |
1607 |
drawBottom = true;
|
1608 |
drawTop = false;
|
1609 |
} |
1610 |
} |
1611 |
|
1612 |
// clip
|
1613 |
if (right < axisx.min || left > axisx.max ||
|
1614 |
top < axisy.min || bottom > axisy.max) |
1615 |
return;
|
1616 |
|
1617 |
if (left < axisx.min) {
|
1618 |
left = axisx.min; |
1619 |
drawLeft = false;
|
1620 |
} |
1621 |
|
1622 |
if (right > axisx.max) {
|
1623 |
right = axisx.max; |
1624 |
drawRight = false;
|
1625 |
} |
1626 |
|
1627 |
if (bottom < axisy.min) {
|
1628 |
bottom = axisy.min; |
1629 |
drawBottom = false;
|
1630 |
} |
1631 |
|
1632 |
if (top > axisy.max) {
|
1633 |
top = axisy.max; |
1634 |
drawTop = false;
|
1635 |
} |
1636 |
|
1637 |
left = axisx.p2c(left); |
1638 |
bottom = axisy.p2c(bottom); |
1639 |
right = axisx.p2c(right); |
1640 |
top = axisy.p2c(top); |
1641 |
|
1642 |
// fill the bar
|
1643 |
if (fillStyleCallback) {
|
1644 |
c.beginPath(); |
1645 |
c.moveTo(left, bottom); |
1646 |
c.lineTo(left, top); |
1647 |
c.lineTo(right, top); |
1648 |
c.lineTo(right, bottom); |
1649 |
c.fillStyle = fillStyleCallback(bottom, top); |
1650 |
c.fill(); |
1651 |
} |
1652 |
|
1653 |
// draw outline
|
1654 |
if (drawLeft || drawRight || drawTop || drawBottom) {
|
1655 |
c.beginPath(); |
1656 |
|
1657 |
// FIXME: inline moveTo is buggy with excanvas
|
1658 |
c.moveTo(left, bottom + offset); |
1659 |
if (drawLeft)
|
1660 |
c.lineTo(left, top + offset); |
1661 |
else
|
1662 |
c.moveTo(left, top + offset); |
1663 |
if (drawTop)
|
1664 |
c.lineTo(right, top + offset); |
1665 |
else
|
1666 |
c.moveTo(right, top + offset); |
1667 |
if (drawRight)
|
1668 |
c.lineTo(right, bottom + offset); |
1669 |
else
|
1670 |
c.moveTo(right, bottom + offset); |
1671 |
if (drawBottom)
|
1672 |
c.lineTo(left, bottom + offset); |
1673 |
else
|
1674 |
c.moveTo(left, bottom + offset); |
1675 |
c.stroke(); |
1676 |
} |
1677 |
} |
1678 |
|
1679 |
function drawSeriesBars(series) { |
1680 |
function plotBars(datapoints, barLeft, barRight, offset, fillStyleCallback, axisx, axisy) { |
1681 |
var points = datapoints.points, ps = datapoints.pointsize;
|
1682 |
|
1683 |
for (var i = 0; i < points.length; i += ps) { |
1684 |
if (points[i] == null) |
1685 |
continue;
|
1686 |
drawBar(points[i], points[i + 1], points[i + 2], barLeft, barRight, offset, fillStyleCallback, axisx, axisy, ctx, series.bars.horizontal); |
1687 |
} |
1688 |
} |
1689 |
|
1690 |
ctx.save(); |
1691 |
ctx.translate(plotOffset.left, plotOffset.top); |
1692 |
|
1693 |
// FIXME: figure out a way to add shadows (for instance along the right edge)
|
1694 |
ctx.lineWidth = series.bars.lineWidth; |
1695 |
ctx.strokeStyle = series.color; |
1696 |
var barLeft = series.bars.align == "left" ? 0 : -series.bars.barWidth/2; |
1697 |
var fillStyleCallback = series.bars.fill ? function (bottom, top) { return getFillStyle(series.bars, series.color, bottom, top); } : null; |
1698 |
plotBars(series.datapoints, barLeft, barLeft + series.bars.barWidth, 0, fillStyleCallback, series.xaxis, series.yaxis);
|
1699 |
ctx.restore(); |
1700 |
} |
1701 |
|
1702 |
function getFillStyle(filloptions, seriesColor, bottom, top) { |
1703 |
var fill = filloptions.fill;
|
1704 |
if (!fill)
|
1705 |
return null; |
1706 |
|
1707 |
if (filloptions.fillColor)
|
1708 |
return getColorOrGradient(filloptions.fillColor, bottom, top, seriesColor);
|
1709 |
|
1710 |
var c = $.color.parse(seriesColor); |
1711 |
c.a = typeof fill == "number" ? fill : 0.4; |
1712 |
c.normalize(); |
1713 |
return c.toString();
|
1714 |
} |
1715 |
|
1716 |
function insertLegend() { |
1717 |
placeholder.find(".legend").remove();
|
1718 |
|
1719 |
if (!options.legend.show)
|
1720 |
return;
|
1721 |
|
1722 |
var fragments = [], rowStarted = false, |
1723 |
lf = options.legend.labelFormatter, s, label; |
1724 |
for (i = 0; i < series.length; ++i) { |
1725 |
s = series[i]; |
1726 |
label = s.label; |
1727 |
if (!label)
|
1728 |
continue;
|
1729 |
|
1730 |
if (i % options.legend.noColumns == 0) { |
1731 |
if (rowStarted)
|
1732 |
fragments.push('</tr>');
|
1733 |
fragments.push('<tr>');
|
1734 |
rowStarted = true;
|
1735 |
} |
1736 |
|
1737 |
if (lf)
|
1738 |
label = lf(label, s); |
1739 |
|
1740 |
fragments.push( |
1741 |
'<td class="legendColorBox"><div style="border:1px solid ' + options.legend.labelBoxBorderColor + ';padding:1px"><div style="width:4px;height:0;border:5px solid ' + s.color + ';overflow:hidden"></div></div></td>' + |
1742 |
'<td class="legendLabel">' + label + '</td>'); |
1743 |
} |
1744 |
if (rowStarted)
|
1745 |
fragments.push('</tr>');
|
1746 |
|
1747 |
if (fragments.length == 0) |
1748 |
return;
|
1749 |
|
1750 |
var table = '<table style="font-size:smaller;color:' + options.grid.color + '">' + fragments.join("") + '</table>'; |
1751 |
if (options.legend.container != null) |
1752 |
$(options.legend.container).html(table);
|
1753 |
else {
|
1754 |
var pos = "", |
1755 |
p = options.legend.position, |
1756 |
m = options.legend.margin; |
1757 |
if (m[0] == null) |
1758 |
m = [m, m]; |
1759 |
if (p.charAt(0) == "n") |
1760 |
pos += 'top:' + (m[1] + plotOffset.top) + 'px;'; |
1761 |
else if (p.charAt(0) == "s") |
1762 |
pos += 'bottom:' + (m[1] + plotOffset.bottom) + 'px;'; |
1763 |
if (p.charAt(1) == "e") |
1764 |
pos += 'right:' + (m[0] + plotOffset.right) + 'px;'; |
1765 |
else if (p.charAt(1) == "w") |
1766 |
pos += 'left:' + (m[0] + plotOffset.left) + 'px;'; |
1767 |
var legend = $('<div class="legend">' + table.replace('style="', 'style="position:absolute;' + pos +';') + '</div>').appendTo(placeholder); |
1768 |
if (options.legend.backgroundOpacity != 0.0) { |
1769 |
// put in the transparent background
|
1770 |
// separately to avoid blended labels and
|
1771 |
// label boxes
|
1772 |
var c = options.legend.backgroundColor;
|
1773 |
if (c == null) { |
1774 |
c = options.grid.backgroundColor; |
1775 |
if (c && typeof c == "string") |
1776 |
c = $.color.parse(c);
|
1777 |
else
|
1778 |
c = $.color.extract(legend, 'background-color'); |
1779 |
c.a = 1;
|
1780 |
c = c.toString(); |
1781 |
} |
1782 |
var div = legend.children();
|
1783 |
$('<div style="position:absolute;width:' + div.width() + 'px;height:' + div.height() + 'px;' + pos +'background-color:' + c + ';"> </div>').prependTo(legend).css('opacity', options.legend.backgroundOpacity); |
1784 |
} |
1785 |
} |
1786 |
} |
1787 |
|
1788 |
|
1789 |
// interactive features
|
1790 |
|
1791 |
var highlights = [],
|
1792 |
redrawTimeout = null;
|
1793 |
|
1794 |
// returns the data item the mouse is over, or null if none is found
|
1795 |
function findNearbyItem(mouseX, mouseY, seriesFilter) { |
1796 |
var maxDistance = options.grid.mouseActiveRadius,
|
1797 |
smallestDistance = maxDistance * maxDistance + 1,
|
1798 |
item = null, foundPoint = false, i, j; |
1799 |
|
1800 |
for (i = 0; i < series.length; ++i) { |
1801 |
if (!seriesFilter(series[i]))
|
1802 |
continue;
|
1803 |
|
1804 |
var s = series[i],
|
1805 |
axisx = s.xaxis, |
1806 |
axisy = s.yaxis, |
1807 |
points = s.datapoints.points, |
1808 |
ps = s.datapoints.pointsize, |
1809 |
mx = axisx.c2p(mouseX), // precompute some stuff to make the loop faster
|
1810 |
my = axisy.c2p(mouseY), |
1811 |
maxx = maxDistance / axisx.scale, |
1812 |
maxy = maxDistance / axisy.scale; |
1813 |
|
1814 |
if (s.lines.show || s.points.show) {
|
1815 |
for (j = 0; j < points.length; j += ps) { |
1816 |
var x = points[j], y = points[j + 1]; |
1817 |
if (x == null) |
1818 |
continue;
|
1819 |
|
1820 |
// For points and lines, the cursor must be within a
|
1821 |
// certain distance to the data point
|
1822 |
if (x - mx > maxx || x - mx < -maxx ||
|
1823 |
y - my > maxy || y - my < -maxy) |
1824 |
continue;
|
1825 |
|
1826 |
// We have to calculate distances in pixels, not in
|
1827 |
// data units, because the scales of the axes may be different
|
1828 |
var dx = Math.abs(axisx.p2c(x) - mouseX),
|
1829 |
dy = Math.abs(axisy.p2c(y) - mouseY), |
1830 |
dist = dx * dx + dy * dy; // we save the sqrt
|
1831 |
|
1832 |
// use <= to ensure last point takes precedence
|
1833 |
// (last generally means on top of)
|
1834 |
if (dist <= smallestDistance) {
|
1835 |
smallestDistance = dist; |
1836 |
item = [i, j / ps]; |
1837 |
} |
1838 |
} |
1839 |
} |
1840 |
|
1841 |
if (s.bars.show && !item) { // no other point can be nearby |
1842 |
var barLeft = s.bars.align == "left" ? 0 : -s.bars.barWidth/2, |
1843 |
barRight = barLeft + s.bars.barWidth; |
1844 |
|
1845 |
for (j = 0; j < points.length; j += ps) { |
1846 |
var x = points[j], y = points[j + 1], b = points[j + 2]; |
1847 |
if (x == null) |
1848 |
continue;
|
1849 |
|
1850 |
// for a bar graph, the cursor must be inside the bar
|
1851 |
if (series[i].bars.horizontal ?
|
1852 |
(mx <= Math.max(b, x) && mx >= Math.min(b, x) && |
1853 |
my >= y + barLeft && my <= y + barRight) : |
1854 |
(mx >= x + barLeft && mx <= x + barRight && |
1855 |
my >= Math.min(b, y) && my <= Math.max(b, y))) |
1856 |
item = [i, j / ps]; |
1857 |
} |
1858 |
} |
1859 |
} |
1860 |
|
1861 |
if (item) {
|
1862 |
i = item[0];
|
1863 |
j = item[1];
|
1864 |
ps = series[i].datapoints.pointsize; |
1865 |
|
1866 |
return { datapoint: series[i].datapoints.points.slice(j * ps, (j + 1) * ps), |
1867 |
dataIndex: j,
|
1868 |
series: series[i],
|
1869 |
seriesIndex: i };
|
1870 |
} |
1871 |
|
1872 |
return null; |
1873 |
} |
1874 |
|
1875 |
function onMouseMove(e) { |
1876 |
if (options.grid.hoverable)
|
1877 |
triggerClickHoverEvent("plothover", e,
|
1878 |
function (s) { return s["hoverable"] != false; }); |
1879 |
} |
1880 |
|
1881 |
function onClick(e) { |
1882 |
triggerClickHoverEvent("plotclick", e,
|
1883 |
function (s) { return s["clickable"] != false; }); |
1884 |
} |
1885 |
|
1886 |
// trigger click or hover event (they send the same parameters
|
1887 |
// so we share their code)
|
1888 |
function triggerClickHoverEvent(eventname, event, seriesFilter) { |
1889 |
var offset = eventHolder.offset(),
|
1890 |
pos = { pageX: event.pageX, pageY: event.pageY }, |
1891 |
canvasX = event.pageX - offset.left - plotOffset.left, |
1892 |
canvasY = event.pageY - offset.top - plotOffset.top; |
1893 |
|
1894 |
if (axes.xaxis.used)
|
1895 |
pos.x = axes.xaxis.c2p(canvasX); |
1896 |
if (axes.yaxis.used)
|
1897 |
pos.y = axes.yaxis.c2p(canvasY); |
1898 |
if (axes.x2axis.used)
|
1899 |
pos.x2 = axes.x2axis.c2p(canvasX); |
1900 |
if (axes.y2axis.used)
|
1901 |
pos.y2 = axes.y2axis.c2p(canvasY); |
1902 |
|
1903 |
var item = findNearbyItem(canvasX, canvasY, seriesFilter);
|
1904 |
|
1905 |
if (item) {
|
1906 |
// fill in mouse pos for any listeners out there
|
1907 |
item.pageX = parseInt(item.series.xaxis.p2c(item.datapoint[0]) + offset.left + plotOffset.left);
|
1908 |
item.pageY = parseInt(item.series.yaxis.p2c(item.datapoint[1]) + offset.top + plotOffset.top);
|
1909 |
} |
1910 |
|
1911 |
if (options.grid.autoHighlight) {
|
1912 |
// clear auto-highlights
|
1913 |
for (var i = 0; i < highlights.length; ++i) { |
1914 |
var h = highlights[i];
|
1915 |
if (h.auto == eventname &&
|
1916 |
!(item && h.series == item.series && h.point == item.datapoint)) |
1917 |
unhighlight(h.series, h.point); |
1918 |
} |
1919 |
|
1920 |
if (item)
|
1921 |
highlight(item.series, item.datapoint, eventname); |
1922 |
} |
1923 |
|
1924 |
placeholder.trigger(eventname, [ pos, item ]); |
1925 |
} |
1926 |
|
1927 |
function triggerRedrawOverlay() { |
1928 |
if (!redrawTimeout)
|
1929 |
redrawTimeout = setTimeout(drawOverlay, 30);
|
1930 |
} |
1931 |
|
1932 |
function drawOverlay() { |
1933 |
redrawTimeout = null;
|
1934 |
|
1935 |
// draw highlights
|
1936 |
octx.save(); |
1937 |
octx.clearRect(0, 0, canvasWidth, canvasHeight); |
1938 |
octx.translate(plotOffset.left, plotOffset.top); |
1939 |
|
1940 |
var i, hi;
|
1941 |
for (i = 0; i < highlights.length; ++i) { |
1942 |
hi = highlights[i]; |
1943 |
|
1944 |
if (hi.series.bars.show)
|
1945 |
drawBarHighlight(hi.series, hi.point); |
1946 |
else
|
1947 |
drawPointHighlight(hi.series, hi.point); |
1948 |
} |
1949 |
octx.restore(); |
1950 |
|
1951 |
executeHooks(hooks.drawOverlay, [octx]); |
1952 |
} |
1953 |
|
1954 |
function highlight(s, point, auto) { |
1955 |
if (typeof s == "number") |
1956 |
s = series[s]; |
1957 |
|
1958 |
if (typeof point == "number") |
1959 |
point = s.data[point]; |
1960 |
|
1961 |
var i = indexOfHighlight(s, point);
|
1962 |
if (i == -1) { |
1963 |
highlights.push({ series: s, point: point, auto: auto }); |
1964 |
|
1965 |
triggerRedrawOverlay(); |
1966 |
} |
1967 |
else if (!auto) |
1968 |
highlights[i].auto = false;
|
1969 |
} |
1970 |
|
1971 |
function unhighlight(s, point) { |
1972 |
if (s == null && point == null) { |
1973 |
highlights = []; |
1974 |
triggerRedrawOverlay(); |
1975 |
} |
1976 |
|
1977 |
if (typeof s == "number") |
1978 |
s = series[s]; |
1979 |
|
1980 |
if (typeof point == "number") |
1981 |
point = s.data[point]; |
1982 |
|
1983 |
var i = indexOfHighlight(s, point);
|
1984 |
if (i != -1) { |
1985 |
highlights.splice(i, 1);
|
1986 |
|
1987 |
triggerRedrawOverlay(); |
1988 |
} |
1989 |
} |
1990 |
|
1991 |
function indexOfHighlight(s, p) { |
1992 |
for (var i = 0; i < highlights.length; ++i) { |
1993 |
var h = highlights[i];
|
1994 |
if (h.series == s && h.point[0] == p[0] |
1995 |
&& h.point[1] == p[1]) |
1996 |
return i;
|
1997 |
} |
1998 |
return -1; |
1999 |
} |
2000 |
|
2001 |
function drawPointHighlight(series, point) { |
2002 |
var x = point[0], y = point[1], |
2003 |
axisx = series.xaxis, axisy = series.yaxis; |
2004 |
|
2005 |
if (x < axisx.min || x > axisx.max || y < axisy.min || y > axisy.max)
|
2006 |
return;
|
2007 |
|
2008 |
var pointRadius = series.points.radius + series.points.lineWidth / 2; |
2009 |
octx.lineWidth = pointRadius; |
2010 |
octx.strokeStyle = $.color.parse(series.color).scale('a', 0.5).toString(); |
2011 |
var radius = 1.5 * pointRadius; |
2012 |
octx.beginPath(); |
2013 |
octx.arc(axisx.p2c(x), axisy.p2c(y), radius, 0, 2 * Math.PI, false); |
2014 |
octx.stroke(); |
2015 |
} |
2016 |
|
2017 |
function drawBarHighlight(series, point) { |
2018 |
octx.lineWidth = series.bars.lineWidth; |
2019 |
octx.strokeStyle = $.color.parse(series.color).scale('a', 0.5).toString(); |
2020 |
var fillStyle = $.color.parse(series.color).scale('a', 0.5).toString(); |
2021 |
var barLeft = series.bars.align == "left" ? 0 : -series.bars.barWidth/2; |
2022 |
drawBar(point[0], point[1], point[2] || 0, barLeft, barLeft + series.bars.barWidth, |
2023 |
0, function () { return fillStyle; }, series.xaxis, series.yaxis, octx, series.bars.horizontal); |
2024 |
} |
2025 |
|
2026 |
function getColorOrGradient(spec, bottom, top, defaultColor) { |
2027 |
if (typeof spec == "string") |
2028 |
return spec;
|
2029 |
else {
|
2030 |
// assume this is a gradient spec; IE currently only
|
2031 |
// supports a simple vertical gradient properly, so that's
|
2032 |
// what we support too
|
2033 |
var gradient = ctx.createLinearGradient(0, top, 0, bottom); |
2034 |
|
2035 |
for (var i = 0, l = spec.colors.length; i < l; ++i) { |
2036 |
var c = spec.colors[i];
|
2037 |
if (typeof c != "string") { |
2038 |
c = $.color.parse(defaultColor).scale('rgb', c.brightness); |
2039 |
c.a *= c.opacity; |
2040 |
c = c.toString(); |
2041 |
} |
2042 |
gradient.addColorStop(i / (l - 1), c);
|
2043 |
} |
2044 |
|
2045 |
return gradient;
|
2046 |
} |
2047 |
} |
2048 |
} |
2049 |
|
2050 |
$.plot = function(placeholder, data, options) { |
2051 |
var plot = new Plot($(placeholder), data, options, $.plot.plugins); |
2052 |
/*var t0 = new Date();
|
2053 |
var t1 = new Date();
|
2054 |
var tstr = "time used (msecs): " + (t1.getTime() - t0.getTime())
|
2055 |
if (window.console)
|
2056 |
console.log(tstr);
|
2057 |
else
|
2058 |
alert(tstr);*/
|
2059 |
return plot;
|
2060 |
}; |
2061 |
|
2062 |
$.plot.plugins = [];
|
2063 |
|
2064 |
// returns a string with the date d formatted according to fmt
|
2065 |
$.plot.formatDate = function(d, fmt, monthNames) { |
2066 |
var leftPad = function(n) { |
2067 |
n = "" + n;
|
2068 |
return n.length == 1 ? "0" + n : n; |
2069 |
}; |
2070 |
|
2071 |
var r = [];
|
2072 |
var escape = false; |
2073 |
var hours = d.getUTCHours();
|
2074 |
var isAM = hours < 12; |
2075 |
if (monthNames == null) |
2076 |
monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; |
2077 |
|
2078 |
if (fmt.search(/%p|%P/) != -1) { |
2079 |
if (hours > 12) { |
2080 |
hours = hours - 12;
|
2081 |
} else if (hours == 0) { |
2082 |
hours = 12;
|
2083 |
} |
2084 |
} |
2085 |
for (var i = 0; i < fmt.length; ++i) { |
2086 |
var c = fmt.charAt(i);
|
2087 |
|
2088 |
if (escape) {
|
2089 |
switch (c) {
|
2090 |
case 'h': c = "" + hours; break; |
2091 |
case 'H': c = leftPad(hours); break; |
2092 |
case 'M': c = leftPad(d.getUTCMinutes()); break; |
2093 |
case 'S': c = leftPad(d.getUTCSeconds()); break; |
2094 |
case 'd': c = "" + d.getUTCDate(); break; |
2095 |
case 'm': c = "" + (d.getUTCMonth() + 1); break; |
2096 |
case 'y': c = "" + d.getUTCFullYear(); break; |
2097 |
case 'b': c = "" + monthNames[d.getUTCMonth()]; break; |
2098 |
case 'p': c = (isAM) ? ("" + "am") : ("" + "pm"); break; |
2099 |
case 'P': c = (isAM) ? ("" + "AM") : ("" + "PM"); break; |
2100 |
} |
2101 |
r.push(c); |
2102 |
escape = false;
|
2103 |
} |
2104 |
else {
|
2105 |
if (c == "%") |
2106 |
escape = true;
|
2107 |
else
|
2108 |
r.push(c); |
2109 |
} |
2110 |
} |
2111 |
return r.join(""); |
2112 |
}; |
2113 |
|
2114 |
// round to nearby lower multiple of base
|
2115 |
function floorInBase(n, base) { |
2116 |
return base * Math.floor(n / base);
|
2117 |
} |
2118 |
|
2119 |
})(jQuery); |