Context Navigation

source: Dev/branches/rest-dojo-ui/jQueryUI/client/RGraph/docs/animation.html @ 312

Last change on this file since 312 was 312, checked in by jkraaijeveld, 13 years ago

File size: 12.4 KB

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

Note: See TracBrowser for help on using the repository browser.

Download in other formats: