Context Navigation

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

Last change on this file since 178 was 77, checked in by fpvanagthoven, 14 years ago
RGraph
File size: 32.1 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	* \| \|
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: