diff options
Diffstat (limited to 'schall/static/RGraph/docs/index.html')
| -rw-r--r-- | schall/static/RGraph/docs/index.html | 909 |
1 files changed, 909 insertions, 0 deletions
diff --git a/schall/static/RGraph/docs/index.html b/schall/static/RGraph/docs/index.html new file mode 100644 index 0000000..116fddb --- /dev/null +++ b/schall/static/RGraph/docs/index.html @@ -0,0 +1,909 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - documentation</title> + + <meta name="keywords" content="rgraph html5 canvas chart docs examples" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Documentation and HTML5 examples" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A chart library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.jpg"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <meta name="keywords" content="rgraph chart html5 javascript canvas" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library Javascript charts & HTML5 canvas charts library" /> + + <script src="../libraries/RGraph.common.core.js" ></script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> + +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + +<div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + Documentation and HTML5 examples +</div> + +<h1>RGraph: <span>HTML5 Javascript charts library</span> - Documentation and HTML5 examples</h1> + + <script> + if (RGraph.isIE8()) { + 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.</div>'); + } + </script> + + <div style="text-align: center"> + <div class="warning" style="display: inline; display: inline-block"> + Need something that RGraph doesn't currently support? RGraph license holders can usually be accomodated - please + <a href="mailto:support@rgraph.net"><b>contact support</b></a> to discuss your requirements. + </div> + </div> + + <div> + <h4>Introduction</h4> + + <ul> + <li> + <a href="../index.html#intro" title="A short description of RGraph: HTML5 Javascript charts library">Introduction to RGraph: HTML5 Javascript charts library</a> + <ul> + <li><a href="what-is-html5-canvas.html" title="A brief description of what HTML5 canvas is">What is HTML5 canvas?</a></li> + </ul> + </li> + </ul> + + <ul> + <li><a href="../examples/index.html"><b>Example charts</b></a></li> + </ul> + </div> + + + <div style="float: left; width: 202px"> + <h4>Chart types</h4> + <ul> + <li><a href="bar.html">Bar charts</a></li> + <li><a href="bipolar.html">Bi-polar charts</a></li> + <li><a href="donut.html">Donut charts</a></li> + <li><a href="fuel.html">Fuel charts</a></li> + <li><a href="funnel.html">Funnel charts</a></li> + <li><a href="gauge.html">Gauge charts</a></li> + <li><a href="gantt.html">Gantt charts</a></li> + <li><a href="hbar.html">Horizontal bar charts</a></li> + <li><a href="hprogress.html">Horizontal progress bar</a></li> + <li><a href="led.html">LED Grid</a></li> + <li><a href="line.html">Line charts</a></li> + <li><a href="meter.html">Meter charts</a></li> + <li><a href="odo.html">Odometer charts</a></li> + <li><a href="pie.html">Pie charts</a></li> + <li><a href="radar.html">Radar charts</a></li> + <li><a href="rose.html">Rose charts</a></li> + <li><a href="rscatter.html">Radial scatter charts</a></li> + <li><a href="scatter.html">Scatter charts</a></li> + <li><a href="thermometer.html">Thermometer charts</a></li> + <li><a href="vprogress.html">Vertical progress bar</a></li> + <li><a href="waterfall.html">Waterfall charts</a></li> + </ul> + + <h4>Basic examples</h4> + + <ul> + <li><a href="../examples/basic.html">A basic example</a></li> + <li><a href="basic_tooltips.html">A basic example of a charts in tooltips</a></li> + <li><a href="basic_combined.html">A basic example of a combined Bar/Line chart</a></li> + </ul> + </div> + + <div style="float: left; width: 435px"> + + <h4>Features</h4> + <ul> + <li><a href="effects.html">Animation and visual effects <img src="../images/new.png" border="0" alt="New! width="31" height="12" /></a></li> + <li><a href="gutters.html">Variable gutter sizes</a></li> + <li><a href="setconfig.html">The RGraph.SetConfig() function</a></li> + <li><a href="keys.html">Examples of keys in charts</a></li> + <li><a href="dynamic.html">Updating your charts dynamically</a></li> + <li><a href="png.html">Retrieving a PNG of your charts</a></li> + <li><a href="domcontentloaded.html">DOMContentLoaded example</a></li> + <li><a href="events.html">Custom RGraph events</a></li> + <li><a href="adjusting.html">Adjusting your charts interactively</a></li> + <li><a href="tooltips.html">Using tooltips in your charts</a></li> + <li><a href="resizing.html">Resizing your charts</a></li> + <li><a href="msie.html">Microsoft Internet Explorer support</a></li> + <li><a href="async.html">Asynchronous processing</a></li> + <li><a href="zoom.html">Zooming your charts</a></li> + <li> + <a href="annotating.html">Annotating your charts</a> + <ul> + <li><a href="annotate_persist.html">Making your annotations shareable across browsers/computers</a></li> + </ul> + </li> + <li><a href="combine.html">Combining charts</a></li> + <li><a href="external.html">Integrating RGraph with external libraries (ModalDialog)</a></li> + <li><a href="css.html">Available CSS classes</a></li> + <li><a href="color.html">About canvas color definitions</a></li> + <li><a href="context.html">Context menus</a></li> + </ul> + + <ul> + <li><a href="#support" title="Need support? Get it here"><b>Support</b></a></li> + </ul> + + <ul> + <li><a href="misc.html">Miscellaneous documentation</a></li> + <li><a href="issues.html">Common issues</a></li> + <li><a href="api.html">API Documentation</a></li> + </ul> + </div> + + <div style="float: left; width: 338px"> + <h4>Miscellaneous</h4> + <ul> + <li><a href="licensing.html"><b>The RGraph license</b></a></li> + <li><a href=".CHANGELOG.txt">The changelog</a></li> + <li><a href=".BC.txt">Backwards compatibility breaks</a></li> + </ul> + + <h4>On this page:</h4> + + <ul> + <li><a href="#benefits" title="Benefits of RGraph: HTML5 Javascript charts library">Benefits of RGraph: HTML5 Javascript charts library</a></li> + <li><a href="#browser" title="Information about browser support">Browser support</a></li> + <li><a href="#performance" title="Things you may want to look at concerning performance">Improving the performance of your charts</a></li> + <li><a href="#implementation" title="Implementing RGraph on your website">Implementing RGraph</a></li> + <li><a href="#structure" title="Suggested structure for RGraph">Suggested structure for RGraph</a></li> + <li> + <a href="#integration" title="Information on integrating RGraph with server side scripting">Integration with server side scripting</a> + <ul> + <li><a href="#mysql" title="Integration with PHP & MySQL">Integration with PHP & MySQL</a></li> + <li><a href="#ajax" title="Making AJAX requests">Making AJAX requests</a></li> + </ul> + </li> + </ul> + </div> + + + +<!------------------------------------------------------------------------------------------------------------------------> + + + + <br clear="all" /> + <hr /> + + + + <a name="benefits"></a> + <br /> <br /> <br /> + <h2>Benefits of RGraph: HTML5 Javascript charts library</h2> + + <p> + The HTML5 canvas tag is a new tag for HTML5. It allows for two dimensional drawing easily using Javascript. + This makes it perfect for producing charts. Because Javascript runs on your users' computer, none of the load on your web server + normally associated with producing charts is incurred. Not only that but because + of the greater processing power that is typically available on users' computers, they will be much faster. And, + because the code can be both compressed (for example if you're using Apache, mod_gzip will do this automatically for you) and + cached, bandwidth usage can be massively reduced. This makes it economically attractive to employ at the same time as + benefiting your website, ie: + </p> + + <ul> + <li><b>It can save you money by reducing the load on your web server(s)</b><br /><br /></li> + <li><b>It can speed up your web pages</b></li> + </ul> + + <p> + Imagine, you are creating 10,000 charts a day and the data is such that the resulting charts cannot be cached. With the RGraph + library you can reduce that figure to zero. All the processing is done by each individual web browser, much like + showing the HTML that you send to them. So you don't have to send any images, you simply send them the Javascript charts libraries + once. So, much lower bandwidth bills and less strain on your webserver. + </p> + + <p> + And if that wasn't enough, because the charts are created using Javascript, they will work offline if you view a .html page + 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 + charts as your website. + </p> + + <div> + <div style="width: 45%; background-color: #fff; display: inline; display: inline-block"> + <ul> + <li>Cross browser support.</li> + <li>20+ Different base chart types (<a href="../examples/index.html">Examples</a>).</li> + <li>Charts work on and off-line.</li> + <li>Interactive features.</li> + </ul> + </div> + + <div style="width: 45%; display: inline; display: inline-block"> + <ul> + <li>Charts are created on the client - no server overhead.</li> + <li>Very easy setup (see <a href="#implementation">Implementing RGraph</a>).</li> + <li>Fully documented.</a></li> + <li>Very easy to learn.</li> + </ul> + </div> + </div> + + + <a name="browser"></a> + <br /> <br /> <br /> + <h2>Browser support</h2> + + <p> + Since the charts are produced using HTML5 features (the new <b>canvas</b> tag), client support includes: + </p> + + <ul> + <li>Mozilla Firefox 3.0+</li> + <li>Google Chrome 1+</li> + <li>Apple Safari 3+</li> + <li>Opera 9.5+</li> + <li>Microsoft Internet Explorer 8+ (see note)</li> + <li>iPhone (text support from iOS v4+)</li> + <li>iPad (text support from iOS v4.2+)</li> + </ul> + + <p> + The HTML5 canvas tag is part of the <a href="http://www.w3.org/html/wg/html5/" target="_blank">HTML5 specification</a>, + and all of the above browsers have some sort of support for it. + </p> + + <p> + <b>HTML5 canvas & Microsoft Internet Explorer (MSIE)</b><br /> + Microsoft Internet Explorer 8 doesn't natively support the HTML5 canvas tag. To support + MSIE8 you will need to use either + <a href="http://code.google.com/chrome/chromeframe/" target="_blank">Google Chrome Frame</a> or + <a href="http://code.google.com/p/explorercanvas/" target="_blank">ExCanvas from Google</a> + (which is included in the RGraph archive). Read more about Internet Explorer compatibility + <a href="msie.html">here</a>. + + <p /> + + <span style="color: #090"> + Starting from the developer preview 3, <b style="color: black">Microsoft Internet Explorer 9</b> has full support for + HTML5 canvas. + MSIE 6 and 7 are supported by way of Google Chrome Frame. + </span> + </p> + + <p> + <b>RGraph and older browsers</b><br /> + Older browsers (eg Chrome 1, Firefox 3, Safari 3, Opera 9.5) are supported, however if they don't support the canvas shadow or + text APIs, these will naturally be unavailable. Earlier versions of these browsers may work, but are untested. + </p> + + <p> + <b>Other devices</b><br /> + Other devices (eg mobile devices) may support or may be intending to support the HTML5 CANVAS tag as part of their HTML5 support. Typically + the newer a device or its OS the higher the likelyhood is that it has support for HTML5 canvas. + </p> + + <a name="performance"></a> + <br /> <br /> <br /> + <h2>Improving the performance of your charts</h2> + + <p> + Although performance is excellent, (eg compared to server based charts libraries), you may still want to tune + RGraph further. The biggest thing you can do is use HTTP compression, which reduces the initial download time of the libraries, + but there are a number of things you can do: + </p> + + <ul> + <li> + <b>Compression</b><br />HTTP compression can dramatically reduce your bandwidth bills and increase the speed + of your website. The RGraph.common.core.js file for example used to be over 100k, but with compression this was reduced + to around 17k. Less than a fifth of the original size! <span style="color: red">If you do only one thing to aid performance, + then it should be this.</span> + + <p> + To achieve this with Apache you have a few options: + </p> + + <ul style="list-style-type: disc"> + <li>You can use the Apache module mod_gzip which compresses the libraries on the fly.</li> + <li> + You can compress the libraries manually using the Unix gzip command, rename them to remove the .gz suffix + and add the header using an Apache directive + (eg <span style="background-color: #C5FFC5; padding: 1px">AddEncoding gzip .js</span>). If you have some sort of + release process/script, it would make sense to add this to it to automate the procedure. + </li> + </ul> + <p> + </li> + + <li> + <b>Minification</b><br /> + Minification reduces the size of the library before compression takes effect, removing unnecessary spaces and comments etc. + A combination of minification and compression will give superb results. For example, before being split up into seperate files, + minification combined with compression reduced the common library from over 100k to roughly 10k (!). There is a PHP shell + script that you can use to minify the libraries in the scripts directory. + + <p> + You can get pre-minified versions of the libraries <a href="http://www.rgraph.net/RGraph.minified.zip">here</a>. + </p> + </li> + + <p> + + <li> + <b>Pre-emptive caching</b><br /> + Slightly different to caching itself, is pre-emptive caching. This involves downloading the libraries before the page that requires + them is shown. This way, they're already in the users browser cache and the chart will subsequently appear to be much much + quicker. An example of this would be having the library included at the bottom of your index page of your website (optionally + with the <b>defer="defer"</b> attribute). The script can be downloaded at will because the page doesn't actually use it, but + for subsequent pages it will already be in the users browser cache. + + <p> + </li> + + <li> + <b>Caching</b><br /> + Since the libraries you're using won't change that often, you can set distant Expires: headers on them, or appropriate + Cache-Control: headers, and the client will not even have to contact your server for it. When you want to make sure + the library is re-downloaded (eg. you update the library), then simply change the filename. + + <p> + </li> + + <li> + <b>Script tag placement</b><br /> + According to <a href="http://developer.yahoo.com/performance/" target="_blank">Yahoo! guidelines</a> placing the <SCRIPT> + tag at the bottom of the page can increase the percieved load time. If you do this, then your charts should be + created in the window.onload event, otherwise the browser may try to create them without the library + having been loaded, and will therefore subsequently fail. + + <p> + + You should also consider the effect that this has when your page is rather weighty. If the page is weighty there + will be a small delay before the onload event fires, and therefore creates the chart. This might not be so bad if the + chart is not immediately visible, however if it is then you should carefully consider using the onload event. You + may wish to load the library in the page header, define the canvas tag and then immediately define the javascript + that creates the chart. This way + the chart will be created and shown, and then the rest of the page loads. The end result is that your chart + appears to be faster. + + <p /> + + Between the onload event, asychronous Javascript and careful tag placement, you will need to experiment to get the right result + for you. + </li> + + <li> + <b>Document structure</b><br /> + The structure of your document can have a significant impact on how fast your charts are displayed. If, for example, you use + tables for layout, this can delay the display of elements that are affected by the size of the table. Where possible, you + should consider trying to convert your layout to DIVs. An example of this is the front page of this website. The charts + were right aligned using a table as a container. This caused a visible delay when showing them. In this case it was a + simple matter to convert the page to use DIVs, and the page subsequently displays much faster. + <p /> + </li> + + <li> + <b>Creating your charts asynchronously</b><br /> + Where possible, you may wish to create your charts asynchronously. This allows the browser to continue rendering the page + immediately after getting to the code that creates the chart. This might not be perceptible if you don't have a lot of + charts, or your page is small. You can read a little more about this and see example code <a href="async.html">here</a>. + + <p /> + + Note that recent releases of Google Chrome (from a dev release of version 4) have had an issue with creating charts + asynchronously, which presents itself by not drawing text sometimes (it's not consistent). Simply not using + asynchronous chart production in this case resolves the issue. + </li> + + <li> + <b>DOMContentLoaded event</b><br /> + Using this event can speed up the display of your charts signifcantly compared to the more well known <i>onload</i> event. + It is supported by Chrome, Gecko based browsers (ie Firefox), Safari, Opera and Internet Explorer 9. This event fires when + the structure of the page is loaded, but not necessarily the images or CSS. This means that if your page is laden with + images, this event will fire before the onload event, thus creating your charts quicker. The effect can be very noticeable. + + <pre class="code"> +function addListener(func) +{ + if(window.addEventListener) { + window.addEventListener('DOMContentLoaded', func, false); + } else { + document.attachEvent("onDOMContentLoaded", func); + } +} +</pre> + 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>, + and the Microsoft site <a href="http://ie.microsoft.com/testdrive/HTML5/87DOMContent-Loaded/Default.html" target="_blank">here</a>. + There's an example <a href="domcontentloaded.html">here</a>. + <p /> + </li> + + <li> + <b>AJAX requests</b><br /> + 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 + shows ongoing information, instead of simply refreshing the entire page, you could use an AJAX request to just retrieve the + data that you want and update the chart that way. This reduces the amount of data needed to be transferred, thus reducing the + bandwidth used, and will be quicker than a full page refresh, particularly if your page is weighty. There's a simple AJAX + function that you can use <a href="#ajax">below</a>. + <p /> + </li> + + <li> + <b>Combining libraries</b><br /> + You may wish to consider combining the RGraph libraries into a single file. + 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. + If a typical response sends 500 bytes worth of headers, and you send four chart libraries, then combining the libraries + would save 1500 bytes. Multiple factors need to be considered though, including things like caching, which can circumvent + the unneccessary repeated downloading of the libraries. + + <p> + To make your life straight-forward, you may want to make this a part of your release script/process. This way you + can make changes to the scripts in your development environment as you would normally. + </p> + + <p> + Another effect of combining libraries is reducing the amount of HTTP connections needed to retrieve them. Most browsers + have a limit on how many connections they can create simultaneously, so if they're not being used to retrieve your + chart libraries, they can be used for something else. + </p> + </li> + + <li> + <b>Avoiding shadow blur with animations</b><br /> + If you're using animations then you may wish to avoid or reduce the shadow blur that you're using. With HTML5 canvas shadow + blur is a drain on performance - so if you're looking to get the most out of your charts or are using animations + which require redrawing the chart, turning off the shadow blur can reduce the time it takes to draw the charts leading to + smoother charts. + </li> + </ul> + + <b>A reasonable performance strategy</b> + + <p> + Although there's a lot you can do in regards to performance, a few of the points here will suffice for most + websites: + + <ul> + <li>Compression</li> + <li>Minification</li> + <li>Pre-emptive caching</li> + <li>Caching</li> + </ul> + + The number one thing you should do is compress your libraries. This has multiple benefits and provides by far the most gain, + effectively for free. Secondly, use the minified libraries. Since you can download them <a href="../RGraph.minified.zip">here</a>, + 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 + have a login page that is shown before any charts, this effectively eliminates the charts library download. And lastly caching + 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 + (or the duration of an average visit to your website) will produce results. + </p> + + <p> + <b>General website performance tools</b><br /><br /> + + If your aim is to improve your websites performance as a whole then you may be interested in these tools: + </p> + + <ul> + <li> + <a href="http://www.webpagetest.org/" target="_blank">http://www.webpagetest.org/</a><br /> + This site can provide a wealth of information about how to improve the permance of your website, specific to your site.<br /><br /> + </li> + + <li> + <a href="http://code.google.com/speed/page-speed/docs/using_chrome.html" target="_blank">Page Speed for Google Chrome</a><br /> + <a href="http://code.google.com/speed/page-speed/docs/using_firefox.html" target="_blank">Page Speed for Mozilla Firefox</a><br /> + <a href="http://pagespeed.googlelabs.com/" target="_blank">Page Speed online</a><br /> + The Page Speed plugins and the online tool also provide a great deal of information about how to speed up your website.<br /><br /> + </li> + + <li> + <a href="image2url.html">Convert images to <i>data:</i> URLs</a><br /> + A tool which converts images to <i>data:</i> URLs. Using <i>data:</i> URLs can reduce the number of HTTP requests used. + </li> + </ul> + + <a name="implementation"></a> + <br /> <br /> <br /> + <h2>Implementing RGraph</h2> + + <p> + 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 + <a href="http://www.mozilla.com" target="_blank">Firefox</a> along with <a href="http://www.getfirebug.com" target="_blank">Firebug</a> - its + Javascript error console will make debugging your issue much easier. Many problems are down to a library not having been included or + 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> + for Firefox. This allows you to easily disable caching, thus eliminating any problems that that causes. You could equally use + the Chrome developer tools (CTRL+SHIFT+J), optionally in docked mode, which also provides a good quality Javascript console. + </p> + + <ol> + <li> + Include the libraries (put this in your documents <HEAD>): +<pre class="code"> +<script src="RGraph.common.core.js"></script> + +<script src="RGraph.common.adjusting.js"></script> <!-- Just needed for adjusting --> +<script src="RGraph.common.annotate.js"></script> <!-- Just needed for annotating --> +<script src="RGraph.common.context.js"></script> <!-- Just needed for context menus --> +<script src="RGraph.common.effects.js"></script> <!-- Just needed for visual effects --> +<script src="RGraph.common.resizing.js"></script> <!-- Just needed for resizing --> +<script src="RGraph.common.tooltips.js"></script> <!-- Just needed for tooltips --> +<script src="RGraph.common.zoom.js"></script> <!-- Just needed for zoom --> + +<script src="RGraph.bar.js"></script> <!-- Just needed for bar charts --> +<script src="RGraph.bipolar.js"></script> <!-- Just needed for bi-polar charts --> +<script src="RGraph.fuel.js"></script> <!-- Just needed for fuel charts --> +<script src="RGraph.funnel.js"></script> <!-- Just needed for funnel charts --> +<script src="RGraph.gantt.js"></script> <!-- Just needed for gantt charts --> +<script src="RGraph.gauge.js"></script> <!-- Just needed for gauge charts --> +<script src="RGraph.hbar.js"></script> <!-- Just needed for horizontal bar charts --> +<script src="RGraph.hprogress.js"></script> <!-- Just needed for horizontal progress bars --> +<script src="RGraph.led.js"></script> <!-- Just needed for LED charts --> +<script src="RGraph.line.js"></script> <!-- Just needed for line charts --> +<script src="RGraph.meter.js"></script> <!-- Just needed for meter charts --> +<script src="RGraph.odo.js"></script> <!-- Just needed for odometers --> +<script src="RGraph.pie.js"></script> <!-- Just needed for pie AND donut charts --> +<script src="RGraph.radar.js"></script> <!-- Just needed for radar charts --> +<script src="RGraph.rose.js"></script> <!-- Just needed for rose charts --> +<script src="RGraph.rscatter.js"></script> <!-- Just needed for rscatter charts --> +<script src="RGraph.scatter.js"></script> <!-- Just needed for scatter charts --> +<script src="RGraph.thermometer.js"></script> <!-- Just needed for thermometer charts --> +<script src="RGraph.vprogress.js"></script> <!-- Just needed for vertical progress bars --> +<script src="RGraph.waterfall.js"></script> <!-- Just needed for waterfall charts --> +</pre> + </li> + + <li> + Add the canvas tag (put it where you want the chart to appear): +<pre class="code"> +<canvas id="myCanvas" width="600" height="250">[No canvas support]</canvas> +</pre> + </li> + + <li> + Create the chart (since it is using the onload event, you can put this anywhere): + +<pre class="code"> +<script> + window.onload = function () + { + var data = [280, 45, 133, 166, 84, 259, 266, 960, 219, 311, 67, 89]; + + var bar = new RGraph.Bar('myCanvas', data); + bar.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']); + bar.Set('chart.gutter.left', 35); + bar.Draw(); + } +</script> +</pre> + </li> + </ol> + + <p> + 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 + illustrate how you can get RGraph up and running. + </p> + + <a name="structure"></a> + <br /> <br /> <br /> + <h2>Suggested structure for RGraph</h2> + + <img src="../images/structure.png" width="175" height="205" alt="Suggested structure for RGraph" style="float: right" /> + + <p> + The suggested layout structure for the RGraph libraries is shown on the right. The <b>www.example.com</b> folder represents + the root/top level of your website with the <b>javascript</b> directory beneath that. The <b>css</b> and <b>images</b> + folders are shown for + illustrative purposes only. If you follow this layout then your URLs to the RGraph libraries would be: + </p> + + <p> + <b>http://www.example.com/javascript/rgraph/RGraph.common.core.js</b><br /> + <b>http://www.example.com/javascript/rgraph/RGraph.bar.js</b><br /> + etc + </p> + + <p> + By using this structure you make RGraph easy to update should you need to, and also keep all the RGraph libraries in + one, easy to find, place. + </p> + + <br clear="all" /> + + <a name="integration"></a> + <br /> <br /> <br /> + <h2>Integration with server side scripting</h2> + + <p> + 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 + (as in the example below) contain the data you want to be displayed. Eg: + </p> + + <pre class="code"> +<script src="RGraph.common.core.js"></script> +<script src="RGraph.line.js"></script> + +<canvas id="myCanvasTag" width="600" height="200">[No canvas support]</canvas> + +<script> + data = [78,16,26,23,25,51,34,64,84,84]; + + line = new RGraph.Line("myCanvasTag", data); + line.Set("chart.labels", ["Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov"]); + line.Draw(); +</script> +</pre> + + <p> + To get the above using PHP you could do this: + </p> + + <pre class="code"><?php + // This simply makes a string out of the array of data + $myData = join(',', array(78,16,26,23,25,51,34,64,84,84)); + + // This prints out the required HTML markup + print('<script src="RGraph.common.core.js"></script>' . "\n"); + print('<script src="RGraph.line.js"></script>' . "\n\n"); + print('<canvas id="myCanvasTag" width="600" height="200">[No canvas support]</canvas>' . "\n\n"); + print('<script>' . "\n"); + print(' var data = [' . $myData . '];' . "\n\n"); + print(' var line = new RGraph.Line("myCanvasTag", data);' . "\n"); + print(' line.Set("chart.labels", ["Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov"]);' . "\n"); + print(' line.Draw();' . "\n"); + print('</script>'); +?> +</pre> + + <p> + Strictly speaking the <span style="font-family: Monospace">var</span> isn't necessary, however if you put the code inside a + function (like window.onload), it's probably best to do so as using <span style="font-family: Monospace">var</span> will + make the variable local, and not global. So doing so will help prevent naming clashes. + </p> + + + <a name="mysql"></a> + <br /> <br /> <br /> + <h4>Integration with PHP & MySQL</h4> + + <p> + This is a simple matter of formatting what you get back from MySQL into a string, as the MySQL dump and PHP code + below shows (it's based on a database called RGraph_example): + </p> + + <pre class="code"> +# +# Table structure for table `daily_statistics` +# + +CREATE TABLE `daily_statistics` ( + `st_day` char(9) NOT NULL, + `st_statistics` tinyint(4) NOT NULL, + UNIQUE KEY `st_day` (`st_day`) +) ENGINE=MyISAM DEFAULT CHARSET=latin1; + +# +# Dumping data for table `daily_statistics` +# + +INSERT INTO `daily_statistics` VALUES ('Mon', 124); +INSERT INTO `daily_statistics` VALUES ('Tue', 95); +INSERT INTO `daily_statistics` VALUES ('Wed', 64); +INSERT INTO `daily_statistics` VALUES ('Thu', 94); +INSERT INTO `daily_statistics` VALUES ('Fri', 75); +INSERT INTO `daily_statistics` VALUES ('Sat', 98); +INSERT INTO `daily_statistics` VALUES ('Sun', 84); +</pre> + + <pre class="code"> +<?php + /** + * Change these to your own credentials + */ + $hostname = "localhost"; + $username = "root"; + $password = "PASSWORD"; + $database = "RGraph_example"; + + $connection = mysql_connect($hostname, $username, $password) OR die('Could not connect to MySQL: ' . mysql_error()); + mysql_select_db($database); + + $result = mysql_query("SELECT st_day, st_statistics FROM daily_statistics"); + if ($result) { + + $labels = array(); + $data = array(); + + while ($row = mysql_fetch_assoc($result)) { + $labels[] = $row["st_day"]; + $data[] = $row["st_statistics"]; + } + + // Now you can aggregate all the data into one string + $data_string = "[" . join(", ", $data) . "]"; + $labels_string = "['" . join("', '", $labels) . "']"; + } else { + print('MySQL query failed with error: ' . mysql_error()); + } +?> +<html> +<head> + + <!-- Don't forget to update these paths --> + + <script src="libraries/RGraph.common.core.js" ></script> + <script src="libraries/RGraph.line.js" ></script> + +</head> +<body> + + <canvas id="cvs" width="600" height="250">[No canvas support]</canvas> + <script> + chart = new RGraph.Line('cvs', <?php print($data_string) ?>); + chart.Set('chart.background.grid.autofit', true); + chart.Set('chart.gutter.left', 35); + chart.Set('chart.gutter.right', 5); + chart.Set('chart.hmargin', 10); + chart.Set('chart.tickmarks', 'endcircle'); + chart.Set('chart.labels', <?php print($labels_string) ?>); + chart.Draw(); + </script> + +</body> +</html> +</pre> + + <p> + This PHP code provides the data in two strings - <i>$labels_string</i> and <i>$data_string</i>. These variables are then used + in the RGraph code to provide the data and the labels. + </p> + + <p><b>Remember:</b></p> + + <ul> + <li>Change the database hostname/username/password/database to match your own.</li> + <li>Ensure you have the correct paths to the RGraph libraries.</li> + </ul> + + <a name="ajax"></a> + <br /> <br /> <br /> + <h4>Making AJAX requests</h4> + + <p style="background-color: #ffa; padding: 3px; border: 1px dashed black"> + <b>Note:</b> + It is important that you're careful with types when making AJAX requests. Since the response is initially a string, + and your AJAX function/library may not do conversions for you, you may need to convert these strings to numbers. To + do this you can use the <i>Number()</i> or <i>parseInt()</i> functions. For example: + </p> + + <pre class="code"> +<script> + num = Number('23'); + num = parseInt('43'); +</script> +</pre> + + <p> + Here is a simple function that you could use to get data from your server using AJAX: + </p> + + <pre class="code"> +<script> + /** + * Makes an AJAX call. It calls the given callback (a function) when ready + * + * @param string url The URL to retrieve + * @param function callback A function object that is called when the response is ready, there's an example below + * called "myCallback". + */ + function AjaxCall (url, callback) + { + // Mozilla, Safari, ... + if (window.XMLHttpRequest) { + var httpRequest = new XMLHttpRequest(); + + // MSIE + } else if (window.ActiveXObject) { + var httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); + } + + httpRequest.onreadystatechange = callback; + + httpRequest.open('GET', url, true); + httpRequest.send(); + } + + + /** + * This sample callback function is called when the data is ready (readyState=4) + */ + function myCallback () + { + if (this.readyState == 4 && this.status == 200) { + // Everything is good, the response is received + alert(this.responseText); + } + } +</script> +</pre> + + <p>And you would use it like this:</p> + + <pre class="code"> +<script> + AjaxCall('http://www.example.com/getSomething.php', myCallback); +</script> +</pre> + + <p> + There's an example <a href="dynamic.html">here</a> that shows updating your chart dynamically. + </p> + + + <a name="support"></a> + <br /> <br /> <br /> + <h2>Support</h2> + + <p> + If you have a support issue you can send it to the support email address: + <a href="mailto:support@rgraph.net"><b>support@rgraph.net</b></a>. You can also follow + <a href="http://www.twitter.com/_rgraph" target="_blank">@_rgraph on twitter</a> to get notifications of new releases and + notable updates. + </p> + + <br /> + <br /> + +</body> +</html>
\ No newline at end of file |