Context Navigation

source: Dev/trunk/RGraph/docs/animation.html @ 193

Last change on this file since 193 was 77, checked in by fpvanagthoven, 14 years ago
RGraph
File size: 12.4 KB

Rev	Line
[77]	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: