- About the RGraph software
- About the author
- About the SVG and canvas tags
- History of the tags
- About HTML5 charts
- About canvas text
- Contact information and support
About the RGraph software
RGraph is a modern
library for modern websites. It was first created in late 2008 and aims to be the best Open Source
charting library you can get your hands on. With the number
of different types of charts
having grown to 50-60, using both
has a wide appeal and can represent many types of data quickly and efficiently.
RGraph is 100% unrestricted to use, being available under the MIT license. You don't even have to send me a Christmas card! Though donations are appreciated - (you can find out more on the donations page).
RGraph is suitable for all websites with charts being rendered using
canvas. The size of the
the code to make a chart is small and can be further reduced with
minification and compression. Therefore, it offers significant speed boosts to websites.
With Google putting an ever-increasing emphasis on page speed and responsiveness, using a
benefits for your website and your bottom line!
About the author
About the SVG and canvas tags
svg are new
HTML tags which are part of the
canvas allows bitmap
drawing that is controlled using
libraries use to draw the charts.
liken it to a piece of paper that is part of your page, onto which you can draw. Because you use
draw on the
canvas it becomes part of your page and allows interaction very easily.
svg , on the other hand, has a
DOM just like the
HTML document and each
element (lines, circles rectangles etc) can be referenced directly like
HTML elements can in your document.
canvas tag uses a "fire and forget" drawing methodology - there is no
DOM that's maintained, so if you want to alter something
you'll probably (but not necessarily) have to redraw the entire
The lack of a
DOM means that
canvas is fast to draw on and very
responsive - important when you're providing interactive or animated charts to your users.
svg uses a drawing methodology that is similar to your
HTML page -
where each element is an object in a
DOM that can be referenced.
When you update the properties of these objects the scene is converted to a bitmap and displayed automatically for you.
Other uses for the
canvas include providing a control panel to your
users and using it to create games. You should note though that when it
comes to accessibility then a more traditional
HTML interface that
canvas for certain elements and
svg for others may be
History of the tags
canvas tag was originally introduced by Apple in 2004 for use in
Mac OS X WebKit to power dashboard applications and their Safari web browser.
Since then it has been adopted by Mozilla and Opera and now the W3C has
adopted it in the upcoming
HTML5 specification. It's now supported by all
modern web browsers including modern versions of MSIE (starting from
svg tag is a bit like
canvas but instead of being a bitmap drawing
surface it's vector-based and has a structure more like an
svg is based on
XML, an open standard and has been in development by the W3C
since 1999. All modern browsers have some degree of support for
currently at version 1.1 with version 2 on its way which will use
Here's an example of both tags:
<canvas width="200" height="120" id="cvs" style="border: 1px solid gray"></canvas> <script> // Get hold of references to the canvas tag and the 2D drawing context canvas = document.getElementById('cvs'); context = canvas.getContext('2d'); // Draw the red square context.beginPath(); context.rect(10,10,50,50); context.fillStyle = 'red'; context.fill(); // Draw the blue circle context.beginPath(); context.arc(130,60,50,0, 2 * Math.PI * 2, false); context.fillStyle = 'blue'; context.fill(); </script>
<svg width="200" height="120" version="1.1"> <!-- The red rectangle --> <rect x="10" y="10" width="50" height="50" fill="red"></rect> <-- The blue circle --> <circle cx="130" cy="60" r="50" fill="blue"></circle> </svg>
The output of the
svg example is more or less the same as the
but the difference comes in how the two are created. As you can see the
code required is far smaller even in this small example.
About HTML5 charts
What makes the
svg tags good for producing charts is the
ability to interact seamlessly with both the user and the rest of the page.
The charts that RGraph produces are all made from
Modern browsers that support
HTML5 also support
Internet Explorer 9 and upwards (with version 9 you may need to use the
HTML5 doctype, but not from version 10).
About canvas text
canvas tag, despite being very versatile, does not render text very well.
As far as the quality is concerned it gets worse at higher zoom levels. It's
also not "real" text - so you can't select it or copy it to your clipboard
and paste it elsewhere.
So for this reason RGraph has an accessible text option. What this does
is wrap the
canvas in a
div tag and use a combination of relative and
absolute positioning to position
span tags over the
canvas that contain the
It's not perfect for every situation and there's a list (that's not comprehensive) of caveats on that page.
It does make text look much better though, and as less is being drawn onto
canvas it can make a noticeable performance improvement -
canvas effects and animations.
Thanks go to:
- Erwan Al for the nudge to create the
- Joachim Schmidt for suggesting the Line chart
- Mike Robinson for a fix to the
- Brian Tozer for lots and lots of
- Claus Tondering for catching a bug in the event system.
- Graeme Elsworthy for some updates and documentation to the Gauge chart labels.
- Anthony Kuma for some updates to the Line chart
- Zsolt for some updates to the Line chart documentation and Horizontal Bar chart updates.
- Amjad Moghul for the documentation layout style.
- Jan Dirk for various bug reports.
Contact information and support
RGraph on Wikipedia
RGraph has a Wikipedia page! You can read about RGraph and its history on Wikipedia as well as on this page.