Context Navigation

source: Dev/trunk/RGraph/docs/index.html @ 133

Last change on this file since 133 was 77, checked in by fpvanagthoven, 14 years ago
RGraph
File size: 42.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 - documentation</title>
	22
	23	<meta name="keywords" content="rgraph html5 canvas chart docs" />
	24	<meta name="description" content="RGraph: Javascript charts and graph library - Documentation index" />
	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.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	<meta name="keywords" content="rgraph chart html5 javascript canvas" />
	34	<meta name="description" content="RGraph: Javascript charts and graph library Javascript charts & HTML5 canvas charts library" />
	35
	36	<script src="../libraries/RGraph.common.core.js" ></script>
	37
	38	<script>
	39	var _gaq = _gaq \|\| [];
	40	_gaq.push(['_setAccount', 'UA-54706-2']);
	41	_gaq.push(['_trackPageview']);
	42
	43	(function() {
	44	var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
	45	ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
	46	var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
	47	})();
	48	</script>
	49
	50	</head>
	51	<body>
	52
	53
	54	<!-- Social networking buttons -->
	55	<div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed">
	56	<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>
	57	<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>
	58	</div>
	59
	60	<script>
	61	// Opera fix
	62	if (navigator.userAgent.indexOf('Opera') == -1) {
	63	document.getElementById("social_icons").style.position = 'fixed';
	64	}
	65	</script>
	66	<!-- Social networking buttons -->
	67
	68
	69	<div id="breadcrumb">
	70	<a href="../index.html">RGraph: Javascript charts and graph library</a>
	71	>
	72	Documentation
	73	</div>
	74
	75	<h1>RGraph: <span>Javascript charts and graph library</span> - Documentation</h1>
	76
	77	<script>
	78	if (RGraph.isIE8()) {
	79	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>');
	80	}
	81	</script>
	82
	83	<div style="background-color: #ffb; border: 2px dashed black; padding: 3px">
	84	12th July 2011: The Tradar chart has been renamed to the Radar chart. You WILL need to update your code slightly with the new name.
	85	</div>
	86
	87	<div>
	88	<h4>Introduction</h4>
	89
	90	<ul>
	91	<li>
	92	<a href="../index.html#intro" title="A short description of RGraph: Javascript charts and graph library">Introduction to RGraph: Javascript charts and graph library</a>
	93	<ul>
	94	<li><a href="what-is-a-graph.html" title="A brief description of what a graph/chart is">What is a graph?</a></li>
	95	<li><a href="what-is-html5-canvas.html" title="A brief description of what HTML5 canvas is">What is HTML5 canvas?</a></li>
	96	<li><a href="you-dont-need-to-spend-a-lot-of-money.html" title="You don't need to spend a lot of money to get attractive charts">You don't need to spend a lot of money to get attractive charts</a></li>
	97	</ul>
	98	</li>
	99	</ul>
	100
	101	<ul>
	102	<li><a href="../examples/index.html"><b>Examples</b></a></li>
	103	</ul>
	104	</div>
	105
	106
	107	<div style="float: left; width: 202px">
	108	<h4>Chart types</h4>
	109	<ul>
	110	<li><a href="bar.html">Bar charts</a></li>
	111	<li><a href="bipolar.html">Bi-polar charts</a></li>
	112	<li><a href="donut.html">Donut charts</a></li>
	113	<li><a href="funnel.html">Funnel charts</a></li>
	114	<li><a href="gantt.html">Gantt charts</a></li>
	115	<li><a href="hbar.html">Horizontal bar charts</a></li>
	116	<li><a href="hprogress.html">Horizontal progress bar</a></li>
	117	<li><a href="led.html">LED Grid</a></li>
	118	<li><a href="line.html">Line charts</a></li>
	119	<li><a href="meter.html">Meter charts</a></li>
	120	<li><a href="odo.html">Odometer charts</a></li>
	121	<li><a href="pie.html">Pie charts</a></li>
	122	<li><a href="radar.html">Radar charts</a></li>
	123	<li><a href="rose.html">Rose charts</a></li>
	124	<li><a href="rscatter.html">Radial scatter charts</a></li>
	125	<li><a href="scatter.html">Scatter charts</a></li>
	126	<li><a href="thermometer.html">Thermometer charts</a></li>
	127	<li><a href="vprogress.html">Vertical progress bar</a></li>
	128	<li><a href="waterfall.html">Waterfall charts</a></li>
	129	</ul>
	130	</div>
	131
	132	<div style="float: left; width: 435px">
	133
	134	<h4>Features</h4>
	135	<ul>
	136	<li><a href="gutters.html">Variable gutter sizes</a></li>
	137	<li><a href="setconfig.html">The RGraph.SetConfig() function</a></li>
	138	<li><a href="keys.html">Examples of keys in charts</a></li>
	139	<li><a href="dynamic.html">Updating your charts dynamically</a></li>
	140	<li><a href="png.html">Retrieving a PNG of your charts</a></li>
	141	<li><a href="domcontentloaded.html">DOMContentLoaded example</a></li>
	142	<li><a href="events.html">Custom RGraph events</a></li>
	143	<li><a href="adjusting.html">Adjusting your charts interactively</a></li>
	144	<li><a href="tooltips.html">Using tooltips in your charts</a></li>
	145	<li><a href="resizing.html">Resizing your charts</a></li>
	146	<li><a href="msie.html">Microsoft Internet Explorer support</a></li>
	147	<li><a href="async.html">Asynchronous processing</a></li>
	148	<li><a href="zoom.html">Zooming your charts</a></li>
	149	<li>
	150	<a href="annotating.html">Annotating your charts</a>
	151	<ul>
	152	<li><a href="annotate_persist.html">Making your annotations shareable across browsers/computers</a></li>
	153	</ul>
	154	</li>
	155	<li><a href="combine.html">Combining charts</a></li>
	156	<li><a href="external.html">Integrating RGraph with external libraries (ModalDialog)</a></li>
	157	<li>
	158	<a href="animation.html">Animating your charts</a>
	159	<ul>
	160	<li><a href="animation_segments.html">An animated (interactive) Pie chart</a></li>
	161	</ul>
	162	</li>
	163	<li><a href="css.html">Available CSS classes</a></li>
	164	<li><a href="color.html">About canvas color definitions</a></li>
	165	<li><a href="context.html">Context menus</a></li>
	166	<li><a href="misc.html">Miscellaneous documentation</a></li>
	167	<li><a href="issues.html">Common issues</a></li>
	168	<li><a href="api.html">API Documentation</a></li>
	169	</ul>
	170	</div>
	171
	172	<div style="float: left; width: 338px">
	173	<h4>Miscellaneous</h4>
	174	<ul>
	175	<li><a href="licensing.html"><b>Licensing FAQs</b></a></li>
	176	<li><a href=".CHANGELOG.txt">The changelog</a></li>
	177	<li><a href=".BC.txt">Backwards compatibility breaks</a></li>
	178	</ul>
	179
	180	<h4>On this page:</h4>
	181
	182	<ul>
	183	<li><a href="#benefits" title="Benefits of RGraph: Javascript charts and graph library">Benefits of RGraph: Javascript charts and HTML5 canvas charts</a></li>
	184	<li><a href="#browser" title="Information about browser support">Browser support</a></li>
	185	<li><a href="#performance" title="Things you may want to look at concerning performance">Improving the performance of your charts</a></li>
	186	<li><a href="#implementation" title="Implementing RGraph on your website">Implementing RGraph</a></li>
	187	<li><a href="#structure" title="Suggested structure for RGraph">Suggested structure for RGraph</a></li>
	188	<li>
	189	<a href="#integration" title="Information on integrating RGraph with server side scripting">Integration with server side scripting</a>
	190	<ul>
	191	<li><a href="#mysql" title="Integration with PHP & MySQL">Integration with PHP & MySQL</a></li>
	192	<li><a href="#ajax" title="Making AJAX requests">Making AJAX requests</a></li>
	193	</ul>
	194	</li>
	195	<li><a href="#support" title="Need support? Get it here">Support forum</a></li>
	196	</ul>
	197	</div>
	198
	199
	200
	201	<!------------------------------------------------------------------------------------------------------------------------>
	202
	203
	204
	205	<br clear="all" />
	206	<hr />
	207
	208
	209
	210	<a name="benefits"></a>
	211	<br /> <br /> <br />
	212	<h2>Benefits of RGraph: Javascript charts and graph library</h2>
	213
	214	<p>
	215	HTML5 introduces a new HTML element - the CANVAS tag. This tag allows for two dimensional drawing easily using Javascript.
	216	This makes it perfect for producing charts. Because Javascript runs on your users computer, none of the load on your web server
	217	normally associated with producing charts is incurred. Not only that but because
	218	of the greater processing power that is typically available on users' computers, they will be much faster. And,
	219	because the code can be both compressed (for example if you're using Apache, mod_gzip will do this automatically for you) and
	220	cached, bandwidth usage can be massively reduced. This makes it economically attractive to employ at the same time as
	221	benefiting your website, ie:
	222	</p>
	223
	224	<ul>
	225	<li><b>It can save you money by reducing the load on your web server(s) and hence the number of web servers you may need</b><br /><br /></li>
	226	<li><b>It can speed up your web pages by reducing the number of images in your web pages and moving the overhead of chart
	227	production to the client</b></li>
	228	</ul>
	229
	230	<p>
	231	Imagine, you are creating 100,000 charts a day and the data is such that the resulting charts cannot be cached. With the RGraph
	232	library you can reduce that figure to zero. All the processing and chart creation is done by each individual client, much like
	233	rendering the HTML you send to them. So you don't have to send any images, you simply send them the Javascript charts libraries
	234	once. So, much lower bandwidth bills and far less strain on your webserver.
	235	</p>
	236
	237	<p>
	238	And if that wasn't enough, because the charts are created using Javascript, they will work offline if you view a .html page
	239	on your own PC. Download the archive and see! Useful if you need to do a presentation for example and want to use the same
	240	chart(s) as your website.
	241	</p>
	242
	243	<div>
	244	<div style="width: 45%; background-color: #fff; display: inline; display: inline-block">
	245	<ul>
	246	<li>Cross browser support.</li>
	247	<li>19 Different base chart types (<a href="../examples/index.html">Examples</a>).</li>
	248	<li>Charts work on and off-line.</li>
	249	<li>Interactive features.</li>
	250	</ul>
	251	</div>
	252
	253	<div style="width: 45%; display: inline; display: inline-block">
	254	<ul>
	255	<li>Charts are created on the client - no server overhead.</li>
	256	<li>Very easy setup (see <a href="#implementation">Implementing RGraph</a>).</li>
	257	<li>Fully documented.</a></li>
	258	<li>Very easy to learn.</li>
	259	</ul>
	260	</div>
	261	</div>
	262
	263
	264	<a name="browser"></a>
	265	<br /> <br /> <br />
	266	<h2>Browser support</h2>
	267
	268	<p>
	269	Since the charts are produced using HTML5 features (the new <b>canvas</b> tag), client support is currently:
	270	</p>
	271
	272	<ul>
	273	<li>Mozilla Firefox 3.0+</li>
	274	<li>Google Chrome 1+</li>
	275	<li>Apple Safari 3+</li>
	276	<li>Opera 9.5+</li>
	277	<li>Microsoft Internet Explorer 8+ (see note)</li>
	278	<li>iPhone (text support from iOS v4+)</li>
	279	<li>iPad (text support from iOS v4.2+)</li>
	280	</ul>
	281
	282	<p>
	283	The HTML5 canvas tag is part of the <a href="http://www.w3.org/html/wg/html5/" target="_blank">HTML5 specification</a>,
	284	and all of the above browsers have some sort of support for it.
	285	</p>
	286
	287	<p>
	288	<b>HTML5 canvas & Microsoft Internet Explorer (MSIE)</b><br />
	289	Microsoft Internet Explorer 8 doesn't natively support the HTML5 <canvas> tag. To support
	290	MSIE 8 you will need to use either
	291	<a href="http://code.google.com/chrome/chromeframe/" target="_blank">Google Chrome Frame</a> or
	292	<a href="http://code.google.com/p/explorercanvas/" target="_blank">ExCanvas from Google</a>
	293	(which is included in the RGraph archive). Read more about Internet Explorer compatibility
	294	<a href="msie.html">here</a>.
	295
	296	<p />
	297
	298	<span style="color: #090">
	299	Starting with preview 3 <b style="color: black">Microsoft Internet Explorer 9</b> has full support for <canvas>. You can view some screenshots
	300	<a href="http://support.rgraph.net/message/rgraph-in-internet-explorer-9.html" target="_blank">here</a>.
	301	MSIE 6 and 7 are supported by way of Google Chrome Frame.
	302	</span>
	303	</p>
	304
	305	<p>
	306	<b>RGraph and older browsers</b><br />
	307	Older browsers (eg Chrome 1, Firefox 3, Safari 3, Opera 9.5) are supported, however if they don't support the canvas shadow or
	308	text APIs, these will naturally be unavailable. Earlier versions of these browsers may work, but are untested.
	309	</p>
	310
	311	<a name="performance"></a>
	312	<br /> <br /> <br />
	313	<h2>Improving the performance of your charts</h2>
	314
	315	<p>
	316	Although performance is excellent, (eg compared to server based charts libraries), you may still want to tune
	317	RGraph further. The biggest thing you can do is use compression, which reduces the initial download time of the libraries, but
	318	there are a number of things you can do:
	319	</p>
	320
	321	<ul>
	322	<li>
	323	<b>Compression</b><br />HTTP compression can dramatically reduce your bandwidth bills and increase the speed
	324	of your website. The RGraph.common.core.js file for example used to be over 100k, but with compression this was reduced
	325	to around 17k. Less than a fifth of the original size! <span style="color: red">If you do only one thing to aid performance,
	326	then it should be this.</span>
	327
	328	<p>
	329	To achieve this with Apache you have a few options:
	330	</p>
	331
	332	<ul style="list-style-type: disc">
	333	<li>You can use the Apache module mod_gzip which compresses the libraries on the fly.</li>
	334	<li>
	335	You can compress the libraries manually using the *NIX gzip command, rename them to remove the .gz suffix
	336	and add the header using an Apache directive
	337	(eg <span style="background-color: #C5FFC5; padding: 1px">AddEncoding gzip .js</span>). If you have some sort of
	338	release process/script, it would make sense to add this to it to automate the procedure.
	339	</li>
	340	</ul>
	341	<p>
	342	</li>
	343
	344	<li>
	345	<b>Minification</b><br />
	346	Minification reduces the size of the library before compression takes effect, removing unnecessary spaces and comments etc.
	347	A combination of minification and compression will give superb results. For example, before being split up into seperate files,
	348	minification combined with compression reduced the common library from over 100k to roughly 10k (!). There is a PHP shell
	349	script that you can use to minify the libraries in the scripts directory.
	350
	351	<p>
	352	You can get pre-minified versions of the libraries <a href="http://www.rgraph.net/RGraph.minified.zip">here</a>.
	353	</p>
	354	</li>
	355
	356	<p>
	357
	358	<li>
	359	<b>Pre-emptive caching</b><br />
	360	Slightly different to caching itself, is pre-emptive caching. This involves downloading the libraries before the page that requires
	361	them is shown. This way, they're already in the users browser cache and the chart will subsequently appear to be much much
	362	quicker. An example of this would be having the library included at the bottom of your index page of your website (optionally
	363	with the <b>defer="defer"</b> attribute). The script can be downloaded at will because the page doesn't actually use it, but
	364	for subsequent pages it will already be in the users browser cache.
	365
	366	<p>
	367	</li>
	368
	369	<li>
	370	<b>Caching</b><br />
	371	Since the libraries you're using won't change that often, you can set distant Expires: headers on them, or appropriate
	372	Cache-Control: headers, and the client will not even have to contact your server for it. When you want to make sure
	373	the library is re-downloaded (eg. you update the library), then simply change the filename.
	374
	375	<p>
	376	</li>
	377
	378	<li>
	379	<b>Script tag placement</b><br />
	380	According to <a href="http://developer.yahoo.com/performance/" target="_blank">Yahoo! guidelines</a> placing the <SCRIPT>
	381	tag at the bottom of the page can increase the percieved load time. If you do this, then your charts should be
	382	created in the window.onload event, otherwise the browser may try to create them without the library
	383	having been loaded, and will therefore subsequently fail.
	384
	385	<p>
	386
	387	You should also consider the effect that this has when your page is rather weighty. If the page is weighty there
	388	will be a small delay before the onload event fires, and therefore creates the chart. This might not be so bad if the
	389	chart is not immediately visible, however if it is then you should carefully consider using the onload event. You
	390	may wish to load the library in the page header, define the canvas tag and then immediately define the javascript
	391	that creates the chart. This way
	392	the chart will be created and shown, and then the rest of the page loads. The end result is that your chart
	393	appears to be faster.
	394
	395	<p />
	396
	397	Between the onload event, asychronous Javascript and careful tag placement, you will need to experiment to get the right result
	398	for you.
	399	</li>
	400
	401	<li>
	402	<b>Document structure</b><br />
	403	The structure of your document can have a significant impact on how fast your charts are displayed. If, for example, you use
	404	tables for layout, this can delay the display of elements that are affected by the size of the table. Where possible, you
	405	should consider trying to convert your layout to DIVs. An example of this is the front page of this website. The charts
	406	were right aligned using a table as a container. This caused a visible delay when showing them. In this case it was a
	407	simple matter to convert the page to use DIVs, and the page subsequently displays much faster.
	408	<p />
	409	</li>
	410
	411	<li>
	412	<b>Creating your charts asynchronously</b><br />
	413	Where possible, you may wish to create your charts asynchronously. This allows the browser to continue rendering the page
	414	immediately after getting to the code that creates the chart. This might not be perceptible if you don't have a lot of
	415	charts, or your page is small. You can read a little more about this and see example code <a href="async.html">here</a>.
	416
	417	<p />
	418
	419	Note that recent releases of Google Chrome (from a dev release of version 4) have had an issue with creating charts
	420	asynchronously, which presents itself by not drawing text sometimes (it's not consistent). Simply not using
	421	asynchronous chart production in this case resolves the issue.
	422	</li>
	423
	424	<li>
	425	<b>DOMContentLoaded event</b><br />
	426	Using this event can speed up the display of your charts signifcantly compared to the more well known <i>onload</i> event.
	427	It is supported by Chrome, Gecko based browsers (ie Firefox), Safari, Opera and Internet Explorer 9. This event fires when
	428	the structure of the page is loaded, but not necessarily the images or CSS. This means that if your page is laden with
	429	images, this event will fire before the onload event, thus creating your charts quicker. The effect can be very noticeable.
	430
	431	<pre class="code">
	432	function addListener(func)
	433	{
	434	if(window.addEventListener) {
	435	window.addEventListener('DOMContentLoaded', func, false);
	436	} else {
	437	document.attachEvent("onDOMContentLoaded", func);
	438	}
	439	}
	440	</pre>
	441	You can read more about the <i>DOMContentLoaded</i> event on the Mozilla site, <a href="https://developer.mozilla.org/en/Gecko-Specific_DOM_Events" target="_blank">here</a>,
	442	and the Microsoft site <a href="http://ie.microsoft.com/testdrive/HTML5/87DOMContent-Loaded/Default.html" target="_blank">here</a>.
	443	There's an example <a href="domcontentloaded.html">here</a>.
	444	<p />
	445	</li>
	446
	447	<li>
	448	<b>AJAX requests</b><br />
	449	If you can take advantage of AJAX, you can use this method to retrieve data from your server. If, for example, you have a chart that
	450	shows ongoing information, instead of simply refreshing the entire page, you could use an AJAX request to just retrieve the
	451	data that you want and update the chart that way. This reduces the amount of data needed to be transferred, thus reducing the
	452	bandwidth used, and will be quicker than a full page refresh, particularly if your page is weighty. There's a simple AJAX
	453	function that you can use <a href="#ajax">below</a>.
	454	<p />
	455	</li>
	456
	457	<li>
	458	<b>Combining libraries</b><br />
	459	You may wish to consider combining the RGraph libraries into a single file.
	460	This won't save on the size of the individual libraries, but will save on the headers that are sent as part of the response.
	461	If a typical response sends 500 bytes worth of headers, and you send four chart libraries, then combining the libraries
	462	would save 1500 bytes. Multiple factors need to be considered though, including things like caching, which can circumvent
	463	the unneccessary repeated downloading of the libraries.
	464
	465	<p>
	466	To make your life straight-forward, you may want to make this a part of your release script/process. This way you
	467	can make changes to the scripts in your development environment as you would normally.
	468	</p>
	469
	470	<p>
	471	Another effect of combining libraries is reducing the amount of HTTP connections needed to retrieve them. Most browsers
	472	have a limit on how many connections they can create simultaneously, so if they're not being used to retrieve your
	473	chart libraries, they can be used for something else. Reducing the number of HTTP connections also eliminates the time
	474	spent setting up those connections.
	475	</p>
	476	</li>
	477	</ul>
	478
	479	<b>A reasonable performance strategy</b>
	480
	481	<p>
	482	Although there's a lot you can do in regards to performance, a few of the points here will suffice for most
	483	websites:
	484
	485	<ul>
	486	<li>Compression</li>
	487	<li>Minification</li>
	488	<li>Pre-emptive caching</li>
	489	<li>Caching</li>
	490	</ul>
	491
	492	The number one thing you should do is compress your libraries. This has multiple benefits and provides by far the most gain,
	493	effectively for free. Secondly, use the minified libraries. Since you can download them <a href="../RGraph.minified.zip">here</a>,
	494	you might as well use them. Then we have pre-emptive caching. Since most websites won't show charts on the front page or will
	495	have a login page that is shown before any charts, this effectively eliminates the charts library download. And lastly caching
	496	should be done as a matter of course. There's no reason to keep downloading the same library so even caching for only 30 minutes
	497	(or the duration of an average visit to your website) will produce results.
	498	</p>
	499
	500	<p>
	501	<b>General website performance tools</b><br /><br />
	502
	503	If your aim is to improve your websites performance as a whole then you may be interested in these tools:
	504	</p>
	505
	506	<ul>
	507	<li>
	508	<a href="http://www.webpagetest.org/" target="_blank">http://www.webpagetest.org/</a><br />
	509	This site can provide a wealth of information about how to improve the permance of your website, specific to your site.<br /><br />
	510	</li>
	511
	512	<li>
	513	<a href="http://code.google.com/speed/page-speed/docs/using_chrome.html" target="_blank">Page Speed for Google Chrome</a><br />
	514	<a href="http://code.google.com/speed/page-speed/docs/using_firefox.html" target="_blank">Page Speed for Mozilla Firefox</a><br />
	515	<a href="http://pagespeed.googlelabs.com/" target="_blank">Page Speed online</a><br />
	516	The Page Speed plugins and the online tool also provide a great deal of information about how to speed up your website.<br /><br />
	517	</li>
	518	</ul>
	519
	520	<a name="implementation"></a>
	521	<br /> <br /> <br />
	522	<h2>Implementing RGraph</h2>
	523
	524	<p>
	525	Getting RGraph up and running is very easy and consists of three steps. If you're having trouble I suggest you get hold of a copy of
	526	<a href="http://www.mozilla.com" target="_blank">Firefox</a> along with <a href="http://www.getfirebug.com" target="_blank">Firebug</a> - its
	527	Javascript error console will make debugging your issue much easier. Many problems are down to a library not having been included or
	528	not using the onload event when you need to. You might also benefit from using the <a href="https://addons.mozilla.org/en-US/firefox/addon/60" target="_blank">Web Developer toolbar</a>
	529	for Firefox. This allows you to easily disable caching, thus eliminating any problems that that causes. You could equally use
	530	the Chrome developer tools (CTRL+SHIFT+J), optionally in docked mode, which also provides a good quality Javascript console.
	531	</p>
	532
	533	<ol>
	534	<li>
	535	Include the libraries (put this in your documents <HEAD>):
	536	<pre class="code">
	537	<script src="RGraph.common.core.js"></script>
	538
	539	<script src="RGraph.common.adjusting.js"></script> <!-- Just needed for adjusting -->
	540	<script src="RGraph.common.annotate.js"></script> <!-- Just needed for annotating -->
	541	<script src="RGraph.common.context.js"></script> <!-- Just needed for context menus -->
	542	<script src="RGraph.common.resizing.js"></script> <!-- Just needed for resizing -->
	543	<script src="RGraph.common.tooltips.js"></script> <!-- Just needed for tooltips -->
	544	<script src="RGraph.common.zoom.js"></script> <!-- Just needed for zoom -->
	545
	546	<script src="RGraph.bar.js"></script> <!-- Just needed for bar charts -->
	547	<script src="RGraph.bipolar.js"></script> <!-- Just needed for bi-polar charts -->
	548	<script src="RGraph.funnel.js"></script> <!-- Just needed for funnel charts -->
	549	<script src="RGraph.gantt.js"></script> <!-- Just needed for gantt charts -->
	550	<script src="RGraph.hbar.js"></script> <!-- Just needed for horizontal bar charts -->
	551	<script src="RGraph.hprogress.js"></script> <!-- Just needed for horizontal progress bars -->
	552	<script src="RGraph.led.js"></script> <!-- Just needed for LED charts -->
	553	<script src="RGraph.line.js"></script> <!-- Just needed for line charts -->
	554	<script src="RGraph.meter.js"></script> <!-- Just needed for meter charts -->
	555	<script src="RGraph.odo.js"></script> <!-- Just needed for odometers -->
	556	<script src="RGraph.pie.js"></script> <!-- Just needed for pie AND donut charts -->
	557	<script src="RGraph.rose.js"></script> <!-- Just needed for rose charts -->
	558	<script src="RGraph.rscatter.js"></script> <!-- Just needed for rscatter charts -->
	559	<script src="RGraph.scatter.js"></script> <!-- Just needed for scatter charts -->
	560	<script src="RGraph.radar.js"></script> <!-- Just needed for radar charts -->
	561	<script src="RGraph.vprogress.js"></script> <!-- Just needed for vertical progress bars -->
	562	</pre>
	563	</li>
	564
	565	<li>
	566	Add the canvas tag (put it where you want the chart to appear):
	567	<pre class="code">
	568	<canvas id="myCanvas" width="600" height="250">[No canvas support]</canvas>
	569	</pre>
	570	</li>
	571
	572	<li>
	573	Create the chart (since it is using the onload event, you can put this anywhere):
	574
	575	<pre class="code">
	576	<script>
	577	window.onload = function ()
	578	{
	579	var data = [280, 45, 133, 166, 84, 259, 266, 960, 219, 311, 67, 89];
	580
	581	var bar = new RGraph.Bar('myCanvas', data);
	582	bar.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
	583	bar.Set('chart.gutter.left', 35);
	584	bar.Draw();
	585	}
	586	</script>
	587	</pre>
	588	</li>
	589	</ol>
	590
	591	<p>
	592	There's also a very <a href="../examples/basic.html">basic example</a> of using RGraph, that does very little. It can be helpful to
	593	illustrate how you can get RGraph up and running.
	594	</p>
	595
	596	<a name="structure"></a>
	597	<br /> <br /> <br />
	598	<h2>Suggested structure for RGraph</h2>
	599
	600	<img src="../images/structure.png" width="175" height="205" alt="Suggested structure for RGraph" style="float: right" />
	601
	602	<p>
	603	The suggested layout structure for the RGraph libraries is shown on the right. The <b>www.example.com</b> folder represents
	604	the root/top level of your website with the <b>javascript</b> directory beneath that. The <b>css</b> and <b>images</b>
	605	folders are shown for
	606	illustrative purposes only. If you follow this layout then your URLs to the RGraph libraries would be:
	607	</p>
	608
	609	<p>
	610	<b>http://www.example.com/javascript/rgraph/RGraph.common.core.js</b><br />
	611	<b>http://www.example.com/javascript/rgraph/RGraph.bar.js</b><br />
	612	etc
	613	</p>
	614
	615	<p>
	616	By using this structure you make RGraph easy to update should you need to, and also keep all the RGraph libraries in
	617	one, easy to find, place.
	618	</p>
	619
	620	<br clear="all" />
	621
	622	<a name="integration"></a>
	623	<br /> <br /> <br />
	624	<h2>Integration with server side scripting</h2>
	625
	626	<p>
	627	This is a very easy process, as easy as sending content to the browser. All you need to do is make the <i>data</i> variable
	628	(as in the example below) contain the data you want to be displayed. Eg:
	629	</p>
	630
	631	<pre class="code">
	632	<script src="RGraph.common.core.js"></script>
	633	<script src="RGraph.line.js"></script>
	634
	635	<canvas id="myCanvasTag" width="600" height="200">[No canvas support]</canvas>
	636
	637	<script>
	638	data = [78,16,26,23,25,51,34,64,84,84];
	639
	640	line = new RGraph.Line("myCanvasTag", data);
	641	line.Set("chart.labels", ["Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov"]);
	642	line.Draw();
	643	</script>
	644	</pre>
	645
	646	<p>
	647	To get the above using PHP you could do this:
	648	</p>
	649
	650	<pre class="code"><?php
	651	// This simply makes a string out of the array of data
	652	$myData = join(',', array(78,16,26,23,25,51,34,64,84,84));
	653
	654	// This prints out the required HTML markup
	655	print('<script src="RGraph.common.core.js"></script>' . "\n");
	656	print('<script src="RGraph.line.js"></script>' . "\n\n");
	657	print('<canvas id="myCanvasTag" width="600" height="200">[No canvas support]</canvas>' . "\n\n");
	658	print('<script>' . "\n");
	659	print(' var data = [' . $myData . '];' . "\n\n");
	660	print(' var line = new RGraph.Line("myCanvasTag", data);' . "\n");
	661	print(' line.Set("chart.labels", ["Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov"]);' . "\n");
	662	print(' line.Draw();' . "\n");
	663	print('</script>');
	664	?>
	665	</pre>
	666
	667	<p>
	668	Strictly speaking the <span style="font-family: Monospace">var</span> isn't necessary, however if you put the code inside a
	669	function (like window.onload), it's probably best to do so as using <span style="font-family: Monospace">var</span> will
	670	make the variable local, and not global. So doing so will help prevent naming clashes.
	671	</p>
	672
	673
	674	<a name="mysql"></a>
	675	<br /> <br /> <br />
	676	<h4>Integration with PHP & MySQL</h4>
	677
	678	<p>
	679	This is a simple matter of formatting what you get back from MySQL into a string, as the MySQL dump and PHP code
	680	below shows (it's based on a database called RGraph_example):
	681	</p>
	682
	683	<pre class="code">
	684	#
	685	# Table structure for table `daily_statistics`
	686	#
	687
	688	CREATE TABLE `daily_statistics` (
	689	`st_day` char(9) NOT NULL,
	690	`st_statistics` tinyint(4) NOT NULL,
	691	UNIQUE KEY `st_day` (`st_day`)
	692	) ENGINE=MyISAM DEFAULT CHARSET=latin1;
	693
	694	#
	695	# Dumping data for table `daily_statistics`
	696	#
	697
	698	INSERT INTO `daily_statistics` VALUES ('Mon', 124);
	699	INSERT INTO `daily_statistics` VALUES ('Tue', 95);
	700	INSERT INTO `daily_statistics` VALUES ('Wed', 64);
	701	INSERT INTO `daily_statistics` VALUES ('Thu', 94);
	702	INSERT INTO `daily_statistics` VALUES ('Fri', 75);
	703	INSERT INTO `daily_statistics` VALUES ('Sat', 98);
	704	INSERT INTO `daily_statistics` VALUES ('Sun', 84);
	705	</pre>
	706
	707	<pre class="code">
	708	<?php
	709	/**
	710	* Change these to your own credentials
	711	*/
	712	$hostname = "localhost";
	713	$username = "root";
	714	$password = "PASSWORD";
	715	$database = "RGraph_example";
	716
	717	$connection = mysql_connect($hostname, $username, $password) OR die('Could not connect to MySQL: ' . mysql_error());
	718	mysql_select_db($database);
	719
	720	$result = mysql_query("SELECT st_day, st_statistics FROM daily_statistics");
	721	if ($result) {
	722
	723	$labels = array();
	724	$data = array();
	725
	726	while ($row = mysql_fetch_assoc($result)) {
	727	$labels[] = $row["st_day"];
	728	$data[] = $row["st_statistics"];
	729	}
	730
	731	// Now you can aggregate all the data into one string
	732	$data_string = "[" . join(", ", $data) . "]";
	733	$labels_string = "['" . join("', '", $labels) . "']";
	734	} else {
	735	print('MySQL query failed with error: ' . mysql_error());
	736	}
	737	?>
	738	<html>
	739	<head>
	740
	741	<!-- Don't forget to update these paths -->
	742
	743	<script src="libraries/RGraph.common.core.js" ></script>
	744	<script src="libraries/RGraph.line.js" ></script>
	745
	746	</head>
	747	<body>
	748
	749	<canvas id="cvs" width="600" height="250">[No canvas support]</canvas>
	750	<script>
	751	chart = new RGraph.Line('cvs', <?php print($data_string) ?>);
	752	chart.Set('chart.background.grid.autofit', true);
	753	chart.Set('chart.gutter.left', 35);
	754	chart.Set('chart.gutter.right', 5);
	755	chart.Set('chart.hmargin', 10);
	756	chart.Set('chart.tickmarks', 'endcircle');
	757	chart.Set('chart.labels', <?php print($labels_string) ?>);
	758	chart.Draw();
	759	</script>
	760
	761	</body>
	762	</html>
	763	</pre>
	764
	765	<p>
	766	This PHP code provides the data in two strings - <i>$labels_string</i> and <i>$data_string</i>. These variables are then used
	767	in the RGraph code to provide the data and the labels.
	768	</p>
	769
	770	<p><b>Remember:</b></p>
	771
	772	<ul>
	773	<li>Change the database hostname/username/password/database to match your own.</li>
	774	<li>Ensure you have the correct paths to the RGraph libraries.</li>
	775	</ul>
	776
	777	<a name="ajax"></a>
	778	<br /> <br /> <br />
	779	<h4>Making AJAX requests</h4>
	780
	781	<p style="background-color: #ffa; padding: 3px; border: 1px dashed black">
	782	<b>Note:</b>
	783	It is important that you're careful with types when making AJAX requests. Since the response is initially a string,
	784	and your AJAX function/library may not do conversions for you, you may need to convert these strings to numbers. To
	785	do this you can use the <i>Number()</i> or <i>parseInt()</i> functions. For example:
	786	</p>
	787
	788	<pre class="code">
	789	<script>
	790	num = Number('23');
	791	num = parseInt('43');
	792	</script>
	793	</pre>
	794
	795	<p>
	796	Here is a simple function that you could use to get data from your server using AJAX:
	797	</p>
	798
	799	<pre class="code">
	800	<script>
	801	/**
	802	* Makes an AJAX call. It calls the given callback (a function) when ready
	803	*
	804	* @param string url The URL to retrieve
	805	* @param function callback A function object that is called when the response is ready, there's an example below
	806	* called "myCallback".
	807	*/
	808	function AjaxCall (url, callback)
	809	{
	810	// Mozilla, Safari, ...
	811	if (window.XMLHttpRequest) {
	812	var httpRequest = new XMLHttpRequest();
	813
	814	// MSIE
	815	} else if (window.ActiveXObject) {
	816	var httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
	817	}
	818
	819	httpRequest.onreadystatechange = callback;
	820
	821	httpRequest.open('GET', url, true);
	822	httpRequest.send();
	823	}
	824
	825
	826	/**
	827	* This sample callback function is called when the data is ready (readyState=4)
	828	*/
	829	function myCallback ()
	830	{
	831	if (this.readyState == 4 && this.status == 200) {
	832	// Everything is good, the response is received
	833	alert(this.responseText);
	834	}
	835	}
	836	</script>
	837	</pre>
	838
	839	<p>And you would use it like this:</p>
	840
	841	<pre class="code">
	842	<script>
	843	AjaxCall('http://www.example.com/getSomething.php', myCallback);
	844	</script>
	845	</pre>
	846
	847	<p>
	848	There's an example <a href="dynamic.html">here</a> that shows updating your chart dynamically.
	849	</p>
	850
	851
	852	<a name="support"></a>
	853	<br /> <br /> <br />
	854	<h2>Support forum</h2>
	855
	856	<div style="text-align: center">
	857	<span style="background-color: #efe; padding: 3px; border: 1px solid black; border-radius: 15px; padding-left: 10px; padding-right: 10px">
	858	<b>
	859	Join the support forum:
	860	<a href="http://support.rgraph.net">http://support.rgraph.net</a>
	861	</b>
	862	</span>
	863	</div>
	864
	865	<p>
	866	Support is available via a public forum. If you think that the issue you have is common, try the <a href="issues.html">issues</a>
	867	page first. If you just want to read the group you can and there's also an
	868	<a target="_blank" href="http://support.rgraph.net/feeds.html"><b>RSS feed</b></a> that you can subscribe to if you prefer.
	869	</p>
	870
	871	<p>
	872	If you want to keep up-to-date on RGraph, then also subscribe to the RSS feed, as I post update notifications here. You can
	873	also follow me on <a href="http://twitter.com/_rgraph"><b>Twitter</b></a>. I post update notifications here along with HTML5
	874	related news.
	875	</p>
	876
	877	<br />
	878	<br />
	879
	880	</body>
	881	</html>

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

Download in other formats: