Context Navigation

source: Dev/trunk/RGraph/docs/zoom.html @ 77

Last change on this file since 77 was 77, checked in by fpvanagthoven, 14 years ago
RGraph
File size: 15.1 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 - Zooming your charts</title>
	22
	23	<meta name="keywords" content="rgraph html5 canvas chart docs zoom" />
	24	<meta name="description" content="RGraph: Javascript charts and graph library - Documentation about zooming your charts" />
	25
	26	<meta property="og:title" content="RGraph: Javascript charts and graph library" />
	27	<meta property="og:description" content="A charts library based on the HTML5 canvas tag" />
	28	<meta property="og:image" content="http://www.rgraph.net/images/logo.jpg"/>
	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.common.annotate.js" ></script>
	35	<script src="../libraries/RGraph.common.context.js" ></script>
	36	<script src="../libraries/RGraph.common.zoom.js" ></script>
	37	<script src="../libraries/RGraph.bar.js" ></script>
	38	<script src="../libraries/RGraph.line.js" ></script>
	39	<!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
	40
	41	<style>
	42	.RGraph_zoom_window {
	43	border: 2px solid #ccc ! important;
	44	box-shadow: 0 0 15px #aaa ! important;;
	45	-moz-box-shadow: 0 0 15px #aaa ! important;
	46	-webkit-box-shadow: 0 0 15px #aaa ! important;
	47	}
	48	</style>
	49
	50	<script>
	51	var _gaq = _gaq \|\| [];
	52	_gaq.push(['_setAccount', 'UA-54706-2']);
	53	_gaq.push(['_trackPageview']);
	54
	55	(function() {
	56	var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
	57	ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
	58	var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
	59	})();
	60	</script>
	61
	62	</head>
	63
	64	<body>
	65
	66
	67	<!-- Social networking buttons -->
	68	<div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed">
	69	<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>
	70	<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>
	71	</div>
	72
	73	<script>
	74	// Opera fix
	75	if (navigator.userAgent.indexOf('Opera') == -1) {
	76	document.getElementById("social_icons").style.position = 'fixed';
	77	}
	78	</script>
	79	<!-- Social networking buttons -->
	80
	81	<div id="breadcrumb">
	82	<a href="../index.html">RGraph: Javascript charts and graph library</a>
	83	>
	84	<a href="index.html">Documentation</a>
	85	>
	86	Zooming your charts
	87	</div>
	88
	89	<h1>RGraph: <span>Javascript charts and graph library</span> - Zooming your charts</h1>
	90
	91	<script>
	92	if (RGraph.isIE8()) {
	93	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>');
	94	}
	95	</script>
	96
	97
	98	<ul>
	99	<li><a href="#canvas">Canvas mode</a></li>
	100	<li><a href="#thumbnail">Thumbnail mode</a></li>
	101	<li><a href="#area">Area mode</a></li>
	102	</ul>
	103
	104
	105	<a name="canvas"></a>
	106	<h2>Canvas mode</h2>
	107
	108	<table border="0" width="100%">
	109	<tr>
	110	<td>
	111	<p>
	112	As of November 2009 RGraph has had the ability to provide a zoom facility. It's designed to be used in
	113	conjunction with a context menu as in the example to the right.
	114	</p>
	115
	116	<p>
	117	You can control the zoom using these properties:
	118	</p>
	119
	120	<ul>
	121	<li>chart.zoom.mode<i>Default: canvas</i></li>
	122	<li>chart.zoom.factor<i>Default: 1.5</i></li>
	123	<li>chart.zoom.fade.in <i>Default: true</i></li>
	124	<li>chart.zoom.fade.out <i>Default: true</i></li>
	125	<li>chart.zoom.hdir <i>Default: right</i></li>
	126	<li>chart.zoom.vdir <i>Default: down</i></li>
	127	<li>chart.zoom.delay <i>Default: 50</i></li>
	128	<li>chart.zoom.frames <i>Default: 10</i></li>
	129	<li>chart.zoom.shadow <i>Default: true</i></li>
	130	<li>chart.zoom.mode <i>Default: canvas</i></li>
	131	<li>chart.zoom.thumbnail.width <i>Default: 75</i></li>
	132	<li>chart.zoom.thumbnail.height <i>Default: 75</i></li>
	133	<li>chart.zoom.background <i>Default: true</i></li>
	134	</ul>
	135	</td>
	136
	137	<td style="text-align: center">
	138	<canvas width="600" height="250" id="myc">[No canvas support]</canvas>
	139	</td>
	140	</tr>
	141
	142	<tr>
	143	<td colspan="2">
	144	The possible values of <i>chart.zoom.hdir</i> are: <i>left</i>, <i>center</i>, <i>right</i>.
	145	The possible values of <i>chart.zoom.vdir</i> are: <i>up</i>, <i>center</i>, <i>down</i>. <i>chart.zoom.delay</i>
	146	is the delay in between frames (in milliseconds) and <i>chart.zoom.frames</i> is the number of frames in the zoom. <i>chart.zoom.shadow</i>
	147	is whether the zoomed canvas has a shadow or not. The possible values of <i>chart.zoom.mode</i> are <i>canvas</i> (default)
	148	and <i>thumbnail</i>.
	149	</td>
	150	</tr>
	151	</table>
	152
	153	<script>
	154	window.onload = function ()
	155	{
	156	var graph = new RGraph.Bar('myc', [[4,6],[6, 8],[8,6],[7,5],[9,4],[4,7],[3,5],[8,6],[7,6],[4,7],[5,4],[5,6],[6,4]]);
	157	graph.Set('chart.colors', ['#f66', '#66f']);
	158	graph.Set('chart.strokecolor', 'rgba(0,0,0,0)');
	159	graph.Set('chart.labels', ['Fry','Hav','Jim','Moo','Io','Olga','Tim','Gaz','Jake','Pippa','Lou','Fred','John']);
	160
	161	if (!RGraph.isIE8()) {
	162	graph.Set('chart.contextmenu', [
	163	['Clear annotations', function () {RGraph.Clear(graph.canvas); graph.Draw();}],
	164	['Zoom in', RGraph.Zoom]
	165	]);
	166	graph.Set('chart.annotatable', true);
	167	graph.Set('chart.zoom.hdir', 'left');
	168	graph.Set('chart.zoom.factor', 1.5);
	169	graph.Set('chart.zoom.vdir', 'center');
	170	graph.Set('chart.zoom.frames', 50); // Number of frames
	171	graph.Set('chart.zoom.delay', 5); // Delay between each frame
	172	graph.Set('chart.zoom.shadow', 'rgba(0,0,0,0.7)'); // Show a shadow on the zoomed chart
	173	graph.Set('chart.zoom.background', true);
	174	}
	175
	176	graph.Set('chart.title', 'Chart with zoom (context, annotatable)');
	177	graph.Set('chart.shadow', true);
	178	graph.Set('chart.shadow.color', '#999');
	179	graph.Draw();
	180
	181	var myLine = new RGraph.Line('myc2', [40,48,45,64,34,22,23,56,56,54,84,44], [4,5,6,7,20,21,1,9,9,8,5,4]);
	182	myLine.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
	183	myLine.Set('chart.hmargin', 10);
	184	myLine.Set('chart.linewidth', 3);
	185	myLine.Set('chart.title', 'A sample line chart');
	186	myLine.Set('chart.colors', ['red', 'black']);
	187	myLine.Set('chart.shadow', true);
	188
	189	if (!RGraph.isIE8()) {
	190	myLine.Set('chart.contextmenu', [['Zoom entire chart', RGraph.Zoom]]);
	191	myLine.Set('chart.zoom.delay', 15);
	192	myLine.Set('chart.zoom.factor', 1.5);
	193	myLine.Set('chart.zoom.mode', 'thumbnail');
	194	myLine.Set('chart.zoom.vdir', 'center');
	195	myLine.Set('chart.zoom.thumbnail.width', 100);
	196	myLine.Set('chart.zoom.thumbnail.height', 100);
	197	}
	198	myLine.Draw();
	199
	200	myLine2 = new RGraph.Line('myc3', [15,30,62,26,46,86,48,51,51,35,32, 35]);
	201	myLine2.Set('chart.background.grid.width', 0.5);
	202	myLine2.Set('chart.shadow.offsetx', 1);
	203	myLine2.Set('chart.shadow.offsety', 1);
	204	myLine2.Set('chart.shadow.blur', 2);
	205	myLine2.Set('chart.shadow', true);
	206	myLine2.Set('chart.zoom.mode', 'area');
	207	myLine2.Set('chart.hmargin', 10);
	208	myLine2.Set('chart.linewidth', 2);
	209	myLine2.Set('chart.title', 'A chart with zoom in area mode');
	210	myLine2.Set('chart.tickmarks', 'endcircle');
	211	myLine2.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
	212	myLine2.Draw();
	213	}
	214	</script>
	215
	216	<br clear="all" />
	217
	218	<pre class="code">
	219	<script>
	220	var graph = new RGraph.Line('myc', [4,6,8,7,9,4,3,8,7,4,5,5,5]);
	221	graph.Set('chart.labels', ['Fry','Hav','Jim','Moo','Io','Olga','Tim','Gaz','Jake','Pippa','Lou','Fred','John']);
	222	graph.Set('chart.contextmenu', [
	223	['Clear annotations', function () {RGraph.Clear(graph.canvas); graph.Draw();}],
	224	['Zoom in', RGraph.Zoom]
	225	]);
	226	graph.Set('chart.title', 'Chart with zoom (context, annotatable)');
	227	graph.Set('chart.shadow', true);
	228	graph.Set('chart.annotatable', true);
	229	graph.Draw();
	230	</script>
	231	</pre>
	232
	233
	234	<a name="thumbnail"></a>
	235	<h2>Thumbnail mode</h2>
	236
	237	<canvas id="myc2" width="600" height="250" style="float: left">[No canvas support]</canvas>
	238
	239	<p>
	240	The zoom has an alternative thumbnail mode, which displays a small thumbnail zoom instead of zooming the entire canvas.
	241	The chart to the left shows an example of this.
	242	</p>
	243
	244	<p>
	245	It uses some of the same properties as the regular zoom, eg <i>chart.fade.in</i>, <i>chart.fade.out</i>, <i>chart.zoom.shadow</i>
	246	</p>
	247
	248	<br clear="all" />
	249
	250	<pre class="code">
	251	<script>
	252	var myLine = new RGraph.Line('myc2', [40,48,45,64,34,22,23,56,56,54,84,44], [4,5,6,7,20,21,1,9,9,8,5,4]);
	253	myLine.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
	254	myLine.Set('chart.hmargin', 10);
	255	myLine.Set('chart.linewidth', 3);
	256	myLine.Set('chart.title', 'A sample line chart');
	257	myLine.Set('chart.zoom.mode', 'thumbnail');
	258	myLine.Set('chart.zoom.vdir', 'center');
	259	myLine.Set('chart.zoom.thumbnail.width', 100);
	260	myLine.Set('chart.zoom.thumbnail.height', 100);
	261	myLine.Set('chart.colors', ['red', 'black']);
	262	myLine.Set('chart.shadow', true);
	263	myLine.Set('chart.contextmenu', [['Zoom entire chart', RGraph.Zoom]]);
	264	</script>
	265	</pre>
	266
	267	<p>
	268	<b>Making the zoom circular</b><br /><br />
	269	<img src="../images/border-radius.png" width="171" height="159" alt="A circular zoom window" style="float: right; border: 1px gray solid" />
	270	It is possible to make the zoom in area mode circular by utilising the <i>border-radius</i> CSS property. Currently support for
	271	this is limited to FireFox 4b7+ and MSIE9, so it's not part of the main RGraph software. The CSS ncessary to achieve this is
	272	thus:
	273	</p>
	274
	275	<pre class="code" style="width: 700px" />
	276	<style>
	277	.RGraph_zoom_window {
	278	border-radius: 50px ! important;
	279	}
	280	</style>
	281	</pre>
	282
	283	This a chart demonstrating this technique <a href="zoom_thumbnail.html">here</a>. Note that browser support for this technique is limited.
	284
	285	<br clear="all" />
	286
	287
	288	<a name="area"></a>
	289	<h2>Area mode</h2>
	290
	291	<canvas id="myc3" width="600" height="250" style="float: right">[No canvas support]</canvas>
	292
	293	<p>
	294	Another type of zoom available is <i>area</i>. This is somewhat similar to thumbnail, but allows you to draw a rectangle around
	295	the specific area that you want to zoom.
	296	</p>
	297
	298	<p>
	299	Again, this uses some common zoom properties, such as <i>chart.zoom.factor</i>.
	300	</p>
	301
	302	<p>
	303	Once visible, you can drag the zoomed area around with the left mouse button (a left drag), and drag the zoomed canvas around
	304	within the zoom by using the right mouse button (a right-drag). And a double click will expand the zoomed area to cover the
	305	whole canvas.
	306	</p>
	307
	308	<br clear="all" />
	309
	310	<pre class="code">
	311	<script>
	312	var myLine = new RGraph.Line('myc3', [15,30,62,26,46,86,48,51,51,35,32, 35]);
	313	myLine.Set('chart.zoom.mode', 'area');
	314	myLine.Set('chart.hmargin', 10);
	315	myLine.Set('chart.linewidth', 1);
	316	myLine.Set('chart.title', 'A chart with zoom in area mode');
	317	myLine.Set('chart.tickmarks', 'endcircle');
	318	myLine.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
	319	myLine.Draw();
	320	<script>
	321	</pre>
	322
	323	</body>
	324	</html>

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

Download in other formats: