|
RGraph: A canvas graph library based on the HTML5 canvas tagInteractive javascript canvas graphs using the HTML5 canvas tag for all platforms |
|
First release coming soon!
Download the beta version
|
||
|
|
This library uses HTML5 features which are only implemented in recent browsers. As such you will need to be using one of these latest browsers: Firefox 3.5, Chrome 2 or Safari 4.
RGraph is a HTML5 canvas graph library. It uses features that became available in HTML5 (specifically, the CANVAS tag) to produce a wide variety of graph types: bar chart, bi-polar chart (also known as an age frequency chart), donut chart, funnel chart, gantt chart, horizontal bar chart, LED display, line graph, odometer, pie chart, progress bar, pseudo radar chart, scatter graph and traditional radar chart. RGraph is covered by the RGraph License.
HTML5 introduces a new HTML element - the CANVAS tag. This tag allows for two dimensional drawing easily using Javascript. This makes it perfect for producing graphs. Because Javascript runs on your users computer, none of the stress on your server normally associated with producing graphs (as is currently the norm) is incurred. Not only that but because of the greater processing power that is typically available on users' computers, they will appear to be much, 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, (ie it can save you money...).
Imagine, you are creating 100,000 graphs a day and the data is such that the resulting graphs cannot be cached. With the RGraph library you can reduce that figure to zero. All the processing and graph creation is done by each individual client, much like rendering the HTML you send to them. So you don't have to send any images, you simply send the Javascript libraries once. So, much lower bandwidth bills and far less strain on your webserver.
And if that wasn't enough, because the graphs 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 graph(s) as your website.
Since the graphs are produced using HTML5 features (the new canvas tag), client support is currently limited to:
The HTML5 canvas tag is part of the HTML5 specification, and all of the above browsers support it, and it's just a matter of time before MSIE has support.
Older browsers
If you wish, you can use the 28th February version, which doesn't
use the canvas text API, and as such works on a wider range of browsers (eg Mozilla Firefox 3, Google Chrome 1, Apple
Safari 3.1, and Opera 9).
Canvas & Internet Explorer (MSIE)
Microsoft Internet Explorer doesn't yet have support for the HTML5 canvas tag. Future versions will presumably
support it. Still, you can use this software for showing graphs to your users on internal websites
and intranets, where you can control the browser or at least stipulate it.
Although performance is excellent, (traditionally your webserver has been producing all of your graphs, and now the client produces them, and typically only a few at a time), you may still want to tune RGraph further. The biggest thing you can do is compression, which reduces the initial download time of the libraries, but there are a number of things you can do:
You can get pre-minified versions of the libraries here (right click, Save As...):
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 graph. This is not so bad if the graph is not immediately visible, however if it is then you should carefully consider using the onload event. You may wish to define the canvas tag and then immediately define the javascript that creates the graph. This way the graph will be created and shown, and then the rest of the page loads. The end result is that your graph appears to be much faster.
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 Firefox along with Firebug - it 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.
<script type="text/javascript" src="RGraph.common.js"></script>
<script type="text/javascript" src="RGraph.bar.js"></script> <!-- Just needed for bar graphs --> <script type="text/javascript" src="RGraph.bipolar.js"></script> <!-- Just needed for bi-polar graphs --> <script type="text/javascript" src="RGraph.donut.js"></script> <!-- Just needed for donut charts --> <script type="text/javascript" src="RGraph.funnel.js"></script> <!-- Just needed for funnel charts --> <script type="text/javascript" src="RGraph.gantt.js"></script> <!-- Just needed for gantt charts --> <script type="text/javascript" src="RGraph.hbar.js"></script> <!-- Just needed for horizontal bar charts --> <script type="text/javascript" src="RGraph.led.js"></script> <!-- Just needed for LED charts --> <script type="text/javascript" src="RGraph.line.js"></script> <!-- Just needed for line graphs --> <script type="text/javascript" src="RGraph.odo.js"></script> <!-- Just needed for odometers --> <script type="text/javascript" src="RGraph.pie.js"></script> <!-- Just needed for pie charts AND donut charts --> <script type="text/javascript" src="RGraph.progress.js"></script> <!-- Just needed for progress bars --> <script type="text/javascript" src="RGraph.radar.js"></script> <!-- Just needed for radar charts --> <script type="text/javascript" src="RGraph.scatter.js"></script> <!-- Just needed for scatter graphs --> <script type="text/javascript" src="RGraph.tradar.js"></script> <!-- Just needed for traditional radar charts -->
<canvas id="myCanvas" width="600" height="250">[No canvas support]</canvas>
<script type="text/javascript">
window.onload = function ()
{
data = [280, 45, 133, 166, 84, 259, 266, 960, 219, 311, 67, 89];
bar = new Bar('myCanvas', data);
bar.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
bar.Set('chart.gutter', 35);
bar.Draw();
}
</script>
There's also a very basic example of using RGraph, that does very little. It can be helpful to illustrate how you can get RGraph up and running.
The suggested layout structure for the RGraph libraries is shown on the right. The www.example.com folder represents the root/top level of your website with the javascript directory beneath that. The css and images folders are shown for illustrative purposes only. If you follow this layout then your URLs to the RGraph libraries would be:
/javascript/rgraph/RGraph.common.js
/javascript/rgraph/RGraph.bar.js
etc
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.
This a very easy process, as easy as sending content to the browser. All you need to do is make the data variable contain the data you want to be displayed. Eg:
<script type="text/javascript" src="RGraph.common.js"></script>
<script type="text/javascript" src="RGraph.line.js"></script>
<canvas id="myCanvasTag" width="600" height="200">[No canvas support]</canvas>
<script type="text/javascript">
data = [78,16,26,23,25,51,34,64,84,84];
line = new Line("myCanvasTag", data);
line.Set("chart.labels", ["Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov"]);
line.Draw();
</script>
To get the above using PHP you could do this:
<?php
$myData = implode(',', array(78,16,26,23,25,51,34,64,84,84));
print('<script type="text/javascript" src="RGraph.common.js"></script>' . "\n");
print('<script type="text/javascript" src="RGraph.line.js"></script>' . "\n\n");
print('<canvas id="myCanvasTag" width="600" height="200">[No canvas support]</canvas>' . "\n\n");
print('<script type="text/javascript">' . "\n");
print(' data = [' . $myData . '];' . "\n");
print(' line = new 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>');
?>
Strictly speaking the var isn't necessary, however if you put the code inside a function (like window.onload), it's probably best to as using var will make the variable local, and not global. So doing so will help prevent naming clashes.
|
| Subscribe to RGraph support |
| Visit this group |
Support is available via a Google Groups forum. If you think that the issue you have is common, try the issues page first, and then try searching the forum in case your question has been answered previously. If that all yields nothing, post a question to the forum.
RGraph is covered by the RGraph license. A summary is that for normal use there is a small one-time licensing fee to pay. For charity and educational use there is a reduced license fee available. Please email me if you're interested in this. There's some licensing FAQs that should help to answer any questions you might have. If you need one, you can get an invoice here.
If you have any questions about RGraph licensing, you can send your question to: richard@rgraph.net. If your question is of a support nature though, please use the support forum.
Icons from: http://dryicons.com