RGraph is a HTML5 canvas based graphing 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, gantt chart, 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. Ergo, 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 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 as your website.
| Bar chart | [examples] | [documentation] | [source] |
· Custom context menus · Keys · Tooltips · Grouped bars · Stacked bars · Bar with summary line · Center bar (X axis at the center) · Drop shadows |
| Bi-polar chart | [examples] | [documentation] | [source] |
|
· Otherwise known as an age pyramid · Custom context menus · 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. · Custom context menus |
|||
| Gantt chart | [examples] | [documentation] | [source] |
|
· A standard Gantt chart, used in project management and scheduling. · Custom context menus · Optional task completion indicator |
|||
| Line chart | [examples] | [documentation] | [source] |
|
· Custom context menus · Keys · Stepped · Tooltips · Drop shadows · Filled · Multiple lines · Filled multiple lines · X axis in the center · Various tick mark styles · Variable grid background sizing · Specifiable maximum Y value |
|||
| Odometer | [examples] | [documentation] | [source] |
|
· Like a speedo in a car · Custom context menus · Can be used to show measurement of something. |
|||
| Pie chart | [examples] | [documentation] | [source] |
|
· A standard pie chart · Custom context menus · Shadow effect · Segment separation |
|||
| Progress bar | [examples] | [documentation] | [source] |
|
· A progress bar - use to show a measurement (for example) · Custom context menus · Can be horizontal or vertical |
|||
| Pseudo radar chart | [examples] | [documentation] | [source] |
|
· Sometimes better for showing magnitude
· Custom context menus |
|||
| Scatter graph | [examples] | [documentation] | [source] |
|
· A normal scatter chart · Custom context menus · Various styles of tick marks |
|||
| Traditional radar chart | [examples] | [documentation] | [source] |
|
· A radar chart in the traditional style · Custom context menus · Optional circle to indicate a limit or target · Optional key |
|||
| Available CSS classes | |||
| This page details the CSS classes that are available to allow you to customise tooltip and context menu appearance. | |||
| About canvas color definitions | |||
| This page shows you how you can define colors (and gradients), using a variety of methods. | |||
| About context menus | |||
| This page gives you information about context menus and how to implement them. | |||
| The RGraph showcase page | |||
| 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, and it's just a matter of time before MSIE has support.
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 do is minification, which reduces the initial download time of the libraries, but there are a number of things you can do:
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 being included in the wrong order.
<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.gantt.js"></script> <!-- Just needed for gantt 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">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.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.common.js"></script>
<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>
<canvas id="myCanvasTag" width="600" height="200">[No canvas support]</canvas>
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=\"/path/to/RGraph.common.js\"></script>\n";
echo "<script type=\"text/javascript\" src=\"/path/to/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.Set('labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);\n";
echo " line.Draw();\n";
echo " }\n";
echo "// -->\n";
echo "</script>\n\n";
echo '<canvas id="myCanvasTag" width="600" height="200">[No canvas support]</canvas>';
?>
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.
The latest download is below. You can find all the archives, both stable and development here.
RGraph_2009-01-04-beta.tar.gz
|
|
| 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 1.0. 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