/
animation.html
270 lines (225 loc) · 12.8 KB
/
animation.html
1
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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
<?php ob_start('ob_gzhandler') ?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<!--
/**
* o------------------------------------------------------------------------------o
* | This file is part of the RGraph package - you can learn more at: |
* | |
* | http://www.rgraph.net |
* | |
* | This package is licensed under the RGraph license. For all kinds of business |
* | purposes there is a small one-time licensing fee to pay and for non |
* | commercial purposes it is free to use. You can read the full license here: |
* | |
* | http://www.rgraph.net/LICENSE.txt |
* o------------------------------------------------------------------------------o
*/
-->
<title>RGraph: Javascript charts and graph library - Animating your charts</title>
<meta name="keywords" content="rgraph html5 canvas chart docs animation" />
<meta name="description" content="RGraph: Javascript charts and graph library - Documentation about animating your charts" />
<meta property="og:title" content="RGraph: Javascript charts and graph library" />
<meta property="og:description" content="A chart library based on the HTML5 canvas tag" />
<meta property="og:image" content="http://www.rgraph.net/images/logo.png"/>
<link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
<link rel="icon" type="image/png" href="../images/favicon.png">
<script src="../libraries/RGraph.common.core.js" ></script>
<script src="../libraries/RGraph.rose.js" ></script>
<script src="../libraries/RGraph.bar.js" ></script>
<script src="../libraries/RGraph.line.js" ></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></script>
<!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
<script>
/**
* The total number of frames, delay and current frame number
*/
delay = 35;
curframe = 1;
numframe = 20;
window.onload = function ()
{
/**
* Clear all of the canvases
*/
RGraph.Clear(document.getElementById("myRose"));
/**
* Draw the bar chart
*/
var multiplier = curframe / numframe;
var rose = new RGraph.Rose('myRose', [45 * multiplier, 12 * multiplier,
16 * multiplier, 18 * multiplier,
44 * multiplier, 54 * multiplier,
23 * multiplier, 21 * multiplier,
56 * multiplier, 58 * multiplier,
33 * multiplier, 47 * multiplier] );
rose.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
rose.Set('chart.ymax', 60); // This stops the scale from changing frame to frame
rose.Set('chart.hmargin', 5);
rose.Set('chart.gutter.left', 30);
rose.Set('chart.gutter.right', 30);
rose.Set('chart.gutter.top', 30);
rose.Set('chart.gutter.bottom', 30);
// Gradient
var grad = rose.context.createRadialGradient(rose.canvas.width / 2,
rose.canvas.height / 2,
0,
rose.canvas.width / 2,
rose.canvas.height / 2,
150);
grad.addColorStop(0, 'white');
grad.addColorStop(1, 'red');
rose.Set('chart.colors', [grad]);
rose.Set('chart.strokecolor', null);
rose.Draw();
/**
* If the animation frame is less than number of the total number of frames, redraw the canvas
*/
if (curframe < numframe) {
curframe++;
setTimeout(window.onload, delay);
}
}
</script>
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-54706-2']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<!-- Social networking buttons -->
<div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed">
<a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20charts%20types&title=RGraph:Javascript%20charts%20and%20graphs%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" align="absmiddle" /></a>
<a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+and+graph+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank"><img src="../images/twitter.png" id="twitter_icon" alt="tweet this site" width="22" height="22" border="0" align="absmiddle" /></a>
<a title="Share RGraph on Facebook" href="" onclick="window.open('http://www.facebook.com/sharer.php?u=http://www.rgraph.net&t=RGraph:%20Javascript%20chart%20and%20graph%20library', 'facebook_window', 'width=500,height=400,top=100,left=100'); return false"><img src="../images/facebook.png" width="22" height="22" alt="Post to Facebook" align="absmiddle" border="0"/></a>
</div>
<script>
// Opera fix
if (navigator.userAgent.indexOf('Opera') == -1) {
document.getElementById("social_icons").style.position = 'fixed';
}
</script>
<!-- Social networking buttons -->
<div id="breadcrumb">
<a href="../index.html">RGraph: Javascript charts and graph library</a>
>
<a href="index.html">Documentation</a>
>
Animating your charts
</div>
<h1>RGraph: Javascript charts and graph library - Animating your charts</h1>
<script>
if (RGraph.isIE8()) {
document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag. Click <a href="http://support.rgraph.net/message/rgraph-in-internet-explorer-9.html" target="_blank">here</a> to see some screenshots.</div>');
}
</script>
<div style="float: right">
<canvas id="myRose" width="300" height="300">[No canvas support]</canvas>
</div>
<p>
Animating your charts is a relatively easy affair, whilst not being supported natively as it would only serve to
over-complicate the RGraph libraries. The way to do it is to use
the function <i>RGraph.Clear(canvas)</i>, passing it your canvas object that is returned by
<i>document.getElementById()</i>. By default this will revert the canvas back to transparency. You can change this by
passing it the color you want it to use as the second (optional) argument. You could even use a gradient if
you wanted. Then you can simply redraw the entire chart.
</p>
<p>
One thing you should note, is that you may have to specify the scale manually, to prevent it from changing
from frame to frame. This can be done by using the <i>chart.ymax</i> property.
</p>
<p>
You can review the source of this page if you need further help. Two global variables are set - the number of frames
and the current frame number (which starts at one). The charts are then drawn with appropriate data
(ie the data multiplied by the frame number over the total number of frames). If the frame number is less than
the total number of frames, the frame number is incremented and the function (window.onload) is called again
after a small delay.
</p>
<h4>Animation using jQuery</h4>
<div style="width: 600px; height: 250px; display: inline; display: inline-block; float: right">
<canvas id="myLine" width="600" height="250" style="position: relative">[No canvas support]</canvas>
</div>
<button style="width: 600px; float: right" id="butAnimate" onclick="Animate(); this.disabled = true; setTimeout(function () {document.getElementById('butAnimate').disabled = false;}, 2000);">Animate!</button>
<script>
animate = false;
ShowGraph();
/**
* This is the jQuery animation bit
*/
function Animate()
{
$('#myLine').animate({
opacity: 0,
width: 0,
height: 0,
left: '+=300px',
top: '+=125px'
}, 1000, null, function () {animate = true; ShowGraph();});
}
function ShowGraph()
{
// This clears the canvas
document.getElementById("myLine").width = 600;
if (document.getElementById("myLine").__object__ && document.getElementById("myLine").__object__.type == 'line') {
var bar = new RGraph.Bar('myLine', [4,2,3]);
bar.Set('chart.labels', ['Fred','Charles','Carl']);
bar.Set('chart.title', 'jQuery animation example');
bar.Set('chart.labels.above', true);
bar.Set('chart.labels.above.size', 16);
bar.Set('chart.units.post', 'pt');
bar.Draw();
} else {
line = new RGraph.Line('myLine', [4,5,3,4,6,8,4,9,5,2]);
line.Set('chart.hmargin', 5);
line.Set('chart.labels', ['Gavin','Hoolio','June','Kev','Lou','Jane','Rich','Tom','John','Pat']);
line.Set('chart.tickmarks', 'endcircle');
line.Set('chart.title', 'jQuery animation example');
line.Draw();
}
if (animate) {
$('#myLine').animate({
opacity: 1,
width: '600px',
height: '250px',
left: '-=300px',
top: '-=125px'
}, 1000);
animate = true;
}
}
</script>
<p>
You can if you prefer use an external library for animation, like jQuery.
</p>
<p>
The chart to the right is animated using
jQuery. In the example the width is maintained by placing the canvas within a DIV which has the width/height CSS
attributes set.
</p>
<p>
In this instance, the <a href="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" target="_blank">
Google hosted jQuery</a> is used.
</p>
<br clear="all" />
<h4>CSS animation versus <canvas> animation</h4>
<p>
As you can see from the above examples, or if you build your own animations, CSS animation (which jQuery does) can be much smoother.
This is because CSS animation (ie changing the CSS attributes) does not have the side effect of clearing the canvas, and so
does not incur a redraw.
</p>
<h4>An Animated Pie chart</h4>
<p>
<a href="animation_segments.html"><b>This example</b></a> is of the Pie chart, with animated segment separation. Animated
segment separation is now (April 2011) available as an alternative tooltip highlight mode:
<pre class="code">myObj.Set('chart.highlight.style', 'explode');</pre>
</p>
</body>
</html>