About
RGraph is a JavaScript charts library based on HTML5 SVG and canvas. RGraph is mature (over 15 years old) and has a wealth of features making it an ideal choice to show charts on your website.

More »

 

License
RGraph can be used for free under the GPL or if that doesn't suit your situation there's an inexpensive (£99) commercial license available.

More »

 

Download
Get the latest version of RGraph (version 6.17) from the download page. There's also older versions available, minified files and links to cdnjs.com hosted libraries.

More »

About RGraph

About the RGraph software

RGraph is a javascript charts and graphs library for 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 html5 canvas and svg, RGraph has a wide appeal and can represent many types of data quickly and efficiently.

RGraph is free to use, being available under the GPLv2 license.

RGraph is suitable for all websites with charts being rendered using javascript, svg and canvas. The size of the javascript files and 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 javascript charts library can offer tangible benefits for your website and your bottom line!

About the author

You can read about me on this page.

About the SVG and canvas tags

canvas and svg are new html tags which are part of the html5 standard. canvas allows bitmap drawing that is controlled using javascript (ie you draw on the canvas using javascript) and is what the RGraph canvas libraries use to draw the charts.

You could liken it to a piece of paper that is part of your page, onto which you can draw. Because you use javascript to 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.

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 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 MSIE (starting from version 9).

The 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 html document.

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 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

<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

<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 Javascript charts

What makes the canvas and 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 javascript so the output from other javascript code can be used with ease.

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.

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 the canvas it can make a noticeable performance improvement - particularly in canvas effects and animations.

Contributions

Thanks go to:

Contact information and support

Got a technical question?
You can get help with RGraph problems by asking in the RGraph forum.

RGraph on Facebook
You can connect with me on Facebook by going to the RGraph Facebook profile.

RGraph on Twitter
You can connect with me on Twitter by going to he RGraph Twitter profile. Posts on Twitter sometimes point to larger articles on the Facebook page or the RGraph blog.

RGraph on Wikipedia
RGraph has a Wikipedia page! You can read about RGraph and its history on Wikipedia as well as on this page.