RGraph - The HTML5 graphing library
RGraph - The HTML5 graphing library
RGraph is a HTML5 graphing library. It uses features that became available in HTML5 (specifically, the CANVAS tag) to produce a wide variety of graph types. RGraph is covered by the PHPGuru 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. Ergo, much lower bandwidth bills and far less strain on your webserver.
| Bar chart | [examples] | [documentation] | [source] |
· Tooltips · Grouped bars · Stacked bars · Bar with summary line · Centre bar (X axis at the centre) · Shadow effect |
| Bi-polar chart | [examples] | [documentation] | [source] |
|
· Otherwise known as an age pyramid · Useful for comparing one set of data against a similar set (eg Two years of figures). |
|||
| Donut chart | [examples] | [documentation] | [source] |
| · Same as a pie chart, but with a big hole in the middle. | |||
| Gantt chart | [examples] | [documentation] | [source] |
| · A standard Gantt chart, used in project management and scheduling. · Optional task completion indicator | |||
| Line chart | [examples] | [documentation] | [source] |
|
· Stepped · Tooltips · Drop shadows · Filled · Multiple lines · Filled multiple lines · X axis in the centre · Various tick mark styles · Variable grid background sizing · Specifiable maximum Y value |
|||
| Odometer | [examples] | [documentation] | [source] |
|
· Like a speedo in a car · Can be used to show measurement of something. |
|||
| Pie chart | [examples] | [documentation] | [source] |
|
· A standard pie chart · Shadow effect · Segment separation |
|||
| Progress bar | [examples] | [documentation] | [source] |
|
· A progress bar - use to show a measurement (for example) · Can be horizontal or vertical |
|||
| Pseudo radar chart | [examples] | [documentation] | [source] |
| · Sometimes better for showing magnitude | |||
| Scatter graph | [examples] | [documentation] | [source] |
|
· A normal scatter chart · Various styles of tick marks |
|||
| Some rotating text | [example] | [source] | |
| The RGraph test page | [link] | ||
| This is a page that demonstrates all of the graph types available. Because it produces a lot of example graphs, it can be slow. | |||
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 draft, and all of the above browsers support it. So it's just a matter of time before MSIE has support. As I understand it MSIE8 doesn't support the tag, so it will probably be the next version that does. If you want to, you can use browsershots.org to see which browsers support the tag.
Performance is excellent. Think: traditionally your webserver has been producing thousands of graphs, and now the client produces them, and typically only a few at a time. So all the power that desktops have can be devoted to producing these graphs. Download time is minimal. If you want to increase performance even further you can:
Implementation is very easy and consists of three steps.
<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.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 --> <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 -->
<canvas id="myCanvas" width="600" height="250">This is the fallback HTML...</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('labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
bar.Set('gutter', 35);
//bar.Set('yMax', 1000); // If not specified, it is estimated
bar.Draw();
}
// -->
</script>
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.line.js"></script>
<script type="text/javascript">
<!--
window.onload = function ()
{
var data = [45,78,16,26,23,25,51,34,64,84,84];
var line = new Line("myCanvasTag", data);
line.Draw();
}
// -->
</script>
For example, to get the above using PHP you could do this:
<?php
$myData = implode(',', array(45,78,16,26,23,25,51,34,64,84,84));
echo "<script type=\"text/javascript\" src=\"RGraph.line.js\"></script>\n\n";
echo "<script type=\"text/javascript\">\n";
echo "<!--\n";
echo " window.onload = function ()\n";
echo " {\n";
echo " var data = [{$myData}];\n";
echo " var line = new Line('myCanvasTag', data);\n";
echo " line.Draw();\n";
echo " }\n";
echo "// -->\n";
echo "</script>\n";
?>
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.
Yes. If you're not concerned with Internet Explorer users, then you shouldn't have any problems. Internet Explorer doesn't support the canvas tag yet, and so it can't really be used if that's a concern.
The latest download is below. You can find all the archives, both stable and development here.
RGraph_2008-11-17-beta.tar.gz
|
RGraph is covered by the PHPGuru license 2008. A summary is that for any kind of commercial purpose, there is a small, one-time licensing fee to pay. For non-commercial purposes, it's free to use.
Icons from: http://dryicons.com