Context Navigation

source: Dev/trunk/RGraph/docs/misc.html @ 212

Last change on this file since 212 was 77, checked in by fpvanagthoven, 14 years ago
RGraph
File size: 32.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	* \| \|
	18	* \| http://www.rgraph.net/LICENSE.txt \|
	19	* o------------------------------------------------------------------------------o
	20	*/
	21	-->
	22	<title>RGraph: Javascript charts and graph library - Miscellaneous</title>
	23
	24	<meta name="keywords" content="rgraph html5 canvas misc docs" />
	25	<meta name="description" content="RGraph: Javascript charts and graph library - Miscellaneous documentation" />
	26
	27	<meta property="og:title" content="RGraph: Javascript charts and graph library" />
	28	<meta property="og:description" content="A charts library based on the HTML5 canvas tag" />
	29	<meta property="og:image" content="http://www.rgraph.net/images/logo.jpg"/>
	30
	31	<link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
	32	<link rel="icon" type="image/png" href="/favicon.png">
	33
	34	<script src="../libraries/RGraph.common.core.js" ></script>
	35	<script src="../libraries/RGraph.common.tooltips.js" ></script>
	36	<script src="../libraries/RGraph.line.js" ></script>
	37
	38	<!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
	39
	40	<script>
	41	var _gaq = _gaq \|\| [];
	42	_gaq.push(['_setAccount', 'UA-54706-2']);
	43	_gaq.push(['_trackPageview']);
	44
	45	(function() {
	46	var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
	47	ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
	48	var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
	49	})();
	50	</script>
	51
	52	</head>
	53	<body>
	54
	55
	56	<!-- Social networking buttons -->
	57	<div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed">
	58	<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>
	59	<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>
	60	</div>
	61
	62	<script>
	63	// Opera fix
	64	if (navigator.userAgent.indexOf('Opera') == -1) {
	65	document.getElementById("social_icons").style.position = 'fixed';
	66	}
	67	</script>
	68	<!-- Social networking buttons -->
	69
	70	<div id="breadcrumb">
	71	<a href="../index.html">RGraph: Javascript charts and graph library</a>
	72	>
	73	<a href="index.html">Documentation</a>
	74	>
	75	Miscellaneous documentation
	76	</div>
	77
	78	<h1>RGraph: <span>Javascript charts and graph library</span> - Miscellaneous documentation</h1>
	79
	80	<script>
	81	if (RGraph.isIE8()) {
	82	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>');
	83	}
	84	</script>
	85
	86	<ul>
	87	<li><a href="#fallback.content">Canvas fallback content and visually impaired users</a></li>
	88	<li><a href="#limits">Upper and lower limits for horizontal bars</a></li>
	89	<li><a href="#canvas.width.height">Setting the canvas width and height</a></li>
	90	<li><a href="#canvas.coordinates">The canvas coordinate system</a></li>
	91	<li><a href="#older.browsers">RGraph and older browsers</a></li>
	92	<li><a href="#msie">RGraph and Microsoft Internet Explorer</a></li>
	93	<li><a href="#debugging">Debugging tips</a></li>
	94	<li><a href="#inspecting">Inspecting an RGraph chart</a></li>
	95	<li><a href="#context.menus">Double click context menus</a></li>
	96	<li><a href="#event.handlers">Adding your own event handlers</a></li>
	97	<li><a href="#crlf">Carriage returns and newlines in labels</a></li>
	98	<li><a href="#character.set">Character set issues</a></li>
	99	<li><a href="#rgraph.identify">How to identify an RGraph object</a></li>
	100	<li><a href="#static.y.axis">Static Y axis</a></li>
	101	<li><a href="#reducing.white.space">Reducing white space</a></li>
	102	<li><a href="#in.graph">In-graph labels</a></li>
	103	<li><a href="#shorthand.ingraph.labels">Shorthand for in-graph labels</a></li>
	104	<li><a href="#dom2.events">DOM2 Event handlers</a></li>
	105	<li><a href="#data.types">Data types</a></li>
	106	<li><a href="#create.your.own">Creating your own chart type</a></li>
	107	<li><a href="#world.map">World map</a></li>
	108	<li><a href="#text">Adding text to your charts</a></li>
	109	<li><a href="#known.issues">Known issues</a></li>
	110	</ul>
	111
	112	<a name="fallback.content"></a>
	113	<br /> <br /> <br />
	114	<h4>Canvas fallback content and visually impaired users</h4>
	115
	116	<p>
	117	When using the canvas element you should be aware of the accessibility of your charts, for example where vision limited users are
	118	concerned. Screen readers, for example, may not be able to convert a chart into something that is reasonable, so you should
	119	consider
	120	doing this yourself, possibly using the canvas fallback content (ie the content in between the canvas tags). A possible example
	121	would be to put a table of data inside the canvas tag that the chart on the canvas represents. Doing this goes a long way
	122	towards making the data available to everyone. You might also wish to consider using the <a href="zoom.html">full canvas
	123	zoom</a> or the <a href="resizing.html">resizing feature</a> to enable people to enlarge the chart.
	124	</p>
	125
	126	<a name="limits"></a>
	127	<br /> <br /> <br />
	128	<h4>Upper and lower limits for horizontal bars</h4>
	129
	130	<p>
	131	If you don't wish to specify an upper or lower limit for horizontal bars, and you just want them to extend to the upper or lower
	132	limits of the chart, whatever they may be, you can specify null for the value determining how far they extend. For cases where
	133	the X axis is in the middle and you're specifying a negative start value, or you want the bar to extend all the way to the
	134	bottom, you can simply specify an arbitrary length (eg -999999). Eg:
	135	</p>
	136
	137	<pre class="code">myBar.Set('chart.background.hbars', [[0, null, 'green'], [0,-999999,'red']]);</pre>
	138
	139	<a name="canvas.width.height"></a>
	140	<br /> <br /> <br />
	141	<h4>Setting the canvas width and height</h4>
	142
	143	<p>
	144	To set the canvas width and height you must use the HTML width/height attributes and NOT CSS. If you do use CSS, the canvas
	145	will be scaled, and not enlarged, to fit the new width/height. Eg:
	146	</p>
	147
	148	<pre class="code"><canvas id="myCanvas" width="200" height="100">[No canvas support]<canvas></pre>
	149
	150	<p>
	151	<b>Note:</b>
	152	When you resize the canvas using CSS, not only will it be scaled (not enlarged), but it will also NOT be cleared. You can
	153	see this effect on the <a href="animation.html">animation page</a> with the jQuery animation example.
	154	</p>
	155
	156	<a name="canvas.coordinates"></a>
	157	<br /> <br /> <br />
	158	<h4>The canvas coordinate system</h4>
	159	<p>
	160	The canvas coordinate system starts in the top left of the canvas (at [0,0] - the X value increasing as you go right
	161	and the Y value as you go down), much like the CSS coordinates for the entire page. The
	162	gutter goes around the canvas (ie top/bottom/left/right - where the labels and titles are placed), and the actual chart
	163	sits in the middle.
	164	</p>
	165
	166	<a name="older.browsers"></a>
	167	<br /> <br /> <br />
	168	<h4>RGraph and older browsers</h4>
	169
	170	<p>
	171	Older versions of browsers are supported (assuming they have canvas support), however, if they don't support the canvas text
	172	or shadow APIs these will naturally be unavailable. The charts will still be drawn, though without shadows or text.
	173	</p>
	174
	175	<a name="msie"></a>
	176	<br /> <br /> <br />
	177	<h4>RGraph and Microsoft Internet Explorer</h4>
	178
	179	<p>
	180	You can now use RGraph with Internet Explorer 8 in conjunction with ExCanvas, (which brings a degree of <canvas> support to MSIE).
	181	Bear in mind though that shadows are not available and thus are simulated. Microsoft Internet Explorer 9 has native <canvas>
	182	support. You can see some screenshots of it <a href="http://support.rgraph.net/message/rgraph-in-internet-explorer-9.html" target="_blank">here</a>.
	183	</p>
	184
	185	<a name="debugging"></a>
	186	<br /> <br /> <br />
	187
	188	<h4>Debugging tips</h4>
	189
	190	<p>
	191	If you're having a hard time debugging your chart, try these:
	192	</p>
	193
	194	<ul>
	195	<li>Ensure you have only one chart on the page</li>
	196	<li>Make sure you have disabled your web browsers cache (the Firefox <a href="https://addons.mozilla.org/en-US/firefox/addon/60" target="_blank">Web Developer toolbar</a> can do this for Firefox)</li>
	197	<li>
	198	Try using <a href="http://www.getfirebug.com" target="_blank">Firebug</a> for Firefox or the
	199	Webkit developer tools for Google Chrome (CTRL_SHIFT+J) and Safari (CTRL+ALT+C). There's a
	200	video about using the Chrome developer tools
	201	<a href="http://www.youtube.com/watch?v=N8SS-rUEZPg&feature=youtu.be" target="_blank">here</a>. These are very useful
	202	tools that make development much easier.
	203	</li>
	204	<li>Reduce the page to the bare minimum.</li>
	205	<li>Start with a very basic chart and build it up slowly.</li>
	206	</ul>
	207
	208
	209
	210	<a name="inspecting"></a>
	211	<br /> <br /> <br />
	212	<h4>Inspecting an RGraph chart</h4>
	213
	214	<p>
	215	To help when debugging your RGraph charts and canvas elements, you can use you browsers built in debugging tools.
	216	An example is the WebKit developer tools which are available in Google Chrome and Apple Safari. There is a screenshot
	217	of these tools (in docked mode) <a href="../images/introspection.png" target="_blank"><b>here</b></a>. To view these
	218	tools in Google Chrome press CTRL+SHIFT+J. Inspect the canvas, and then the associated object can be found via
	219	the <i>__object__</i> property.
	220	</p>
	221
	222
	223	<a name="context.menus"></a>
	224	<br /> <br /> <br />
	225	<h4>Double click context menus</h4>
	226
	227	<p>
	228	Windows Opera, Windows Safari, Mac Safari and Mac Firefox all attach the context menu to the double click event (left mouse button),
	229	not the right, in order to make it more reliable.
	230	</p>
	231
	232
	233	<a name="event.handlers"></a>
	234	<br /> <br /> <br />
	235	<h4>Adding your own event handlers</h4>
	236
	237	<p>
	238	Because each RGraph object exposes the canvas element (the same as what you get from <i>document.getElementById()</i>),
	239	you can use normal procedures to add your own event handlers. Eg If you wanted to add your own onclick handler you could
	240	do this:
	241	</p>
	242
	243	<pre class="code">
	244	<script>
	245	var myBar = new RGraph.Bar('cvs', [7,4,2,6,3,4,8]);
	246	myBar.Draw();
	247
	248	myBar.canvas.onclick = function ()
	249	{
	250	}
	251	</script>
	252	</pre>
	253	<p>
	254	But what if, for example, you're using an RGraph feature which
	255	uses the event handler that you need? In this case you can use the standard DOM2 method <i>addEventListener()</i>. This will add
	256	your new event handler without replacing any existing one (ie the one installed by RGraph). For example:
	257	</p>
	258
	259	<pre class="code">
	260	<script>
	261	var myBar = new RGraph.Bar('cvs', [7,4,2,6,3,4,8]);
	262	myBar.Draw();
	263
	264	function myFunc ()
	265	{
	266	}
	267
	268	myBar.canvas.addEventListener('click', myFunc, false)
	269	</script>
	270	</pre>
	271
	272
	273	<a name="crlf"></a>
	274	<br /> <br /> <br />
	275	<h4>Carriage returns and newlines in labels</h4>
	276
	277	<p>
	278	You can put carriage returns in your labels by using the string <i>\r\n</i>. This means your labels will span multiple lines.
	279	Like so:
	280	</p>
	281
	282	<pre class="code">myBar.Set('chart.labels', 'John\r\n(Winner!)', ...)</pre>
	283
	284
	285	<a name="character.set"></a>
	286	<br /> <br /> <br />
	287	<h4>Character set issues</h4>
	288
	289	<p>
	290	If you're seeing strange, unrecognised characters in your text labels or titles, you may need to specify the correct
	291	character set that the browser should use. In PHP you can do this with the <i>header()</i> function (which, as the
	292	name suggests, sends a HTTP header):
	293	</p>
	294
	295	<pre class="code"><?php
	296	header("Content-Type: text/html; charset=ISO-8859-1");
	297	?></pre>
	298
	299	<p>
	300	If you use Apache, you could use the <i>header</i> directive, though this may be overridden by other directives,
	301	eg <i>AddDefaultCharset</i>.
	302	</p>
	303
	304	<a name="rgraph.identify"></a>
	305	<br /> <br /> <br />
	306	<h4>How to identify an RGraph object</h4>
	307
	308	<p>
	309	Because identity can sometimes be a tricky affair, there are a few RGraph properties that you can use to check whether an object
	310	is an RGraph object:
	311	</p>
	312
	313	<ul>
	314	<li><i>obj.isRGraph</i> - This is a boolean that you can use to clearly identify an RGraph object.</li>
	315	<li><i>obj.type</i> - This identifies the type of an RGraph object. It is a string which contains a one word description of the objects chart type, eg bar/line/pie.</li>
	316	</ul>
	317
	318
	319	<!------------------------------------------------------------------------------------------------------------->
	320
	321
	322
	323
	324
	325
	326	<a name="static.y.axis"></a>
	327	<br /> <br /> <br />
	328	<h4>Static Y axis</h4>
	329
	330	<!--
	331	The HTML and script necessary for a chart with a static Y axis. The libraries are included at the top of the page
	332	in the <HEAD>
	333	-->
	334	<div style="position: relative; float: right; margin-right: 10px">
	335	<!-- The width here is set further down the page in script -->
	336	<canvas id="axes" width="0" height="170" style="position: absolute; top: 0; left: 0; z-index: 100"></canvas>
	337	<div style="width: 600px; overflow: auto">
	338	<canvas id="cvs" width="1000" height="200"></canvas>
	339	</div>
	340	</div>
	341
	342	<script>
	343	ShowGraphOne = function ()
	344	{
	345	/**
	346	* This is the script that draws the chart
	347	*/
	348	line = new RGraph.Line('cvs', [3,15,22,26,28,24,22,25,23,24,26,23,24,25,27,28,29,26,23,22,24,21,24,25]);
	349	line.Set('chart.noaxes', true); // We draw the Y axis ourselves further down the page
	350	line.Set('chart.gutter.top', 25);
	351	line.Set('chart.gutter.bottom', 35);
	352	line.Set('chart.gutter.left', 50);
	353	line.Set('chart.hmargin', 5);
	354	line.Set('chart.linewidth', 3);
	355	line.Set('chart.shadow', true);
	356	line.Set('chart.shadow.offsetx', 0);
	357	line.Set('chart.shadow.offsety', 0);
	358	line.Set('chart.shadow.blur', 15);
	359	line.Set('chart.shadow.color', 'red');
	360	line.Set('chart.text.angle', 15);
	361	line.Set('chart.tooltips', [
	362	'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December',
	363	'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'
	364	]);
	365	line.Set('chart.labels', [
	366	'Jan `09','Feb 09', 'Mar 09','Apr 09','May 09','Jun 09','Jul 09','Aug 09','Sep 09','Oct 09','Nov 09', 'Dec 09',
	367	'Jan 10', 'Feb 10', 'Mar 10','Apr 10','May 10','Jun 10','Jul 10','Aug 10','Sep 10','Oct 10','Nov 10', 'Dec 10'
	368	]);
	369	line.Draw();
	370
	371
	372
	373	/**
	374	* And this is the script that draws the left axis, on the other canvas (that doesn't move)
	375	*/
	376	ca = document.getElementById("axes")
	377	co = ca.getContext('2d');
	378
	379
	380	/**
	381	* This sets the smaller canvas to cover the whole of the charts left gutter
	382	*/
	383	ca.width = line.Get('chart.gutter.left') + 1;
	384
	385
	386	RGraph.Clear(ca, 'white');
	387
	388
	389	/**
	390	* This draws the static axis
	391	*/
	392
	393	co.beginPath();
	394	co.moveTo(line.Get('chart.gutter.left'), line.Get('chart.gutter.top'));
	395	co.lineTo(line.Get('chart.gutter.left'), line.canvas.height - line.Get('chart.gutter.bottom'));
	396
	397	// Draw the tickmarks on the axis
	398	var numTicks = 10;
	399	for (var i=0; i<=numTicks; ++i) {
	400	co.moveTo(line.Get('chart.gutter.left'), line.Get('chart.gutter.top') + (((line.canvas.height - line.Get('chart.gutter.top') - line.Get('chart.gutter.bottom')) / numTicks) * i));
	401	co.lineTo(line.Get('chart.gutter.left') - 3, line.Get('chart.gutter.top') + (((line.canvas.height - line.Get('chart.gutter.top') - line.Get('chart.gutter.bottom')) / numTicks) * i));
	402	}
	403
	404	co.stroke();
	405
	406
	407
	408	/**
	409	* This draws the labels for the static axis
	410	*/
	411	co.beginPath();
	412	var color = 'black';
	413	var size = 10;
	414
	415	for (var i=0; i<5; ++i) {
	416	co.fillStyle = color;
	417	co.textAlign = 'right';
	418	co.textBaseline = 'middle';
	419	var h = line.canvas.height - line.Get('chart.gutter.top') - line.Get('chart.gutter.bottom');
	420
	421	RGraph.Text(co, 'Verdana', size, line.Get('chart.gutter.left') - 4, line.Get('chart.gutter.top') + (h * (i/5)), line.max - (line.max * (i/5)));
	422	}
	423
	424	// Draw zero
	425	RGraph.Text(co,
	426	'Verdana',
	427	size,
	428	line.Get('chart.gutter.left') - 4,
	429	165,
	430	'0');
	431	co.fill();
	432	}
	433	</script>
	434
	435	A static Y axis is useful if you have a wide chart but limited space. Whilst not part of the RGraph libraries itself, it can be
	436	achieved with a little HTML, like the chart shown. The HTML and the script to achieve this is shown below.
	437	It involves placing an extra canvas above the chart with the Y axis drawn on it. This canvas doesn't
	438	move when the main canvas scrolls left and right.
	439
	440	<p />
	441
	442	<b>Note:</b> Because Firefox doesn't support the event.offsetX and event.offsetY properties and they have to be simulated,
	443	scrolling in conjunction with tooltips in this case and this browser doesn't work.
	444
	445	<pre class="code">
	446	<div style="position: relative; float: right; margin-right: 10px; margin-top: 10px">
	447	<!-- The width here is set further down the page in script -->
	448	<canvas id="axes" width="0" height="200" style="position: absolute; top: 0; left: 0; z-index: 100"></canvas>
	449	<div style="width: 600px; overflow: auto">
	450	<canvas id="cvs" width="1000" height="200"></canvas>
	451	</div>
	452	</div>
	453
	454	<script>
	455	window.onload = function ()
	456	{
	457	/**
	458	* This is the script that draws the chart
	459	*/
	460	line = new RGraph.Line('cvs', [3,15,22,26,28,24,22,25,23,24,26,23,24,25,27,28,29,26,23,22,24,21,24,25]);
	461	line.Set('chart.noaxes', true); // We draw the Y axis ourselves
	462	line.Set('chart.gutter.top', 25);
	463	line.Set('chart.gutter.bottom', 35);
	464	line.Set('chart.gutter.left', 50);
	465	line.Set('chart.hmargin', 5);
	466	line.Set('chart.linewidth', 3);
	467	line.Set('chart.shadow', true);
	468	line.Set('chart.shadow.offsetx', 0);
	469	line.Set('chart.shadow.offsety', 0);
	470	line.Set('chart.shadow.blur', 15);
	471	line.Set('chart.shadow.color', 'red');
	472	line.Set('chart.text.angle', 15);
	473	line.Set('chart.tooltips', [
	474	'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December',
	475	'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'
	476	]);
	477	line.Set('chart.labels', [
	478	'','Feb 09', 'Mar 09','Apr 09','May 09','Jun 09','Jul 09','Aug 09','Sep 09','Oct 09','Nov 09', 'Dec 09',
	479	'Jan 10', 'Feb 10', 'Mar 10','Apr 10','May 10','Jun 10','Jul 10','Aug 10','Sep 10','Oct 10','Nov 10', 'Dec 10'
	480	]);
	481	line.Draw();
	482
	483
	484
	485	/**
	486	* And this is the script that draws the left axis, on the other canvas (that doesn't move)
	487	*/
	488	ca = document.getElementById("axes")
	489	co = ca.getContext('2d');
	490
	491
	492	/**
	493	* This sets the smaller canvas to cover the whole of the charts left gutter
	494	*/
	495	ca.width = line.Get('chart.gutter.left') + 1;
	496
	497
	498	RGraph.Clear(ca, 'white');
	499
	500
	501	/**
	502	* This draws the static axis
	503	*/
	504	co.beginPath();
	505	co.moveTo(line.Get('chart.gutter.left'), line.Get('chart.gutter.top'));
	506	co.lineTo(line.Get('chart.gutter.left'), line.canvas.height - line.Get('chart.gutter.bottom'));
	507
	508	// Draw the tickmarks on the axis
	509	var numTicks = 10;
	510	for (var i=0; i<=numTicks; ++i) {
	511	co.moveTo(line.Get('chart.gutter.left'), line.Get('chart.gutter.top') + (((ca.height - line.Get('chart.gutter.top') - line.Get('chart.gutter.bottom')) / numTicks) * i));
	512	co.lineTo(line.Get('chart.gutter.left') - 3, line.Get('chart.gutter.top') + (((ca.height - line.Get('chart.gutter.top') - line.Get('chart.gutter.bottom')) / numTicks) * i));
	513	}
	514
	515	co.stroke();
	516
	517
	518
	519	/**
	520	* This draws the labels for the static axis
	521	*/
	522	co.beginPath();
	523	var color = 'black';
	524	var size = 10;
	525
	526	for (var i=0; i<5; ++i) {
	527	co.fillStyle = color;
	528	co.textAlign = 'right';
	529	co.textBaseline = 'middle';
	530	var h = line.canvas.height - line.Get('chart.gutter.top') - line.Get('chart.gutter.bottom');
	531
	532	RGraph.Text(co,
	533	'Verdana',
	534	size,
	535	line.Get('chart.gutter.left') - 4,
	536	line.Get('chart.gutter.top') + (h * (i/5)),
	537	line.max - (line.max * (i/5)));
	538	}
	539	co.fill();
	540	}
	541	</script>
	542	</pre>
	543	<!------------------------------------------------------------------------------------------------------------->
	544
	545
	546	<br clear="all" />
	547	<br clear="all" />
	548
	549
	550	<!-- This chart is an example of how you can eliminate the gutter white space by translating before you draw the chart. -->
	551
	552	<a name="reducing.white.space"></a>
	553	<br /> <br /> <br />
	554	<h4>Reducing white space</h4>
	555
	556	<canvas id="myc" width="600" height="250" style="float: right; border: dashed 1px gray; margin-right: 10px"></canvas>
	557
	558	<script>
	559	ShowGraphTwo = function ()
	560	{
	561
	562	var arg1 = [73, 65, 76, 75, 69, 73, 54, 61, 89, 77];
	563	var arg2 = [264, 240, 240, 256, 200, 208, 240, 216, 248, 240]
	564
	565	var line1 = new RGraph.Line('myc', arg1 , arg2);
	566	line1.Set('chart.colors', ['red', 'silver']);
	567	line1.Set('chart.background.barcolor1', 'white');
	568	line1.Set('chart.background.barcolor2', 'white');
	569	line1.Set('chart.labels', ['Jan 2000',
	570	'Feb 2001',
	571	'Mar 2002',
	572	'Apr 2003',
	573	'May 2004',
	574	'Jun 2005',
	575	'Jul 2006',
	576	'Aug 2007',
	577	'Sep 2008',
	578	'Oct 2009'])
	579	line1.Set('chart.filled', true);
	580	line1.Set('chart.fillstyle', ['#fcc', '#cfc']);
	581	line1.Set('chart.gutter.top', 5);
	582	line1.Set('chart.gutter.bottom', 55);
	583	line1.Set('chart.gutter.left', 55);
	584	line1.Set('chart.gutter.right', 35);
	585	line1.Set('chart.background.grid', true);
	586	line1.Set('chart.ymax', 365)
	587	line1.Set('chart.yaxispos', 'right');
	588	line1.Set('chart.title.xaxis', 'Month');
	589	line1.Set('chart.title.yaxis', 'Temperature');
	590	line1.Set('chart.title.xaxis.pos', -0.3);
	591	line1.Set('chart.title.yaxis.pos', 0.5);
	592	line1.Set('chart.text.angle', 30);
	593	line1.Set('chart.tooltips', [
	594	'January 2000','February 2001','March 2002','April 2003','May 2004','June 2005','July 2006','August 2007','September 2008','October 2009',
	595	'January 2000','February 2001','March 2002','April 2003','May 2004','June 2005','July 2006','August 2007','September 2008','October 2009'
	596	]);
	597	line1.Draw();
	598	}
	599
	600	window.onload = function ()
	601	{
	602	ShowGraphOne();
	603	ShowGraphTwo();
	604	}
	605	</script>
	606
	607	<p>
	608	New in June 2011 is the ability to set the gutters independently. This removes the necessity to translate
	609	and adjust the coordinates to get more space and is far more straight-forward. The new properties are:
	610
	611	<ul>
	612	<li>chart.gutter.left</li>
	613	<li>chart.gutter.right</li>
	614	<li>chart.gutter.top</li>
	615	<li>chart.gutter.bottom</li>
	616	</ul>
	617
	618	You can read more about this change <a href="gutters.html"><b>here</b></a>.
	619	</p>
	620
	621
	622	<br clear="all" />
	623
	624
	625	<a name="in.graph"></a>
	626	<br /> <br /> <br />
	627	<h4>In-graph labels</h4>
	628
	629	<p>
	630	As well as an array of strings, like this:
	631	</p>
	632
	633	<pre class="code">obj.Set('chart.labels.ingraph', ['First label','Second label']);</pre>
	634
	635	<p>
	636	The string can also be an array, consisting of color and placement information, like this:
	637	</p>
	638
	639	<pre class="code">obj.Set('chart.labels.ingraph', ['First label',<span style="color: green">['Second label', 'red', 'yellow', -1, 50]</span> ]);</pre>
	640
	641
	642	<p>
	643	You can read more information about this <a href="ingraph.html">here</a>.
	644	</p>
	645
	646	<a name="shorthand.ingraph.labels"></a>
	647	<br /> <br /> <br />
	648	<h4>Shorthand for in-graph labels</h4>
	649	<p>
	650	Instead of providing a full array of <i>null</i> elements for in-graph labels which may get a little unwieldy,
	651	you can instead specify an integer that specifies how many elements to skip. Like this:
	652	</p>
	653
	654	<pre class="code">line.Set('chart.labels.ingraph', [6, 'July', 3, 'November']);</pre>
	655
	656	<br clear="all" />
	657	<br clear="all" />
	658
	659	<a name="dom2.events"></a>
	660	<br /> <br /> <br />
	661	<h4>DOM2 Event handlers</h4>
	662	<p>
	663	All the charts have now (1st October 2010) been converted to DOM2 for tooltips event registration. This allows them to
	664	be far more co-operative if you're using events. Tooltips will not be compatible with MSIE8 - the charts will still be
	665	drawn, albeit without tooltips.
	666	</p>
	667
	668
	669
	670	<br clear="all" />
	671
	672
	673
	674
	675	<a name="data.types"></a>
	676	<br /> <br /> <br />
	677	<h4>Data types</h4>
	678	<p>
	679	If your data values aren't the correct type - ie numbers - it can cause problems. Pay particular attention to this
	680	when you're getting your data from data sources which may be classed as strings, such as JSON or AJAX requests.
	681	</p>
	682
	683
	684
	685
	686	<a name="create.your.own"></a>
	687	<br /> <br /> <br />
	688	<h4>Creating your own chart type</h4>
	689	<p>
	690	If you wish to create your own chart type, there is a skeleton file
	691	<a href="../libraries/RGraph.skeleton.js" target="_blank"><b>here</b></a> that you can use as a starting point.
	692	This file contains the bare bones of an RGraph object, such as the .Get() and .Set() methods, as well as examples
	693	of common properties.
	694	</p>
	695
	696
	697	<a name="world.map"></a>
	698	<br /> <br /> <br />
	699	<h4>World map</h4>
	700	<p>
	701	There is no function in RGraph to do mapping, either of the World or a smaller region. If this is what you want then you
	702	may be interested in this HTML5 canvas based mapping system:
	703	<a href="http://joncom.be/code/excanvas-world-map/" target="_blank">http://joncom.be/code/excanvas-world-map/</a>
	704	</p>
	705
	706
	707	<a name="text"></a>
	708	<br /> <br /> <br />
	709	<h4>Adding text to your charts</h4>
	710	<p>
	711	You can add arbitrary text to your charts by using the RGraph API. For example you could use this code after the call to .Draw():
	712	</p>
	713
	714	<pre class="code">
	715	function DrawSubTitle (obj)
	716	{
	717	var context = obj.context;
	718
	719	context.beginPath();
	720	context.fillStyle = 'gray';
	721	RGraph.Text(context,
	722	'Verdana',
	723	7,
	724	obj.canvas.width / 2,
	725	obj.Get('chart.gutter.top') - 6,
	726	'The subtitle',
	727	'center',
	728	'center');
	729	context.fill();
	730	}
	731
	732	DrawSubTitle(myLine);
	733	</pre>
	734
	735	This is the code that is used on the <a href="../examples/line.html">line chart example page</a>.
	736
	737	<a name="known.issues"></a>
	738	<br /> <br /> <br />
	739	<h4>Known issues</h4>
	740
	741	<p>
	742	There's a few known issues documented <a href="issues.html">here</a>
	743	</p>
	744
	745
	746	<p />
	747	</body>
	748	</html>

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

Download in other formats: