rgraph-rails 1.0.7 → 1.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/README.md +3 -3
- data/lib/rgraph-rails/version.rb +1 -1
- data/license.txt +4 -16
- data/vendor/assets/javascripts/RGraph.bar.js +3734 -241
- data/vendor/assets/javascripts/RGraph.bipolar.js +2005 -115
- data/vendor/assets/javascripts/RGraph.common.annotate.js +395 -35
- data/vendor/assets/javascripts/RGraph.common.context.js +595 -30
- data/vendor/assets/javascripts/RGraph.common.core.js +5282 -405
- data/vendor/assets/javascripts/RGraph.common.csv.js +276 -19
- data/vendor/assets/javascripts/RGraph.common.deprecated.js +450 -35
- data/vendor/assets/javascripts/RGraph.common.dynamic.js +1395 -86
- data/vendor/assets/javascripts/RGraph.common.effects.js +1545 -90
- data/vendor/assets/javascripts/RGraph.common.key.js +753 -54
- data/vendor/assets/javascripts/RGraph.common.resizing.js +563 -37
- data/vendor/assets/javascripts/RGraph.common.sheets.js +352 -29
- data/vendor/assets/javascripts/RGraph.common.tooltips.js +450 -32
- data/vendor/assets/javascripts/RGraph.common.zoom.js +219 -14
- data/vendor/assets/javascripts/RGraph.drawing.background.js +570 -35
- data/vendor/assets/javascripts/RGraph.drawing.circle.js +544 -35
- data/vendor/assets/javascripts/RGraph.drawing.image.js +755 -52
- data/vendor/assets/javascripts/RGraph.drawing.marker1.js +645 -41
- data/vendor/assets/javascripts/RGraph.drawing.marker2.js +633 -37
- data/vendor/assets/javascripts/RGraph.drawing.marker3.js +514 -36
- data/vendor/assets/javascripts/RGraph.drawing.poly.js +559 -39
- data/vendor/assets/javascripts/RGraph.drawing.rect.js +548 -35
- data/vendor/assets/javascripts/RGraph.drawing.text.js +664 -36
- data/vendor/assets/javascripts/RGraph.drawing.xaxis.js +812 -50
- data/vendor/assets/javascripts/RGraph.drawing.yaxis.js +856 -51
- data/vendor/assets/javascripts/RGraph.fuel.js +964 -58
- data/vendor/assets/javascripts/RGraph.funnel.js +984 -55
- data/vendor/assets/javascripts/RGraph.gantt.js +1354 -77
- data/vendor/assets/javascripts/RGraph.gauge.js +1421 -87
- data/vendor/assets/javascripts/RGraph.hbar.js +2562 -146
- data/vendor/assets/javascripts/RGraph.hprogress.js +1401 -80
- data/vendor/assets/javascripts/RGraph.line.js +4226 -244
- data/vendor/assets/javascripts/RGraph.meter.js +1280 -74
- data/vendor/assets/javascripts/RGraph.modaldialog.js +301 -19
- data/vendor/assets/javascripts/RGraph.odo.js +1264 -71
- data/vendor/assets/javascripts/RGraph.pie.js +2288 -137
- data/vendor/assets/javascripts/RGraph.radar.js +1847 -110
- data/vendor/assets/javascripts/RGraph.rose.js +1977 -108
- data/vendor/assets/javascripts/RGraph.rscatter.js +1432 -80
- data/vendor/assets/javascripts/RGraph.scatter.js +3036 -168
- data/vendor/assets/javascripts/RGraph.semicircularprogress.js +1120 -60
- data/vendor/assets/javascripts/RGraph.svg.bar.js +1067 -0
- data/vendor/assets/javascripts/RGraph.svg.common.ajax.js +247 -0
- data/vendor/assets/javascripts/RGraph.svg.common.core.js +3363 -0
- data/vendor/assets/javascripts/RGraph.svg.common.csv.js +277 -0
- data/vendor/assets/javascripts/RGraph.svg.common.fx.js +1304 -0
- data/vendor/assets/javascripts/RGraph.svg.common.sheets.js +353 -0
- data/vendor/assets/javascripts/RGraph.svg.common.tooltips.js +233 -0
- data/vendor/assets/javascripts/RGraph.svg.hbar.js +1141 -0
- data/vendor/assets/javascripts/RGraph.svg.line.js +1486 -0
- data/vendor/assets/javascripts/RGraph.svg.pie.js +781 -0
- data/vendor/assets/javascripts/RGraph.svg.radar.js +1326 -0
- data/vendor/assets/javascripts/RGraph.svg.semicircularprogress.js +817 -0
- data/vendor/assets/javascripts/RGraph.thermometer.js +1135 -62
- data/vendor/assets/javascripts/RGraph.vprogress.js +1470 -83
- data/vendor/assets/javascripts/RGraph.waterfall.js +1347 -80
- metadata +15 -3
@@ -1,91 +1,1546 @@
|
|
1
|
+
// version: 2017-01-02
|
2
|
+
/**
|
3
|
+
* o--------------------------------------------------------------------------------o
|
4
|
+
* | This file is part of the RGraph package - you can learn more at: |
|
5
|
+
* | |
|
6
|
+
* | http://www.rgraph.net |
|
7
|
+
* | |
|
8
|
+
* | RGraph is licensed under the Open Source MIT license. That means that it's |
|
9
|
+
* | totally free to use! |
|
10
|
+
* o--------------------------------------------------------------------------------o
|
11
|
+
*/
|
1
12
|
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
{
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
{
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
13
|
+
/**
|
14
|
+
* This is a library of a few functions that make it easier to do
|
15
|
+
* effects like fade-ins or eaxpansion.
|
16
|
+
*/
|
17
|
+
|
18
|
+
/**
|
19
|
+
* Initialise the various objects
|
20
|
+
*/
|
21
|
+
RGraph = window.RGraph || {isRGraph: true};
|
22
|
+
RGraph.Effects = RGraph.Effects || {};
|
23
|
+
RGraph.Effects.Common = {};
|
24
|
+
|
25
|
+
// Module pattern
|
26
|
+
(function (win, doc, undefined)
|
27
|
+
{
|
28
|
+
var RG = RGraph,
|
29
|
+
ua = navigator.userAgent,
|
30
|
+
ma = Math;
|
31
|
+
|
32
|
+
|
33
|
+
|
34
|
+
|
35
|
+
/**
|
36
|
+
* This functions adds the generic effects to thechart object
|
37
|
+
*
|
38
|
+
* @param object obj The chart object
|
39
|
+
*/
|
40
|
+
RG.Effects.decorate = function (obj)
|
41
|
+
{
|
42
|
+
for (i in RG.Effects.Common) {
|
43
|
+
if (typeof RG.Effects.Common[i] === 'function') {
|
44
|
+
|
45
|
+
obj[i] = RG.Effects.Common[i];
|
46
|
+
}
|
47
|
+
}
|
48
|
+
};
|
49
|
+
|
50
|
+
|
51
|
+
|
52
|
+
|
53
|
+
|
54
|
+
/**
|
55
|
+
* A function used to replace the canvas with a DIV, which in turn holds the canvas. This way the page
|
56
|
+
* layout doesn't shift in the canvas is resized.
|
57
|
+
*
|
58
|
+
* @param object canvas The canvas to replace.
|
59
|
+
*/
|
60
|
+
RG.Effects.replaceCanvasWithDIV =
|
61
|
+
RG.Effects.ReplaceCanvasWithDIV =
|
62
|
+
RG.Effects.wrap = function (canvas)
|
63
|
+
{
|
64
|
+
if (!canvas.rgraph_wrapper) {
|
65
|
+
// Create the place holder DIV
|
66
|
+
var div = $('<div></div>')
|
67
|
+
.css({
|
68
|
+
width: canvas.width + 'px',
|
69
|
+
height: canvas.height + 'px',
|
70
|
+
cssFloat: canvas.style.cssFloat,
|
71
|
+
left: canvas.style.left,
|
72
|
+
top: canvas.style.top,
|
73
|
+
display: 'inline-block'
|
74
|
+
})
|
75
|
+
.get(0);
|
76
|
+
|
77
|
+
// Add the new DIV to the DOM
|
78
|
+
canvas.parentNode.insertBefore(div, canvas);
|
79
|
+
|
80
|
+
// Remove the canvas from the document
|
81
|
+
canvas.parentNode.removeChild(canvas);
|
82
|
+
|
83
|
+
// Add it back in as a child of the place holder
|
84
|
+
div.appendChild(canvas);
|
85
|
+
|
86
|
+
// Reset the positioning information on the canvas
|
87
|
+
canvas.style.position = 'relative';
|
88
|
+
canvas.style.left = (div.offsetWidth / 2) + 'px';
|
89
|
+
canvas.style.top = (div.offsetHeight / 2) + 'px';
|
90
|
+
canvas.style.cssFloat = '';
|
91
|
+
|
92
|
+
// Add a reference to the canvas to the DIV so that repeated plays of the anumation
|
93
|
+
// don't keep replacing the canvas with a new DIV
|
94
|
+
canvas.rgraph_wrapper = div;
|
95
|
+
}
|
96
|
+
|
97
|
+
var div = canvas.rgraph_wrapper;
|
98
|
+
|
99
|
+
return div;
|
100
|
+
};
|
101
|
+
|
102
|
+
|
103
|
+
|
104
|
+
|
105
|
+
|
106
|
+
/**
|
107
|
+
* fadeIn
|
108
|
+
*
|
109
|
+
* This function simply uses the CSS opacity property - initially set to zero and
|
110
|
+
* increasing to 1 over the period of 0.5 second
|
111
|
+
*/
|
112
|
+
RG.Effects.Common.fadeIn = function ()
|
113
|
+
{
|
114
|
+
// This function gets added to the chart object - so the this
|
115
|
+
// variable is the chart object
|
116
|
+
var obj = this;
|
117
|
+
var opt = arguments[0] || {};
|
118
|
+
var frames = opt.frames || 30;
|
119
|
+
var duration = (frames / 60) * 1000;
|
120
|
+
var frame = 0;
|
121
|
+
var callback = arguments[1] || function () {};
|
122
|
+
|
123
|
+
|
124
|
+
// Initially the opacity should be zero
|
125
|
+
obj.canvas.style.opacity = 0;
|
126
|
+
|
127
|
+
// Draw the chart
|
128
|
+
RG.redrawCanvas(obj.canvas);
|
129
|
+
|
130
|
+
// Now fade the chart in
|
131
|
+
for (var i=1; i<=frames; ++i) {
|
132
|
+
(function (index)
|
133
|
+
{
|
134
|
+
setTimeout(function ()
|
135
|
+
{
|
136
|
+
obj.canvas.style.opacity = (index / frames);
|
137
|
+
|
138
|
+
if (index >= frames) {
|
139
|
+
callback(obj);
|
140
|
+
}
|
141
|
+
|
142
|
+
}, (index / frames) * duration);
|
143
|
+
})(i)
|
144
|
+
}
|
145
|
+
|
146
|
+
|
147
|
+
return obj;
|
148
|
+
};
|
149
|
+
|
150
|
+
|
151
|
+
|
152
|
+
|
153
|
+
/**
|
154
|
+
* fadeOut
|
155
|
+
*
|
156
|
+
* This function is a reversal of the above function - fading out instead of in
|
157
|
+
*/
|
158
|
+
RG.Effects.Common.fadeOut = function ()
|
159
|
+
{
|
160
|
+
// This function gets added to the chart object - so the this
|
161
|
+
// variable is the chart object
|
162
|
+
var obj = this;
|
163
|
+
var opt = arguments[0] || {};
|
164
|
+
var frames = opt.frames || 30;
|
165
|
+
var duration = (frames / 60) * 1000;
|
166
|
+
var frame = 0;
|
167
|
+
var callback = arguments[1] || function () {};
|
168
|
+
|
169
|
+
|
170
|
+
// Now fade the chart out
|
171
|
+
for (var i=1; i<=frames; ++i) {
|
172
|
+
(function (index)
|
173
|
+
{
|
174
|
+
setTimeout(function ()
|
175
|
+
{
|
176
|
+
obj.canvas.style.opacity = 1 - (index / frames);
|
177
|
+
|
178
|
+
|
179
|
+
if (index >= frames) {
|
180
|
+
callback(obj);
|
181
|
+
}
|
182
|
+
}, (index / frames) * duration);
|
183
|
+
})(i)
|
184
|
+
}
|
185
|
+
|
186
|
+
return this;
|
187
|
+
};
|
188
|
+
|
189
|
+
|
190
|
+
|
191
|
+
|
192
|
+
/**
|
193
|
+
* fadeSlideIn
|
194
|
+
*
|
195
|
+
* This function fades the canvas in in a sliding motion
|
196
|
+
*/
|
197
|
+
RG.Effects.Common.fadeSlideIn = function ()
|
198
|
+
{
|
199
|
+
// This function gets added to the chart object - so the this
|
200
|
+
// variable is the chart object
|
201
|
+
var obj = this,
|
202
|
+
opt = arguments[0] || {},
|
203
|
+
frames = opt.frames || 30,
|
204
|
+
frame = 0,
|
205
|
+
pc = -20,
|
206
|
+
step = (120 - pc) / frames,
|
207
|
+
canvasXY = RG.getCanvasXY(obj.canvas),
|
208
|
+
color = opt.color || 'white',
|
209
|
+
callback = arguments[1] || function () {};
|
210
|
+
|
211
|
+
|
212
|
+
// Draw the chart
|
213
|
+
RG.redrawCanvas(obj.canvas);
|
214
|
+
|
215
|
+
|
216
|
+
// Create the cover
|
217
|
+
$('<div id="rgraph_fadeslide_cover_' + obj.id + '"></div>').css({
|
218
|
+
background: 'linear-gradient(135deg, rgba(255,255,255,0) ' + pc + '%, ' + color + ' ' + (pc + 20) + '%)',
|
219
|
+
width:obj.canvas.width + 'px',
|
220
|
+
height: obj.canvas.height + 'px',
|
221
|
+
top: canvasXY[1] + 'px',
|
222
|
+
left: canvasXY[0] + 'px',
|
223
|
+
position: 'absolute'
|
224
|
+
}).appendTo($(obj.canvas.parentNode));
|
225
|
+
|
226
|
+
function iterator ()
|
227
|
+
{
|
228
|
+
if (pc < 120) {
|
229
|
+
$('div#rgraph_fadeslide_cover_' + obj.id).css({
|
230
|
+
background: 'linear-gradient(135deg, rgba(255,255,255,0) ' + pc + '%, ' + color + ' ' + (pc + 20) + '%)'
|
231
|
+
});
|
232
|
+
pc += step;
|
233
|
+
RG.Effects.updateCanvas(iterator);
|
234
|
+
|
235
|
+
} else {
|
236
|
+
|
237
|
+
$('div#rgraph_fadeslide_cover_' + obj.id).remove();
|
238
|
+
|
239
|
+
callback(obj);
|
240
|
+
}
|
241
|
+
}
|
242
|
+
|
243
|
+
iterator();
|
244
|
+
};
|
245
|
+
|
246
|
+
|
247
|
+
|
248
|
+
|
249
|
+
/**
|
250
|
+
* fadeSlideOut
|
251
|
+
*
|
252
|
+
Fades the canvas out in a sliding motion
|
253
|
+
*/
|
254
|
+
RG.Effects.Common.fadeSlideOut = function ()
|
255
|
+
{
|
256
|
+
// This function gets added to the chart object - so the this
|
257
|
+
// variable is the chart object
|
258
|
+
var obj = this;
|
259
|
+
var opt = arguments[0] || {};
|
260
|
+
var frames = opt.frames || 30;
|
261
|
+
var frame = 0;
|
262
|
+
var pc = -20;
|
263
|
+
var step = (120 - pc) / frames;
|
264
|
+
var canvasXY = RG.getCanvasXY(obj.canvas);
|
265
|
+
var color = opt.color || 'white';
|
266
|
+
var callback = arguments[1] || function () {};
|
267
|
+
|
268
|
+
|
269
|
+
// Draw the chart
|
270
|
+
RG.redrawCanvas(obj.canvas);
|
271
|
+
|
272
|
+
// Create the cover
|
273
|
+
$('<div id="rgraph_fadeslide_cover_' + obj.id + '"></div>').css({
|
274
|
+
background: 'linear-gradient(135deg, ' + color + ' ' + pc + '%, rgba(255,255,255,0) ' + (pc + 20) + '%)',
|
275
|
+
width:obj.canvas.width + 'px',
|
276
|
+
height: obj.canvas.height + 'px',
|
277
|
+
top: canvasXY[1] + 'px',
|
278
|
+
left: canvasXY[0] + 'px',
|
279
|
+
position: 'absolute'
|
280
|
+
}).appendTo($(obj.canvas.parentNode));
|
281
|
+
|
282
|
+
function iterator ()
|
283
|
+
{
|
284
|
+
if (pc < 120) {
|
285
|
+
$('div#rgraph_fadeslide_cover_' + obj.id).css({
|
286
|
+
background: 'linear-gradient(135deg, ' + color + ' ' + pc + '%, rgba(255,255,255,0) ' + (pc + 20) + '%)'
|
287
|
+
});
|
288
|
+
pc += step;
|
289
|
+
RG.Effects.updateCanvas(iterator);
|
290
|
+
|
291
|
+
} else {
|
292
|
+
|
293
|
+
RG.clear(obj.canvas, obj.get('clearto'))
|
294
|
+
|
295
|
+
$('div#rgraph_fadeslide_cover_' + obj.id).remove();
|
296
|
+
|
297
|
+
callback(obj);
|
298
|
+
}
|
299
|
+
}
|
300
|
+
|
301
|
+
iterator();
|
302
|
+
};
|
303
|
+
|
304
|
+
|
305
|
+
|
306
|
+
|
307
|
+
|
308
|
+
/**
|
309
|
+
* fadeCircularIn
|
310
|
+
*
|
311
|
+
* This function uses radial CSS gradients to cover the canvas with a radial fade in effect
|
312
|
+
* (from the center outwards)
|
313
|
+
*/
|
314
|
+
RG.Effects.Common.fadeCircularInOutwards = function ()
|
315
|
+
{
|
316
|
+
// This function gets added to the chart object - so the this
|
317
|
+
// variable is the chart object
|
318
|
+
var obj = this;
|
319
|
+
var opt = arguments[0] || {};
|
320
|
+
var frames = opt.frames || 120;
|
321
|
+
var frame = 0;
|
322
|
+
var radius = 0;
|
323
|
+
var canvasXY = RG.getCanvasXY(obj.canvas);
|
324
|
+
var color = opt.color || 'white';
|
325
|
+
var callback = arguments[1] || function () {};
|
326
|
+
|
327
|
+
|
328
|
+
// Draw the chart
|
329
|
+
RG.redrawCanvas(obj.canvas);
|
330
|
+
|
331
|
+
|
332
|
+
|
333
|
+
// Create the cover
|
334
|
+
$('<div id="rgraph_fadeslide_cover_' + obj.id + '"></div>').css({
|
335
|
+
background: 'radial-gradient(rgba(255,255,255,0) 0%, white ' + radius + '%)',
|
336
|
+
width:obj.canvas.width + 'px',
|
337
|
+
height: obj.canvas.height + 'px',
|
338
|
+
top: canvasXY[1],
|
339
|
+
left: canvasXY[0],
|
340
|
+
position: 'absolute'
|
341
|
+
}).appendTo($(obj.canvas.parentNode));
|
342
|
+
|
343
|
+
function iterator ()
|
344
|
+
{
|
345
|
+
if (frame < frames) {
|
346
|
+
|
347
|
+
$('div#rgraph_fadeslide_cover_' + obj.id).css({
|
348
|
+
background: 'radial-gradient(rgba(255,255,255,0) ' + ((frame++ / frames) * 100) + '%, ' + color + ' ' + ((frame++ / frames) * 150) + '%)'
|
349
|
+
});
|
350
|
+
|
351
|
+
RG.Effects.updateCanvas(iterator);
|
352
|
+
|
353
|
+
} else {
|
354
|
+
|
355
|
+
$('div#rgraph_fadeslide_cover_' + obj.id).remove();
|
356
|
+
|
357
|
+
callback(obj);
|
358
|
+
}
|
359
|
+
}
|
360
|
+
|
361
|
+
iterator();
|
362
|
+
};
|
363
|
+
|
364
|
+
|
365
|
+
|
366
|
+
|
367
|
+
/**
|
368
|
+
* fadeCircularOut
|
369
|
+
*
|
370
|
+
* This function uses radial CSS gradients to cover the canvas with a radial fade out effect
|
371
|
+
* (from the center outwards)
|
372
|
+
*/
|
373
|
+
RG.Effects.Common.fadeCircularOutOutwards = function ()
|
374
|
+
{
|
375
|
+
// This function gets added to the chart object - so the this
|
376
|
+
// variable is the chart object
|
377
|
+
var obj = this;
|
378
|
+
var opt = arguments[0] || {};
|
379
|
+
var frames = opt.frames || 120;
|
380
|
+
var frame = 0;
|
381
|
+
var canvasXY = RG.getCanvasXY(obj.canvas);
|
382
|
+
var color = opt.color || 'white';
|
383
|
+
var callback = arguments[1] || function () {};
|
384
|
+
|
385
|
+
|
386
|
+
// Draw the chart
|
387
|
+
RG.redrawCanvas(obj.canvas);
|
388
|
+
|
389
|
+
|
390
|
+
|
391
|
+
// Create the cover
|
392
|
+
$('<div id="rgraph_fadeslide_cover_' + obj.id + '"></div>').css({
|
393
|
+
background: 'radial-gradient(rgba(255,255,255,0) 0%, white 0%)',
|
394
|
+
width:obj.canvas.width + 'px',
|
395
|
+
height: obj.canvas.height + 'px',
|
396
|
+
top: canvasXY[1],
|
397
|
+
left: canvasXY[0],
|
398
|
+
position: 'absolute'
|
399
|
+
}).appendTo($(obj.canvas.parentNode));
|
400
|
+
|
401
|
+
function iterator ()
|
402
|
+
{
|
403
|
+
if (frame < frames) {
|
404
|
+
|
405
|
+
$('div#rgraph_fadeslide_cover_' + obj.id).css({
|
406
|
+
background: 'radial-gradient(' + color + ' ' + ((frame++ / frames) * 100) + '%, rgba(255,255,255,0) ' + ((frame++ / frames) * 150) + '%)'
|
407
|
+
});
|
408
|
+
RG.Effects.updateCanvas(iterator);
|
409
|
+
|
410
|
+
} else {
|
411
|
+
|
412
|
+
RG.clear(obj.canvas, color);
|
413
|
+
|
414
|
+
$('div#rgraph_fadeslide_cover_' + obj.id).remove();
|
415
|
+
|
416
|
+
callback(obj);
|
417
|
+
}
|
418
|
+
}
|
419
|
+
|
420
|
+
iterator();
|
421
|
+
};
|
422
|
+
|
423
|
+
|
424
|
+
|
425
|
+
|
426
|
+
/**
|
427
|
+
* fadeCircularInInwards
|
428
|
+
*/
|
429
|
+
RG.Effects.Common.fadeCircularInInwards = function ()
|
430
|
+
{
|
431
|
+
// This function gets added to the chart object - so the this
|
432
|
+
// variable is the chart object
|
433
|
+
var obj = this;
|
434
|
+
var opt = arguments[0] || {};
|
435
|
+
var frames = opt.frames || 120;
|
436
|
+
var frame = 0;
|
437
|
+
var radius = ma.max(obj.canvas.width, obj.canvas.height);
|
438
|
+
var canvasXY = RG.getCanvasXY(obj.canvas);
|
439
|
+
var color = opt.color || 'white';
|
440
|
+
var callback = arguments[1] || function () {};
|
441
|
+
|
442
|
+
|
443
|
+
// Draw the chart
|
444
|
+
RG.redrawCanvas(obj.canvas);
|
445
|
+
|
446
|
+
|
447
|
+
|
448
|
+
// Create the cover
|
449
|
+
$('<div id="rgraph_fadeslide_cover_' + obj.id + '"></div>').css({
|
450
|
+
background: 'radial-gradient(rgba(255,255,255,0) 100%, rgba(255,255,255,0) 0%)',
|
451
|
+
width:obj.canvas.width + 'px',
|
452
|
+
height: obj.canvas.height + 'px',
|
453
|
+
top: canvasXY[1] + 'px',
|
454
|
+
left: canvasXY[0] + 'px',
|
455
|
+
position: 'absolute'
|
456
|
+
}).appendTo($(obj.canvas.parentNode));
|
457
|
+
|
458
|
+
function iterator ()
|
459
|
+
{
|
460
|
+
if (frame < frames) {
|
461
|
+
|
462
|
+
$('div#rgraph_fadeslide_cover_' + obj.id).css({
|
463
|
+
background: 'radial-gradient(' + color + ' ' + (( (frames - frame++) / frames) * 100) + '%, rgba(255,255,255,0) ' + (( (frames - frame++) / frames) * 120) + '%)'
|
464
|
+
});
|
465
|
+
RG.Effects.updateCanvas(iterator);
|
466
|
+
|
467
|
+
} else {
|
468
|
+
|
469
|
+
$('div#rgraph_fadeslide_cover_' + obj.id).remove();
|
470
|
+
|
471
|
+
callback(obj);
|
472
|
+
}
|
473
|
+
}
|
474
|
+
|
475
|
+
iterator();
|
476
|
+
};
|
477
|
+
|
478
|
+
|
479
|
+
|
480
|
+
|
481
|
+
/**
|
482
|
+
* fadeCircularOutReverse
|
483
|
+
*/
|
484
|
+
RG.Effects.Common.fadeCircularOutInwards = function ()
|
485
|
+
{
|
486
|
+
// This function gets added to the chart object - so the this
|
487
|
+
// variable is the chart object
|
488
|
+
var obj = this;
|
489
|
+
var opt = arguments[0] || {};
|
490
|
+
var frames = opt.frames || 120;
|
491
|
+
var frame = 0;
|
492
|
+
var radius = ma.max(obj.canvas.width, obj.canvas.height);
|
493
|
+
var canvasXY = RG.getCanvasXY(obj.canvas);
|
494
|
+
var color = opt.color || 'white';
|
495
|
+
var callback = arguments[1] || function () {};
|
496
|
+
|
497
|
+
|
498
|
+
// Draw the chart
|
499
|
+
RG.redrawCanvas(obj.canvas);
|
500
|
+
|
501
|
+
|
502
|
+
|
503
|
+
// Create the cover
|
504
|
+
$('<div id="rgraph_fadeslide_cover_' + obj.id + '"></div>').css({
|
505
|
+
background: 'radial-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,0) 0%)',
|
506
|
+
width:obj.canvas.width + 'px',
|
507
|
+
height: obj.canvas.height + 'px',
|
508
|
+
top: canvasXY[1],
|
509
|
+
left: canvasXY[0],
|
510
|
+
position: 'absolute'
|
511
|
+
}).appendTo($(obj.canvas.parentNode));
|
512
|
+
|
513
|
+
function iterator ()
|
514
|
+
{
|
515
|
+
if (frame < frames) {
|
516
|
+
|
517
|
+
$('div#rgraph_fadeslide_cover_' + obj.id).css({
|
518
|
+
background: 'radial-gradient(rgba(255,255,255,0) ' + (( (frames - frame++) / frames) * 100) + '%, ' + color + ' ' + (( (frames - frame++) / frames) * 120) + '%)'
|
519
|
+
});
|
520
|
+
RG.Effects.updateCanvas(iterator);
|
521
|
+
|
522
|
+
} else {
|
523
|
+
|
524
|
+
RG.clear(obj.canvas);
|
525
|
+
|
526
|
+
$('div#rgraph_fadeslide_cover_' + obj.id).remove();
|
527
|
+
|
528
|
+
callback(obj);
|
529
|
+
}
|
530
|
+
}
|
531
|
+
|
532
|
+
iterator();
|
533
|
+
};
|
534
|
+
|
535
|
+
|
536
|
+
|
537
|
+
|
538
|
+
/**
|
539
|
+
* Expand
|
540
|
+
*
|
541
|
+
* This effect is like the tooltip effect of the same name. I starts in the middle
|
542
|
+
* and expands out to full size.
|
543
|
+
*
|
544
|
+
* @param object obj The graph object
|
545
|
+
*/
|
546
|
+
RG.Effects.Common.expand = function ()
|
547
|
+
{
|
548
|
+
// This function gets added to the chart object - so the this
|
549
|
+
// variable is the chart object
|
550
|
+
var obj = this;
|
551
|
+
var opt = arguments[0] || {};
|
552
|
+
var bounce = typeof opt.bounce === 'boolean' ? opt.bounce : true;
|
553
|
+
var frames = opt.frames || 60;
|
554
|
+
var duration = (frames / 60) * 1000;
|
555
|
+
var callback = arguments[1] || function () {};
|
556
|
+
|
557
|
+
if (!this.canvas.rgraph_wrapper) {
|
558
|
+
var div = RG.Effects.wrap(this.canvas);
|
559
|
+
this.canvas.rgraph_wrapper = div;
|
560
|
+
} else {
|
561
|
+
div = this.canvas.rgraph_wrapper;
|
562
|
+
}
|
563
|
+
|
564
|
+
div.style.position = 'relative';
|
565
|
+
//this.canvas.style.position = 'relative'; // absolute should work here too - but doesn't in Chrome
|
566
|
+
this.canvas.style.top = (this.canvas.height / 2) + 'px';
|
567
|
+
this.canvas.style.left = (this.canvas.width / 2) + 'px';
|
568
|
+
|
569
|
+
this.canvas.style.width = 0;
|
570
|
+
this.canvas.style.height = 0;
|
571
|
+
|
572
|
+
this.canvas.style.opacity = 0;
|
573
|
+
|
574
|
+
|
575
|
+
RG.clear(this.canvas);
|
576
|
+
RG.redrawCanvas(this.canvas);
|
577
|
+
|
578
|
+
if (bounce) {
|
579
|
+
|
580
|
+
jQuery('#' + obj.id).animate({opacity: 1, width: (obj.canvas.width * 1.2) + 'px', height: (obj.canvas.height * 1.2) + 'px', left: (obj.canvas.width * -0.1) + 'px', top: (obj.canvas.height * -0.1) + 'px'}, duration * 0.5, function ()
|
581
|
+
{
|
582
|
+
jQuery('#' + obj.id).animate({width: (obj.canvas.width * 0.9) + 'px', height: (obj.canvas.height * 0.9) + 'px', top: (obj.canvas.height * 0.05) + 'px', left: (obj.canvas.width * 0.05) + 'px'}, duration * 0.25, function ()
|
583
|
+
{
|
584
|
+
jQuery('#' + obj.id).animate({width: obj.canvas.width + 'px', height: obj.canvas.height + 'px', top: 0, left: 0}, duration * 0.25, function () {callback(obj);});
|
585
|
+
});
|
586
|
+
});
|
587
|
+
|
588
|
+
} else {
|
589
|
+
|
590
|
+
jQuery(obj.canvas).animate({
|
591
|
+
opacity: 1,
|
592
|
+
width: obj.canvas.width + 'px',
|
593
|
+
height: obj.canvas.height + 'px',
|
594
|
+
left: 0,
|
595
|
+
top: 0
|
596
|
+
}, duration, function () {callback(obj);})
|
597
|
+
}
|
598
|
+
|
599
|
+
|
600
|
+
|
601
|
+
return this;
|
602
|
+
};
|
603
|
+
|
604
|
+
|
605
|
+
|
606
|
+
|
607
|
+
/**
|
608
|
+
* Contract
|
609
|
+
*
|
610
|
+
* This effect is a good one to use with the Expand effect to make a transition
|
611
|
+
*
|
612
|
+
* @param object You can specify frames here: {frames: 120}
|
613
|
+
* @param function Optional callback to run when the effect is done.
|
614
|
+
*/
|
615
|
+
RG.Effects.Common.contract = function ()
|
616
|
+
{
|
617
|
+
// This function gets added to the chart object - so the this
|
618
|
+
// variable is the chart object
|
619
|
+
var obj = this;
|
620
|
+
var opt = arguments[0] || {};
|
621
|
+
var frames = opt.frames || 60;
|
622
|
+
var duration = (frames / 60) * 1000;
|
623
|
+
var callback = arguments[1] || function () {};
|
624
|
+
|
625
|
+
if (!obj.canvas.rgraph_wrapper) {
|
626
|
+
var div = RG.Effects.wrap(obj.canvas);
|
627
|
+
obj.canvas.rgraph_wrapper = div;
|
628
|
+
} else {
|
629
|
+
div = obj.canvas.rgraph_wrapper;
|
630
|
+
}
|
631
|
+
|
632
|
+
|
633
|
+
div.style.position = 'relative';
|
634
|
+
//canvas.style.position = 'absolute'; // Chrome bug...?
|
635
|
+
obj.canvas.style.top = 0;
|
636
|
+
obj.canvas.style.left = 0;
|
637
|
+
|
638
|
+
if (opt.bounce !== false) {
|
639
|
+
jQuery('#' + obj.id).animate({
|
640
|
+
width: (obj.canvas.width * 1.2) + 'px',
|
641
|
+
height: (obj.canvas.height * 1.2) + 'px',
|
642
|
+
left: (obj.canvas.width * -0.1) + 'px',
|
643
|
+
top: (obj.canvas.height * -0.1) + 'px'
|
644
|
+
}, duration * 0.25, function ()
|
645
|
+
{
|
646
|
+
jQuery('#' + obj.id).animate({
|
647
|
+
opacity: 0,
|
648
|
+
width: 0,
|
649
|
+
height: 0,
|
650
|
+
left: (obj.canvas.width * 0.5) + 'px',
|
651
|
+
top: (obj.canvas.height * 0.5) + 'px'
|
652
|
+
}, duration * 0.75, function () {callback(obj);});
|
653
|
+
});
|
654
|
+
} else {
|
655
|
+
jQuery('#' + obj.id).animate({
|
656
|
+
opacity: 0,
|
657
|
+
width: 0,
|
658
|
+
height: 0,
|
659
|
+
left: (obj.canvas.width * 0.5) + 'px',
|
660
|
+
top: (obj.canvas.height * 0.5) + 'px'
|
661
|
+
}, duration * 0.75, function () {callback(obj);});
|
662
|
+
}
|
663
|
+
|
664
|
+
|
665
|
+
return this;
|
666
|
+
};
|
667
|
+
|
668
|
+
|
669
|
+
|
670
|
+
|
671
|
+
/**
|
672
|
+
* Reveal
|
673
|
+
*
|
674
|
+
* This effect issmilar to the Expand effect - the canvas is slowly revealed from
|
675
|
+
* the centre outwards
|
676
|
+
*
|
677
|
+
* @param object Options for the effect. You can give frames here
|
678
|
+
* @param function An optional callback function
|
679
|
+
*/
|
680
|
+
RG.Effects.Common.reveal = function ()
|
681
|
+
{
|
682
|
+
// This function gets added to the chart object - so the this
|
683
|
+
// variable is the chart object
|
684
|
+
var obj = this;
|
685
|
+
var opt = arguments[0] || {};
|
686
|
+
var frames = opt.frames || 60;
|
687
|
+
var duration = (frames / 60) * 1000;
|
688
|
+
var callback = arguments[1] || function () {};
|
689
|
+
var xy = RG.getCanvasXY(obj.canvas);
|
690
|
+
|
691
|
+
|
692
|
+
|
693
|
+
|
694
|
+
var divs = [
|
695
|
+
['rgraph_reveal_left_' + obj.id, xy[0], xy[1], obj.canvas.width / 2, obj.canvas.height],
|
696
|
+
['rgraph_reveal_right_' + obj.id,(xy[0] + (obj.canvas.width / 2)),xy[1],(obj.canvas.width / 2),obj.canvas.height],
|
697
|
+
['rgraph_reveal_top_' + obj.id,xy[0],xy[1],obj.canvas.width,(obj.canvas.height / 2)],
|
698
|
+
['rgraph_reveal_bottom_' + obj.id,xy[0],(xy[1] + (obj.canvas.height / 2)),obj.canvas.width,(obj.canvas.height / 2)]
|
699
|
+
];
|
700
|
+
|
701
|
+
for (var i=0,len=divs.length; i<len; ++i) {
|
702
|
+
var div = document.createElement('DIV');
|
703
|
+
div.id = divs[i][0];
|
704
|
+
div.style.width = divs[i][3]+ 'px';
|
705
|
+
div.style.height = divs[i][4] + 'px';
|
706
|
+
div.style.left = divs[i][1] + 'px';
|
707
|
+
div.style.top = divs[i][2] + 'px';
|
708
|
+
div.style.position = 'absolute';
|
709
|
+
div.style.backgroundColor = opt && typeof opt.color === 'string' ? opt.color : 'white';
|
710
|
+
document.body.appendChild(div);
|
711
|
+
}
|
712
|
+
|
713
|
+
|
714
|
+
// Clear the canvas and redraw it
|
715
|
+
RG.clear(obj.canvas);
|
716
|
+
RG.redrawCanvas(obj.canvas);
|
717
|
+
|
718
|
+
|
719
|
+
// Animate the shrinking of the DIVs
|
720
|
+
jQuery('#rgraph_reveal_left_' + obj.id).animate({width: 0}, duration);
|
721
|
+
jQuery('#rgraph_reveal_right_' + obj.id).animate({left: '+=' + (obj.canvas.width / 2),width: 0}, duration);
|
722
|
+
jQuery('#rgraph_reveal_top_' + obj.id).animate({height: 0}, duration);
|
723
|
+
jQuery('#rgraph_reveal_bottom_' + obj.id).animate({top: '+=' + (obj.canvas.height / 2),height: 0}, duration);
|
724
|
+
|
725
|
+
// Remove the DIVs from the DOM 100ms after the animation ends
|
726
|
+
setTimeout(function ()
|
727
|
+
{
|
728
|
+
doc.body.removeChild(doc.getElementById("rgraph_reveal_top_" + obj.id));
|
729
|
+
doc.body.removeChild(doc.getElementById("rgraph_reveal_bottom_" + obj.id));
|
730
|
+
doc.body.removeChild(doc.getElementById("rgraph_reveal_left_" + obj.id));
|
731
|
+
doc.body.removeChild(doc.getElementById("rgraph_reveal_right_" + obj.id));
|
732
|
+
|
733
|
+
callback(obj);
|
734
|
+
}, duration);
|
735
|
+
|
736
|
+
|
737
|
+
return this;
|
738
|
+
};
|
739
|
+
|
740
|
+
|
741
|
+
|
742
|
+
|
743
|
+
/**
|
744
|
+
* RevealCircular
|
745
|
+
*
|
746
|
+
* This effect is smilar to the Reveal effect - the canvas is slowly revealed from
|
747
|
+
* the centre outwards using a circular shape
|
748
|
+
*
|
749
|
+
* @param object An object of options - eg {frames: 30}
|
750
|
+
* @param function An optional callback function that runs when the effect is finished
|
751
|
+
*/
|
752
|
+
RG.Effects.Common.revealCircular =
|
753
|
+
RG.Effects.Common.revealcircular = function ()
|
754
|
+
{
|
755
|
+
// This function gets added to the chart object - so the this
|
756
|
+
// variable is the chart object
|
757
|
+
var obj = this;
|
758
|
+
var opt = arguments[0] || {};
|
759
|
+
var frames = opt.frames || 30;
|
760
|
+
var frame = 0;
|
761
|
+
var callback = arguments[1] || function () {};
|
762
|
+
var currentRadius = 0
|
763
|
+
var centerx = obj.canvas.width / 2;
|
764
|
+
var centery = obj.canvas.height / 2;
|
765
|
+
var targetRadius = ma.max(obj.canvas.height, obj.canvas.width);
|
766
|
+
var step = targetRadius / frames;
|
767
|
+
var color = opt.background || opt.color || opt.backgroundColor || 'transparent';
|
768
|
+
|
769
|
+
|
770
|
+
|
771
|
+
|
772
|
+
/**
|
773
|
+
* This is the iterator function which gradually increases the radius of the clip circle
|
774
|
+
*/
|
775
|
+
function iterator ()
|
776
|
+
{
|
777
|
+
// Begin by clearing the canvas
|
778
|
+
RG.clear(obj.canvas, color);
|
779
|
+
|
780
|
+
obj.context.save();
|
781
|
+
// First draw the circle and clip to it
|
782
|
+
obj.context.beginPath();
|
783
|
+
obj.context.arc(centerx, centery, currentRadius, 0, RG.TWOPI, false);
|
784
|
+
obj.context.clip();
|
785
|
+
|
786
|
+
// Clear the canvas to a white color
|
787
|
+
if (opt.background) {
|
788
|
+
RG.clear(obj.canvas, opt.background);
|
789
|
+
}
|
790
|
+
|
791
|
+
// Now draw the chart
|
792
|
+
obj.draw();
|
793
|
+
obj.context.restore();
|
794
|
+
|
795
|
+
|
796
|
+
// Increment the radius
|
797
|
+
if (currentRadius < targetRadius) {
|
798
|
+
currentRadius += step;
|
799
|
+
RG.Effects.updateCanvas(iterator);
|
800
|
+
|
801
|
+
} else {
|
802
|
+
callback(obj);
|
803
|
+
}
|
804
|
+
}
|
805
|
+
|
806
|
+
iterator();
|
807
|
+
|
808
|
+
return this;
|
809
|
+
};
|
810
|
+
|
811
|
+
|
812
|
+
|
813
|
+
|
814
|
+
/**
|
815
|
+
* Conceal
|
816
|
+
*
|
817
|
+
* This effect is the reverse of the Reveal effect - instead of revealing the canvas it
|
818
|
+
* conceals it. Combined with the reveal effect would make for a nice wipe effect.
|
819
|
+
*
|
820
|
+
* @param object obj The chart object
|
821
|
+
*/
|
822
|
+
RG.Effects.Common.conceal = function ()
|
823
|
+
{
|
824
|
+
// This function gets added to the chart object - so the this
|
825
|
+
// variable is the chart object
|
826
|
+
var obj = this;
|
827
|
+
var opt = arguments[0] || {};
|
828
|
+
var frames = opt.frames || 60;
|
829
|
+
var duration = (frames / 60) * 1000;
|
830
|
+
var frame = 0;
|
831
|
+
var callback = arguments[1] || function () {};
|
832
|
+
var xy = RG.getCanvasXY(obj.canvas);
|
833
|
+
var color = opt.background || opt.color || opt.backgroundColor || 'white';
|
834
|
+
|
835
|
+
|
836
|
+
|
837
|
+
var divs = [
|
838
|
+
['rgraph_conceal_left_' + obj.id, xy[0], xy[1], 0, obj.canvas.height],
|
839
|
+
['rgraph_conceal_right_' + obj.id,(xy[0] + obj.canvas.width),xy[1],0,obj.canvas.height],
|
840
|
+
['rgraph_conceal_top_' + obj.id,xy[0],xy[1],obj.canvas.width,0],
|
841
|
+
['rgraph_conceal_bottom_' + obj.id,xy[0],(xy[1] + obj.canvas.height),obj.canvas.width,0]
|
842
|
+
];
|
843
|
+
|
844
|
+
|
845
|
+
|
846
|
+
|
847
|
+
for (var i=0,len=divs.length; i<len; ++i) {
|
848
|
+
var div = doc.createElement('DIV');
|
849
|
+
div.id = divs[i][0];
|
850
|
+
div.style.width = divs[i][3]+ 'px';
|
851
|
+
div.style.height = divs[i][4] + 'px';
|
852
|
+
div.style.left = divs[i][1] + 'px';
|
853
|
+
div.style.top = divs[i][2] + 'px';
|
854
|
+
div.style.position = 'absolute';
|
855
|
+
div.style.backgroundColor = color;
|
856
|
+
doc.body.appendChild(div);
|
857
|
+
}
|
858
|
+
|
859
|
+
|
860
|
+
jQuery('#rgraph_conceal_left_' + obj.id).animate({width: '+=' + (obj.canvas.width / 2)}, duration);
|
861
|
+
jQuery('#rgraph_conceal_right_' + obj.id).animate({left: '-=' + (obj.canvas.width / 2),width: (obj.canvas.width / 2)}, duration);
|
862
|
+
jQuery('#rgraph_conceal_top_' + obj.id).animate({height: '+=' + (obj.canvas.height / 2)}, duration);
|
863
|
+
jQuery('#rgraph_conceal_bottom_' + obj.id).animate({top: '-=' + (obj.canvas.height / 2),height: (obj.canvas.height / 2)}, duration);
|
864
|
+
|
865
|
+
// Remove the DIVs from the DOM 100ms after the animation ends
|
866
|
+
setTimeout(
|
867
|
+
function ()
|
868
|
+
{
|
869
|
+
doc.body.removeChild(doc.getElementById("rgraph_conceal_top_" + obj.id));
|
870
|
+
doc.body.removeChild(doc.getElementById("rgraph_conceal_bottom_" + obj.id));
|
871
|
+
doc.body.removeChild(doc.getElementById("rgraph_conceal_left_" + obj.id));
|
872
|
+
doc.body.removeChild(doc.getElementById("rgraph_conceal_right_" + obj.id));
|
873
|
+
|
874
|
+
RG.clear(obj.canvas);
|
875
|
+
|
876
|
+
callback(obj);
|
877
|
+
|
878
|
+
}, duration);
|
879
|
+
|
880
|
+
return this;
|
881
|
+
};
|
882
|
+
|
883
|
+
|
884
|
+
|
885
|
+
|
886
|
+
/**
|
887
|
+
* Horizontal Blinds (open)
|
888
|
+
*
|
889
|
+
* @params object obj The graph object
|
890
|
+
*/
|
891
|
+
RG.Effects.Common.hBlindsOpen =
|
892
|
+
RG.Effects.Common.hblindsOpen = function ()
|
893
|
+
{
|
894
|
+
// This function gets added to the chart object - so the this
|
895
|
+
// variable is the chart object
|
896
|
+
var obj = this;
|
897
|
+
var opt = arguments[0] || {};
|
898
|
+
var frames = opt.frames || 60;
|
899
|
+
var duration = (frames / 60) * 1000;
|
900
|
+
var frame = 0;
|
901
|
+
var callback = arguments[1] || function () {};
|
902
|
+
var color = opt.background || opt.color || opt.backgroundColor || 'white';
|
903
|
+
var xy = RG.getCanvasXY(this.canvas);
|
904
|
+
var height = this.canvas.height / 5;
|
905
|
+
|
906
|
+
/**
|
907
|
+
* First draw the chart
|
908
|
+
*/
|
909
|
+
RG.clear(this.canvas);
|
910
|
+
RG.redrawCanvas(this.canvas);
|
911
|
+
|
912
|
+
for (var i=0; i<5; ++i) {
|
913
|
+
var div = doc.createElement('DIV');
|
914
|
+
div.id = 'rgraph_hblinds_' + i + '_' + obj.id;
|
915
|
+
div.style.width = this.canvas.width + 'px';
|
916
|
+
div.style.height = height + 'px';
|
917
|
+
div.style.left = xy[0] + 'px';
|
918
|
+
div.style.top = (xy[1] + (this.canvas.height * (i / 5))) + 'px';
|
919
|
+
div.style.position = 'absolute';
|
920
|
+
div.style.backgroundColor = color;
|
921
|
+
document.body.appendChild(div);
|
922
|
+
|
923
|
+
jQuery('#rgraph_hblinds_' + i + '_' + obj.id).animate({height: 0}, duration);
|
924
|
+
}
|
925
|
+
|
926
|
+
setTimeout(function () {doc.body.removeChild(doc.getElementById('rgraph_hblinds_0_' + obj.id));}, duration);
|
927
|
+
setTimeout(function () {doc.body.removeChild(doc.getElementById('rgraph_hblinds_1_' + obj.id));}, duration);
|
928
|
+
setTimeout(function () {doc.body.removeChild(doc.getElementById('rgraph_hblinds_2_' + obj.id));}, duration);
|
929
|
+
setTimeout(function () {doc.body.removeChild(doc.getElementById('rgraph_hblinds_3_' + obj.id));}, duration);
|
930
|
+
setTimeout(function () {doc.body.removeChild(doc.getElementById('rgraph_hblinds_4_' + obj.id));}, duration);
|
931
|
+
setTimeout(function () {callback(obj);}, duration);
|
932
|
+
|
933
|
+
return this;
|
934
|
+
};
|
935
|
+
|
936
|
+
|
937
|
+
|
938
|
+
|
939
|
+
/**
|
940
|
+
* Horizontal Blinds (close)
|
941
|
+
*
|
942
|
+
* @params object obj The graph object
|
943
|
+
*/
|
944
|
+
RG.Effects.Common.hBlindsClose =
|
945
|
+
RG.Effects.Common.hblindsclose = function ()
|
946
|
+
{
|
947
|
+
// This function gets added to the chart object - so the this
|
948
|
+
// variable is the chart object
|
949
|
+
var obj = this;
|
950
|
+
var opt = arguments[0] || {};
|
951
|
+
var frames = opt.frames || 60;
|
952
|
+
var duration = (frames / 60) * 1000;
|
953
|
+
var frame = 0;
|
954
|
+
var callback = arguments[1] || function () {};
|
955
|
+
var color = opt.background || opt.color || opt.backgroundColor || 'white';
|
956
|
+
var xy = RG.getCanvasXY(this.canvas);
|
957
|
+
var height = this.canvas.height / 5;
|
958
|
+
|
959
|
+
|
960
|
+
|
961
|
+
for (var i=0; i<5; ++i) {
|
962
|
+
var div = doc.createElement('DIV');
|
963
|
+
div.id = 'rgraph_hblinds_' + i + '_' + obj.id;
|
964
|
+
div.style.width = this.canvas.width + 'px';
|
965
|
+
div.style.height = 0;
|
966
|
+
div.style.left = xy[0] + 'px';
|
967
|
+
div.style.top = (xy[1] + (this.canvas.height * (i / 5))) + 'px';
|
968
|
+
div.style.position = 'absolute';
|
969
|
+
div.style.backgroundColor = color;
|
970
|
+
doc.body.appendChild(div);
|
971
|
+
|
972
|
+
jQuery('#rgraph_hblinds_' + i + '_' + obj.id).animate({height: height + 'px'}, duration);
|
973
|
+
}
|
974
|
+
|
975
|
+
|
976
|
+
|
977
|
+
setTimeout(function () {RG.clear(obj.canvas);}, duration + 100);
|
978
|
+
setTimeout(function () {doc.body.removeChild(doc.getElementById('rgraph_hblinds_0_' + obj.id));}, duration + 100);
|
979
|
+
setTimeout(function () {doc.body.removeChild(doc.getElementById('rgraph_hblinds_1_' + obj.id));}, duration + 100);
|
980
|
+
setTimeout(function () {doc.body.removeChild(doc.getElementById('rgraph_hblinds_2_' + obj.id));}, duration + 100);
|
981
|
+
setTimeout(function () {doc.body.removeChild(doc.getElementById('rgraph_hblinds_3_' + obj.id));}, duration + 100);
|
982
|
+
setTimeout(function () {doc.body.removeChild(doc.getElementById('rgraph_hblinds_4_' + obj.id));}, duration + 100);
|
983
|
+
setTimeout(function () {callback(obj);}, duration + 100);
|
984
|
+
};
|
985
|
+
|
986
|
+
|
987
|
+
|
988
|
+
|
989
|
+
/**
|
990
|
+
* Vertical Blinds (open)
|
991
|
+
*
|
992
|
+
* @params object obj The graph object
|
993
|
+
*/
|
994
|
+
RG.Effects.Common.vBlindsOpen =
|
995
|
+
RG.Effects.Common.vblindsopen = function ()
|
996
|
+
{
|
997
|
+
// This function gets added to the chart object - so the this
|
998
|
+
// variable is the chart object
|
999
|
+
var obj = this;
|
1000
|
+
var opt = arguments[0] || {};
|
1001
|
+
var frames = opt.frames || 60;
|
1002
|
+
var duration = (frames / 60) * 1000;
|
1003
|
+
var frame = 0;
|
1004
|
+
var callback = arguments[1] || function () {};
|
1005
|
+
var color = opt.background || opt.color || opt.backgroundColor || 'white';
|
1006
|
+
var xy = RG.getCanvasXY(this.canvas);
|
1007
|
+
var width = this.canvas.width / 10;
|
1008
|
+
|
1009
|
+
/**
|
1010
|
+
* First draw the chart
|
1011
|
+
*/
|
1012
|
+
//RG.clear(obj.canvas);
|
1013
|
+
RG.redrawCanvas(obj.canvas);
|
1014
|
+
|
1015
|
+
for (var i=0; i<10; ++i) {
|
1016
|
+
var div = doc.createElement('DIV');
|
1017
|
+
div.id = 'rgraph_vblinds_' + i + '_' + obj.id;
|
1018
|
+
div.style.width = width + 'px';
|
1019
|
+
div.style.height = this.canvas.height + 'px';
|
1020
|
+
div.style.left = (xy[0] + (this.canvas.width * (i / 10))) + 'px';
|
1021
|
+
div.style.top = (xy[1]) + 'px';
|
1022
|
+
div.style.position = 'absolute';
|
1023
|
+
div.style.backgroundColor = color;
|
1024
|
+
doc.body.appendChild(div);
|
1025
|
+
|
1026
|
+
jQuery('#rgraph_vblinds_' + i + '_' + obj.id).animate({width: 0}, duration);
|
1027
|
+
}
|
1028
|
+
|
1029
|
+
setTimeout(function () {doc.body.removeChild(doc.getElementById('rgraph_vblinds_0_' + obj.id));}, duration + 100);
|
1030
|
+
setTimeout(function () {doc.body.removeChild(doc.getElementById('rgraph_vblinds_1_' + obj.id));}, duration + 100);
|
1031
|
+
setTimeout(function () {doc.body.removeChild(doc.getElementById('rgraph_vblinds_2_' + obj.id));}, duration + 100);
|
1032
|
+
setTimeout(function () {doc.body.removeChild(doc.getElementById('rgraph_vblinds_3_' + obj.id));}, duration + 100);
|
1033
|
+
setTimeout(function () {doc.body.removeChild(doc.getElementById('rgraph_vblinds_4_' + obj.id));}, duration + 100);
|
1034
|
+
setTimeout(function () {doc.body.removeChild(doc.getElementById('rgraph_vblinds_5_' + obj.id));}, duration + 100);
|
1035
|
+
setTimeout(function () {doc.body.removeChild(doc.getElementById('rgraph_vblinds_6_' + obj.id));}, duration + 100);
|
1036
|
+
setTimeout(function () {doc.body.removeChild(doc.getElementById('rgraph_vblinds_7_' + obj.id));}, duration + 100);
|
1037
|
+
setTimeout(function () {doc.body.removeChild(doc.getElementById('rgraph_vblinds_8_' + obj.id));}, duration + 100);
|
1038
|
+
setTimeout(function () {doc.body.removeChild(doc.getElementById('rgraph_vblinds_9_' + obj.id));}, duration + 100);
|
1039
|
+
|
1040
|
+
setTimeout(function () {callback(obj);}, duration + 100);
|
1041
|
+
|
1042
|
+
return this;
|
1043
|
+
};
|
1044
|
+
|
1045
|
+
|
1046
|
+
|
1047
|
+
|
1048
|
+
/**
|
1049
|
+
* Vertical Blinds (close)
|
1050
|
+
*
|
1051
|
+
* @params object obj The graph object
|
1052
|
+
*/
|
1053
|
+
RG.Effects.Common.vblindsclose =
|
1054
|
+
RG.Effects.Common.vBlindsClose = function ()
|
1055
|
+
{
|
1056
|
+
// This function gets added to the chart object - so the this
|
1057
|
+
// variable is the chart object
|
1058
|
+
var obj = this;
|
1059
|
+
var opt = arguments[0] || {};
|
1060
|
+
var frames = opt.frames || 60;
|
1061
|
+
var duration = (frames / 60) * 1000;
|
1062
|
+
var frame = 0;
|
1063
|
+
var callback = arguments[1] || function () {};
|
1064
|
+
var color = opt.background || opt.color || opt.backgroundColor || 'white';
|
1065
|
+
var xy = RG.getCanvasXY(this.canvas);
|
1066
|
+
var width = this.canvas.width / 10;
|
1067
|
+
|
1068
|
+
// Don't draw the chart
|
1069
|
+
|
1070
|
+
// Create the blinds
|
1071
|
+
for (var i=0; i<10; ++i) {
|
1072
|
+
var div = doc.createElement('DIV');
|
1073
|
+
div.id = 'rgraph_vblinds_' + i + '_' + obj.id;
|
1074
|
+
div.style.width = 0;
|
1075
|
+
div.style.height = this.canvas.height + 'px';
|
1076
|
+
div.style.left = (xy[0] + (this.canvas.width * (i / 10))) + 'px';
|
1077
|
+
div.style.top = (xy[1]) + 'px';
|
1078
|
+
div.style.position = 'absolute';
|
1079
|
+
div.style.backgroundColor = color;
|
1080
|
+
doc.body.appendChild(div);
|
1081
|
+
|
1082
|
+
jQuery('#rgraph_vblinds_' + i + '_' + obj.id).animate({width: width}, duration);
|
1083
|
+
}
|
1084
|
+
|
1085
|
+
setTimeout(function () {RG.clear(obj.canvas);}, duration + 100);
|
1086
|
+
|
1087
|
+
setTimeout(function () {doc.body.removeChild(doc.getElementById('rgraph_vblinds_0_' + obj.id));}, duration + 100);
|
1088
|
+
setTimeout(function () {doc.body.removeChild(doc.getElementById('rgraph_vblinds_1_' + obj.id));}, duration + 100);
|
1089
|
+
setTimeout(function () {doc.body.removeChild(doc.getElementById('rgraph_vblinds_2_' + obj.id));}, duration + 100);
|
1090
|
+
setTimeout(function () {doc.body.removeChild(doc.getElementById('rgraph_vblinds_3_' + obj.id));}, duration + 100);
|
1091
|
+
setTimeout(function () {doc.body.removeChild(doc.getElementById('rgraph_vblinds_4_' + obj.id));}, duration + 100);
|
1092
|
+
setTimeout(function () {doc.body.removeChild(doc.getElementById('rgraph_vblinds_5_' + obj.id));}, duration + 100);
|
1093
|
+
setTimeout(function () {doc.body.removeChild(doc.getElementById('rgraph_vblinds_6_' + obj.id));}, duration + 100);
|
1094
|
+
setTimeout(function () {doc.body.removeChild(doc.getElementById('rgraph_vblinds_7_' + obj.id));}, duration + 100);
|
1095
|
+
setTimeout(function () {doc.body.removeChild(doc.getElementById('rgraph_vblinds_8_' + obj.id));}, duration + 100);
|
1096
|
+
setTimeout(function () {doc.body.removeChild(doc.getElementById('rgraph_vblinds_9_' + obj.id));}, duration + 100);
|
1097
|
+
|
1098
|
+
setTimeout(function () {callback(obj);}, duration + 100);
|
1099
|
+
|
1100
|
+
return this;
|
1101
|
+
};
|
1102
|
+
|
1103
|
+
|
1104
|
+
|
1105
|
+
|
1106
|
+
/**
|
1107
|
+
* Slide in
|
1108
|
+
*
|
1109
|
+
* This function is a wipe that can be used when switching the canvas to a new graph
|
1110
|
+
*
|
1111
|
+
* @param object obj The graph object
|
1112
|
+
*/
|
1113
|
+
RG.Effects.Common.slideIn = function ()
|
1114
|
+
{
|
1115
|
+
// This function gets added to the chart object - so the this
|
1116
|
+
// variable is the chart object
|
1117
|
+
var obj = this;
|
1118
|
+
var opt = arguments[0] || {};
|
1119
|
+
var frames = opt.frames || 60;
|
1120
|
+
var duration = (frames / 60) * 1000;
|
1121
|
+
var frame = 0;
|
1122
|
+
var callback = arguments[1] || function () {};
|
1123
|
+
var color = opt.background || opt.color || opt.backgroundColor || 'white';
|
1124
|
+
var xy = RG.getCanvasXY(this.canvas);
|
1125
|
+
var width = this.canvas.width / 10;
|
1126
|
+
var div = RG.Effects.wrap(obj.canvas);
|
1127
|
+
var from = opt.from || 'left';
|
1128
|
+
|
1129
|
+
div.style.overflow = 'hidden';
|
1130
|
+
|
1131
|
+
RG.clear(obj.canvas);
|
1132
|
+
RG.redrawCanvas(obj.canvas);
|
1133
|
+
|
1134
|
+
|
1135
|
+
canvas.style.position = 'relative';
|
1136
|
+
|
1137
|
+
if (from == 'left') {
|
1138
|
+
obj.canvas.style.left = (0 - div.offsetWidth) + 'px';
|
1139
|
+
obj.canvas.style.top = 0;
|
1140
|
+
} else if (from == 'top') {
|
1141
|
+
obj.canvas.style.left = 0;
|
1142
|
+
obj.canvas.style.top = (0 - div.offsetHeight) + 'px';
|
1143
|
+
} else if (from == 'bottom') {
|
1144
|
+
obj.canvas.style.left = 0;
|
1145
|
+
obj.canvas.style.top = div.offsetHeight + 'px';
|
1146
|
+
} else {
|
1147
|
+
obj.canvas.style.left = div.offsetWidth + 'px';
|
1148
|
+
obj.canvas.style.top = 0;
|
1149
|
+
}
|
1150
|
+
|
1151
|
+
jQuery('#' + obj.id).animate({left:0,top:0}, duration, function ()
|
1152
|
+
{
|
1153
|
+
callback(obj);
|
1154
|
+
});
|
1155
|
+
|
1156
|
+
return this;
|
1157
|
+
};
|
1158
|
+
|
1159
|
+
|
1160
|
+
|
1161
|
+
|
1162
|
+
/**
|
1163
|
+
* Slide out
|
1164
|
+
*
|
1165
|
+
* This function is a wipe that can be used when switching the canvas to a new graph
|
1166
|
+
*
|
1167
|
+
* @param object Optional object containing configuration.
|
1168
|
+
* @param function Optional callback function
|
1169
|
+
*/
|
1170
|
+
RG.Effects.Common.slideOut = function ()
|
1171
|
+
{
|
1172
|
+
// This function gets added to the chart object - so the this
|
1173
|
+
// variable is the chart object
|
1174
|
+
var obj = this;
|
1175
|
+
var opt = arguments[0] || {};
|
1176
|
+
var frames = opt.frames || 60;
|
1177
|
+
var duration = (frames / 60) * 1000;
|
1178
|
+
var frame = 0;
|
1179
|
+
var callback = arguments[1] || function () {};
|
1180
|
+
var color = opt.background || opt.color || opt.backgroundColor || 'white';
|
1181
|
+
var xy = RG.getCanvasXY(this.canvas);
|
1182
|
+
var width = this.canvas.width / 10;
|
1183
|
+
var div = RG.Effects.wrap(obj.canvas);
|
1184
|
+
var to = opt.to || 'left';
|
1185
|
+
|
1186
|
+
div.style.overflow= 'hidden';
|
1187
|
+
|
1188
|
+
obj.canvas.style.position = 'relative';
|
1189
|
+
obj.canvas.style.left = 0;
|
1190
|
+
obj.canvas.style.top = 0;
|
1191
|
+
|
1192
|
+
if (to == 'left') {
|
1193
|
+
jQuery('#' + obj.id).animate({left: (0 - obj.canvas.width) + 'px'}, duration, function () {callback(obj);});
|
1194
|
+
} else if (to == 'top') {
|
1195
|
+
jQuery('#' + obj.id).animate({left: 0, top: (0 - div.offsetHeight) + 'px'}, duration, function () {callback(obj);});
|
1196
|
+
} else if (to == 'bottom') {
|
1197
|
+
jQuery('#' + obj.id).animate({top: (0 + div.offsetHeight) + 'px'}, duration, function () {callback(obj);});
|
1198
|
+
} else {
|
1199
|
+
jQuery('#' + obj.id).animate({left: (0 + obj.canvas.width) + 'px'}, duration, function () {callback(obj);});
|
1200
|
+
}
|
1201
|
+
|
1202
|
+
return this;
|
1203
|
+
};
|
1204
|
+
|
1205
|
+
|
1206
|
+
|
1207
|
+
|
1208
|
+
/**
|
1209
|
+
* Horizontal Scissors (open)
|
1210
|
+
*
|
1211
|
+
* @param @object Optional array of options
|
1212
|
+
* @param function Optional callback function
|
1213
|
+
*
|
1214
|
+
*/
|
1215
|
+
RG.Effects.Common.hscissorsopen =
|
1216
|
+
RG.Effects.Common.hScissorsOpen = function ()
|
1217
|
+
{
|
1218
|
+
// This function gets added to the chart object - so the this
|
1219
|
+
// variable is the chart object
|
1220
|
+
var obj = this;
|
1221
|
+
var opt = arguments[0] || {};
|
1222
|
+
var frames = opt.frames || 60;
|
1223
|
+
var duration = (frames / 60) * 1000;
|
1224
|
+
var frame = 0;
|
1225
|
+
var callback = arguments[1] || function () {};
|
1226
|
+
var color = opt.background || opt.color || opt.backgroundColor || 'white';
|
1227
|
+
var xy = RG.getCanvasXY(this.canvas);
|
1228
|
+
var width = this.canvas.width / 10;
|
1229
|
+
var to = opt.to || 'left';
|
1230
|
+
var height = obj.canvas.height / 5;
|
1231
|
+
|
1232
|
+
/**
|
1233
|
+
* First draw the chart
|
1234
|
+
*/
|
1235
|
+
RG.clear(obj.canvas);
|
1236
|
+
RG.redrawCanvas(obj.canvas);
|
1237
|
+
|
1238
|
+
for (var i=0; i<5; ++i) {
|
1239
|
+
var div = doc.getElementById("rgraph_hscissors_" + i + '_' + obj.id)
|
1240
|
+
if (!div) {
|
1241
|
+
var div = doc.createElement('DIV');
|
1242
|
+
div.id = 'rgraph_hscissors_' + i + '_' + obj.id;
|
1243
|
+
div.style.width = obj.canvas.width + 'px';
|
1244
|
+
div.style.height = height + 'px';
|
1245
|
+
div.style.left = xy[0] + 'px';
|
1246
|
+
div.style.top = (xy[1] + (obj.canvas.height * (i / 5))) + 'px';
|
1247
|
+
div.style.position = 'absolute';
|
1248
|
+
div.style.backgroundColor = color;
|
1249
|
+
doc.body.appendChild(div);
|
1250
|
+
}
|
1251
|
+
|
1252
|
+
if (i % 2 == 0) {
|
1253
|
+
jQuery('#' + 'rgraph_hscissors_' + i + '_' + obj.id).animate({left: xy[0] + obj.canvas.width + 'px', width: 0}, duration);
|
1254
|
+
} else {
|
1255
|
+
jQuery('#' + 'rgraph_hscissors_' + i + '_' + obj.id).animate({width: 0}, duration);
|
1256
|
+
}
|
1257
|
+
}
|
1258
|
+
|
1259
|
+
setTimeout(function ()
|
1260
|
+
{
|
1261
|
+
doc.body.removeChild(doc.getElementById('rgraph_hscissors_0_' + obj.id));
|
1262
|
+
doc.body.removeChild(doc.getElementById('rgraph_hscissors_1_' + obj.id));
|
1263
|
+
doc.body.removeChild(doc.getElementById('rgraph_hscissors_2_' + obj.id));
|
1264
|
+
doc.body.removeChild(doc.getElementById('rgraph_hscissors_3_' + obj.id));
|
1265
|
+
doc.body.removeChild(doc.getElementById('rgraph_hscissors_4_' + obj.id));
|
1266
|
+
|
1267
|
+
callback(obj);
|
1268
|
+
}, duration);
|
1269
|
+
|
1270
|
+
|
1271
|
+
return this;
|
1272
|
+
};
|
1273
|
+
|
1274
|
+
|
1275
|
+
|
1276
|
+
|
1277
|
+
/**
|
1278
|
+
* Horizontal Scissors (Close)
|
1279
|
+
*
|
1280
|
+
* @param @object Optional object of options
|
1281
|
+
* @param function Optional callback function
|
1282
|
+
*
|
1283
|
+
*/
|
1284
|
+
RG.Effects.Common.hScissorsClose =
|
1285
|
+
RG.Effects.Common.hscissorsclose = function ()
|
1286
|
+
{
|
1287
|
+
// This function gets added to the chart object - so the this
|
1288
|
+
// variable is the chart object
|
1289
|
+
var obj = this;
|
1290
|
+
var opt = arguments[0] || {};
|
1291
|
+
var frames = opt.frames || 60;
|
1292
|
+
var duration = (frames / 60) * 1000;
|
1293
|
+
var frame = 0;
|
1294
|
+
var callback = arguments[1] || function () {};
|
1295
|
+
var color = opt.background || opt.color || opt.backgroundColor || 'white';
|
1296
|
+
var xy = RG.getCanvasXY(this.canvas);
|
1297
|
+
var height = obj.canvas.height / 5;
|
1298
|
+
|
1299
|
+
|
1300
|
+
|
1301
|
+
/**
|
1302
|
+
* First draw the chart
|
1303
|
+
*/
|
1304
|
+
//RG.clear(obj.canvas);
|
1305
|
+
RG.redrawCanvas(obj.canvas);
|
1306
|
+
|
1307
|
+
for (var i=0; i<5; ++i) {
|
1308
|
+
var div = doc.createElement('DIV');
|
1309
|
+
div.id = 'rgraph_hscissors_' + i + '_' + obj.id;
|
1310
|
+
div.style.width = 0;
|
1311
|
+
div.style.height = height + 'px';
|
1312
|
+
div.style.left = (i % 2 == 0 ? xy[0] + obj.canvas.width : xy[0]) + 'px';
|
1313
|
+
div.style.top = (xy[1] + (obj.canvas.height * (i / 5))) + 'px';
|
1314
|
+
div.style.position = 'absolute';
|
1315
|
+
div.style.backgroundColor = color;
|
1316
|
+
doc.body.appendChild(div);
|
1317
|
+
|
1318
|
+
if (i % 2 == 0) {
|
1319
|
+
jQuery('#' + 'rgraph_hscissors_' + i + '_' + obj.id).animate({left: xy[0] + 'px', width: obj.canvas.width + 'px'}, duration);
|
1320
|
+
} else {
|
1321
|
+
jQuery('#' + 'rgraph_hscissors_' + i + '_' + obj.id).animate({width: obj.canvas.width + 'px'}, duration);
|
1322
|
+
}
|
1323
|
+
}
|
1324
|
+
|
1325
|
+
setTimeout(function ()
|
1326
|
+
{
|
1327
|
+
RGraph.clear(obj.canvas);
|
1328
|
+
jQuery('#' + 'rgraph_hscissors_' + 0 + '_' + obj.id).remove();
|
1329
|
+
jQuery('#' + 'rgraph_hscissors_' + 1 + '_' + obj.id).remove();
|
1330
|
+
jQuery('#' + 'rgraph_hscissors_' + 2 + '_' + obj.id).remove();
|
1331
|
+
jQuery('#' + 'rgraph_hscissors_' + 3 + '_' + obj.id).remove();
|
1332
|
+
jQuery('#' + 'rgraph_hscissors_' + 4 + '_' + obj.id).remove();
|
1333
|
+
callback(obj);
|
1334
|
+
}, duration);
|
1335
|
+
|
1336
|
+
return this;
|
1337
|
+
};
|
1338
|
+
|
1339
|
+
|
1340
|
+
|
1341
|
+
|
1342
|
+
/**
|
1343
|
+
* Vertical Scissors (open)
|
1344
|
+
*
|
1345
|
+
* @param @object Optional object of options
|
1346
|
+
* @param function Optional callback function
|
1347
|
+
*
|
1348
|
+
*/
|
1349
|
+
RG.Effects.Common.vScissorsOpen =
|
1350
|
+
RG.Effects.Common.vscissorsopen = function ()
|
1351
|
+
{
|
1352
|
+
// This function gets added to the chart object - so the this
|
1353
|
+
// variable is the chart object
|
1354
|
+
var obj = this;
|
1355
|
+
var opt = arguments[0] || {};
|
1356
|
+
var frames = opt.frames || 60;
|
1357
|
+
var duration = (frames / 60) * 1000;
|
1358
|
+
var frame = 0;
|
1359
|
+
var callback = arguments[1] || function () {};
|
1360
|
+
var xy = RG.getCanvasXY(obj.canvas);
|
1361
|
+
var color = opt.background || opt.color || opt.backgroundColor || 'white';
|
1362
|
+
var xy = RG.getCanvasXY(this.canvas);
|
1363
|
+
var width = this.canvas.width / 10;
|
1364
|
+
|
1365
|
+
/**
|
1366
|
+
* First draw the chart
|
1367
|
+
*/
|
1368
|
+
//RG.clear(obj.canvas);
|
1369
|
+
RG.redrawCanvas(obj.canvas);
|
1370
|
+
|
1371
|
+
for (var i=0; i<10; ++i) {
|
1372
|
+
var div = doc.getElementById("rgraph_vscissors_" + i + '_' + obj.id);
|
1373
|
+
|
1374
|
+
if (!div) {
|
1375
|
+
var div = doc.createElement('DIV');
|
1376
|
+
div.id = 'rgraph_vscissors_' + i + '_' + obj.id;
|
1377
|
+
div.style.width = width + 'px';
|
1378
|
+
div.style.height = obj.canvas.height + 'px';
|
1379
|
+
div.style.left = xy[0] + (obj.canvas.width * (i / 10)) + 'px';
|
1380
|
+
div.style.top = xy[1] + 'px';
|
1381
|
+
div.style.position = 'absolute';
|
1382
|
+
div.style.backgroundColor = color;
|
1383
|
+
doc.body.appendChild(div);
|
1384
|
+
}
|
1385
|
+
|
1386
|
+
if (i % 2 == 0) {
|
1387
|
+
jQuery('#' + 'rgraph_vscissors_' + i + '_' + obj.id).animate({top: xy[1] + obj.canvas.height + 'px', height: 0}, duration);
|
1388
|
+
} else {
|
1389
|
+
jQuery('#' + 'rgraph_vscissors_' + i + '_' + obj.id).animate({height: 0}, duration);
|
1390
|
+
}
|
1391
|
+
}
|
1392
|
+
|
1393
|
+
setTimeout(function ()
|
1394
|
+
{
|
1395
|
+
doc.body.removeChild(doc.getElementById('rgraph_vscissors_0' + '_' + obj.id));
|
1396
|
+
doc.body.removeChild(doc.getElementById('rgraph_vscissors_1' + '_' + obj.id));
|
1397
|
+
doc.body.removeChild(doc.getElementById('rgraph_vscissors_2' + '_' + obj.id));
|
1398
|
+
doc.body.removeChild(doc.getElementById('rgraph_vscissors_3' + '_' + obj.id));
|
1399
|
+
doc.body.removeChild(doc.getElementById('rgraph_vscissors_4' + '_' + obj.id));
|
1400
|
+
|
1401
|
+
callback(obj);
|
1402
|
+
|
1403
|
+
}, duration);
|
1404
|
+
|
1405
|
+
return this;
|
1406
|
+
};
|
1407
|
+
|
1408
|
+
|
1409
|
+
|
1410
|
+
|
1411
|
+
/**
|
1412
|
+
* Vertical Scissors (close)
|
1413
|
+
*
|
1414
|
+
* @param object obj The graph object
|
1415
|
+
* @param @object An array of options
|
1416
|
+
* @param function Optional callback function
|
1417
|
+
*
|
1418
|
+
*/
|
1419
|
+
RG.Effects.Common.vscissorsclose =
|
1420
|
+
RG.Effects.Common.vScissorsClose = function ()
|
1421
|
+
{
|
1422
|
+
// This function gets added to the chart object - so the this
|
1423
|
+
// variable is the chart object
|
1424
|
+
var obj = this;
|
1425
|
+
var opt = arguments[0] || {};
|
1426
|
+
var frames = opt.frames || 60;
|
1427
|
+
var duration = (frames / 60) * 1000;
|
1428
|
+
var frame = 0;
|
1429
|
+
var callback = arguments[1] || function () {};
|
1430
|
+
var xy = RG.getCanvasXY(obj.canvas);
|
1431
|
+
var color = opt.background || opt.color || opt.backgroundColor || 'white';
|
1432
|
+
var xy = RG.getCanvasXY(this.canvas);
|
1433
|
+
var width = this.canvas.width / 10;
|
1434
|
+
|
1435
|
+
/**
|
1436
|
+
* First draw the chart
|
1437
|
+
*/
|
1438
|
+
//RG.clear(obj.canvas);
|
1439
|
+
RG.redrawCanvas(obj.canvas);
|
1440
|
+
|
1441
|
+
for (var i=0; i<10; ++i) {
|
1442
|
+
var div = doc.getElementById("rgraph_vscissors_" + i + '_' + obj.id)
|
1443
|
+
if (!div) {
|
1444
|
+
var div = doc.createElement('DIV');
|
1445
|
+
div.id = 'rgraph_vscissors_' + i + '_' + obj.id;
|
1446
|
+
div.style.width = width + 'px';
|
1447
|
+
div.style.height = 0;
|
1448
|
+
div.style.left = xy[0] + (width * i) + 'px';
|
1449
|
+
div.style.top = (i % 2 == 0 ? xy[1] + obj.canvas.height : xy[1]) + 'px';
|
1450
|
+
div.style.position = 'absolute';
|
1451
|
+
div.style.backgroundColor = color;
|
1452
|
+
doc.body.appendChild(div);
|
1453
|
+
}
|
1454
|
+
|
1455
|
+
if (i % 2 == 0) {
|
1456
|
+
jQuery('#' + 'rgraph_vscissors_' + i + '_' + obj.id).animate({top: xy[1] + 'px', height: obj.canvas.height + 'px'}, duration);
|
1457
|
+
} else {
|
1458
|
+
jQuery('#' + 'rgraph_vscissors_' + i + '_' + obj.id).animate({height: obj.canvas.height + 'px'}, duration);
|
1459
|
+
}
|
1460
|
+
}
|
1461
|
+
|
1462
|
+
setTimeout(function ()
|
1463
|
+
{
|
1464
|
+
RG.clear(obj.canvas);
|
1465
|
+
for (var i=0; i<10; i++) {
|
1466
|
+
jQuery('#rgraph_vscissors_' + i + '_' + obj.id).remove();
|
1467
|
+
}
|
1468
|
+
callback(obj);
|
1469
|
+
}, duration);
|
1470
|
+
|
1471
|
+
return this;
|
1472
|
+
};
|
1473
|
+
|
1474
|
+
|
1475
|
+
|
1476
|
+
|
1477
|
+
/**
|
1478
|
+
* The Animate function. Similar to the jQuery Animate() function - simply pass it a
|
1479
|
+
* map of the properties and their target values, and this function will animate
|
1480
|
+
* them to get to those values.
|
1481
|
+
*
|
1482
|
+
* @param object map A map (an associative array) of the properties and their target values.
|
1483
|
+
* @param An optional function which will be called when the animation is complete
|
1484
|
+
*/
|
1485
|
+
RG.Effects.Common.animate = function (map)
|
1486
|
+
{
|
1487
|
+
var obj = this;
|
1488
|
+
obj.draw();
|
1489
|
+
|
1490
|
+
var totalFrames = (map && map['frames']) ? map['frames'] : 30;
|
1491
|
+
var currentFrame = new Array();
|
1492
|
+
var originalValues = new Array();
|
1493
|
+
var diffs = new Array();
|
1494
|
+
var steps = new Array();
|
1495
|
+
var callback = arguments[1]
|
1496
|
+
|
1497
|
+
function iterator ()
|
1498
|
+
{
|
1499
|
+
var id = [obj.id + '_' + obj.type];
|
1500
|
+
|
1501
|
+
// Initialise the arrays
|
1502
|
+
if (!currentFrame[id]) {
|
1503
|
+
currentFrame[id] = totalFrames;
|
1504
|
+
originalValues[id] = {};
|
1505
|
+
diffs[id] = {};
|
1506
|
+
steps[id] = {};
|
1507
|
+
}
|
1508
|
+
|
1509
|
+
for (var i in map) {
|
1510
|
+
if (typeof map[i] === 'string' || typeof map[i] === 'number') {
|
1511
|
+
|
1512
|
+
// If this the first frame, record the proginal value
|
1513
|
+
if (currentFrame[id] == totalFrames) {
|
1514
|
+
originalValues[id][i] = obj.get(i);
|
1515
|
+
diffs[id][i] = map[i] - originalValues[id][i];
|
1516
|
+
steps[id][i] = diffs[id][i] / totalFrames;
|
1517
|
+
}
|
1518
|
+
|
1519
|
+
obj.set(i, obj.get(i) + steps[id][i]);
|
1520
|
+
|
1521
|
+
RG.clear(obj.canvas);
|
1522
|
+
obj.draw();
|
1523
|
+
}
|
1524
|
+
}
|
1525
|
+
|
1526
|
+
// If the current frame number is above zero, run the animation iterator again
|
1527
|
+
if (--currentFrame[id] > 0) {
|
1528
|
+
RG.Effects.updateCanvas(iterator);
|
1529
|
+
|
1530
|
+
// Optional callback
|
1531
|
+
} else {
|
1532
|
+
|
1533
|
+
if (typeof callback === 'function') {
|
1534
|
+
callback(obj);
|
1535
|
+
}
|
1536
|
+
}
|
1537
|
+
}
|
1538
|
+
|
1539
|
+
iterator();
|
1540
|
+
}
|
1541
|
+
|
1542
|
+
|
1543
|
+
|
1544
|
+
|
1545
|
+
// End Module pattern
|
1546
|
+
})(window, document);
|