About RGraph and Richard Heyes (the author)
- About the RGraph software
- About the SVG and canvas tags
- History of the tags
- About HTML5 charts
- About canvas text
- About the author
- Contact information
About the RGraph software
RGraph is totally free to use, being available under the MIT license. You don't even have send me a Christmas card (it would be nice though...)! Any donations are appreciated - (you can find more on the donations page).
About the SVG and canvas tags
The <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 canvas. 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 <svg> and <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 based interface that uses <canvas> for certain elements and SVG for others may be preferable.
History of the tags
The 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 version 9).
The SVG tag is is a bit like canvas but instead of being a bitmap drawing surface it's vector based and has a structure more like a HTML document.
SVG is XML based, an open standard and has been in development by the W3C since 1999. All modern browsers have some degree of support for SVG. It's currently at version 1.1 with version 2 on its way which will use CSS integration more.
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 read 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 canvas version but the difference comes in how the two are created. As you can see the SVG code required is far smaller even in this small example.
About HTML5 charts
Modern browsers that support HTML5 also support canvas and SVG, including Internet Explorer 9 and upwards (with version 9 you may need to use the HTML5 doctype, but not from version 10).
About canvas text
The 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 relevant text. Its 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 rendered on to the canvas it can make a noticable improvement in performance - particularly in canvas based effects and animations.
About Richard Heyes (the author)
Formerly an avid snow-boarder and extreme sports enthusiast I've been in the technology sector in the United Kingdom for over 22 years, and in the web development sector specifically for 18 of those.
Starting in a telephone technical support role for consumer desktops (both x86 hardware and software support - Windows and Windows software) for a well known UK high street brand I then moved into a firm doing dedicated desktop support.
In this role there was elements of telephone support but mainly it involved visiting peoples desks and either installing new bits of software or resolving faults for people.
This gave me a good grounding in IT and was a great start to then move into the emerging field of computer programming for websites.
So from there I was able to start web based programming, using the new(ish) PHP, and go onwards and upwards.
I worked for various firms in the south of England near London, including one of largest film rental firms (at that time) in the country and an investment tracking and reporting firm that was headed by a well known public figure.
Throughout this period I was able to work on various pieces of Open Source software which were distributed via my phpguru.org website.
The technical expertise that has resulted from working on these high traffic websites and Open Source projects lends itself well to producing high quality software with great performance and which is easily usable.
Unfortunately all of this came to an abrupt halt some years ago when I suffered 5 pretty bad strokes which left me with significantly reduced vision, mobility and coordination. I spent roughly six months in hospital learning to walk, talk and eat (!) again (and, much to the nurses chagrin, smoke...).
And then after leaving hospital the next four-five years were spent going to the gym and improving my health (and general awareness).
It was during this time, in 2008, that I started writing RGraph. Initially it was a canvas only, commercial charting library. But it improved over time and it grew (in terms of types of charts that it supported along with the features that it had).
Now it supports well over 50 charts and chart variations across both canvas and SVG and is 100% free as it is now licensed under the Open Source MIT license.
Going forward increased support for SVG charts is planned along with increased features for the SVG charts.
Thanks go to:
- Brian Tozer for lots and lots of SEO help
- Claus Tøndering 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 ingraph labels.
- Zsolt for some updates to the Line chart documentation and HBar updates.
- Amjad Moghul for the documentation layout style.
- Jan Dirk for various bug reports.
Contact information and support
If you have a support question you can send a message to the RGraph support team using the support forum.
RGraph on Twitter
You can connect with RGraph on Twitter by going to the RGraph Twitter profile. Posts on Twitter sometimes point to larger articles on (for example) the Facebook page or the RGraph blog.