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 »

Frequently asked questions

Still need help?

If these faqs and the documentation (canvas and SVG) don't have the answer that you're looking for then feel free to post a message in the support forum to get help.

 


 

About the RGraph software

Is RGraph Open source?

[Link]
Yes - RGraph is Open Source software that uses the GPL license. This license means that you can use the software as much as or as little as you choose. If the Open Source license doesn't suit you there's an inexpensive commercial license available. See the license page if you wish to learn more.

Is RGraph free to use?

[Link]
Yes. The GPL license is a well known Open Source license that allows you to use the software for any purpose you choose.

What's the best chart library?

[Link]
With so many charting libraries available this is not a straightforward question. But due to the ease of use, the wide range of possible charts, breadth of features and Open Source licensing RGraph is a great choice for the majority of websites. So by using it you're certainly going to have an easy time when it comes to adding charts to your web pages.

Is RGraph being developed and maintained?

[Link]
Yes. Ever since it was started back in 2008 RGraph has undergone monthly or bi-monthly releases. This has slowed a little now that the software has matured but you'll still see an average of one release every few months.

Can I include RGraph in my application?

[Link]
Yes. The Open nature of the GPL license (which RGraph is released under) means that you're free to do most things that you please with the code and that includes distributing it with your application.

What chart types does RGraph support?

[Link]
RGraph supports a large variety of charts across both canvas and svg. More charts can be created using these basic types as well - for example, the svg Bar chart and svg Horizontal Bar chart can be used to make progress bars (there are no dedicated svg Horizontal Progress bar or Vertical Progress bars.).
canvas
  • Activity meter
  • Bar chart
  • Bipolar chart
  • Donut chart
  • Funnel chart
  • Gantt chart
  • Gauge chart
  • Horizontal Bar chart
  • Horizontal Progress chart
  • Horseshoe meter
  • Line chart
  • Meter chart
  • Odometer chart
  • Pie chart
  • Radar chart
  • Radial Scatter chart
  • Rose chart
  • Scatter chart
  • Segmented Donut chart
  • Semi-circular Progress bar
  • Thermometer chart
  • Vertical Progress bar
  • Waterfall chart
SVG
  • Activity meter
  • Bar chart
  • Bipolar chart
  • Funnel chart
  • Gauge chart
  • Horizontal Bar chart
  • Horseshoe Meter
  • Line chart
  • Pie chart
  • Radar chart
  • Rose chart
  • Scatter chart
  • Segmented Donut chart
  • Semi-circular Progress bar
  • Waterfall chart

Fetching data with the import tools

Can I use AJAX to create my charts?

[Link]
Yes you can. RGraph has multiple ways to make use of ajax when creating your charts. There's the basic (canvas) ajax api functions:
  • RGraph.AJAX(url, callback)
  • RGraph.AJAX.post(url, data, callback)
  • RGraph.AJAX.getNumber(url, callback)
  • RGraph.AJAX.getString(url, callback)
  • RGraph.AJAX.getJSON(url, callback)
  • RGraph.AJAX.getCSV(url, callback, separator)
These AJAX functions are documented here and this page will help you to make use of them. The svg functions are very similar to the canvas functions (though instead of residing in the RGraph.svg.common.core.js file the svg ajax functions are kept in their own file called RGraph.svg.common.ajax.js). The svg functions are:
  • RGraph.SVG.AJAX(url, callback)
  • RGraph.SVG.AJAX.post(url, data, callback)
  • RGraph.SVG.AJAX.getNumber(url, callback)
  • RGraph.SVG.AJAX.getString(url, callback)
  • RGraph.SVG.AJAX.getJSON(url, callback)
  • RGraph.SVG.AJAX.getCSV(url, callback [, field-separator [, line-separator]])
You can read more about the SVG AJAX functions here.

Can I import data from Google Sheets?

[Link]
Yes you can. RGraph has a dedicated import utility that you can use to fetch data from your Google Sheets spreadsheet(s). It can cope with either single or multiple sheets and provides the data in an easy-to-use format. It works standalone without any other RGraph libraries so if you want to use it in your own, non-RGraph, projects you can. You can read more about the utility by reading the Importing data from Google Sheets documentation.

Can I import data from CSV files?

[Link]
Yes you can. There's a dedicated csv import utility included with RGraph written in javascript. It uses ajax to fetch the csv file from your server, parses it and then you can use an easy api to get to the data. Like the Google Sheets importer, it works standalone without any other RGraph libraries so you can use it in your other, non-RGraph, projects if you want to. If your csv data is embedded in the page (instead of being in a file on your server) in a hidden div it can make use of this data too. You can read more about the utility by reading the Importing data from a CSV file documentation.

Can I import data from HTML tables?

[Link]
Yes you can. From October 2021 there's a dedicated html table import utility included with RGraph written in javascript. It uses the dom to get the data out of the page, parses it and then you can use an easy api to get to the data. Like the Google Sheets importer it works standalone without any other RGraph libraries so you can use it in your other, non-RGraph, projects if you want to. You can read more about the utility by reading the A utility to import data from an HTML table documentation.

Can I use data that's generated by my server (eg a database)?

[Link]
Yes you can - just like anything else that's generated by the server and you would like to see on your page. There's a large page that details how you can incorporate server-generated data into RGraph (eg database generated data) and you can see that here: Integration with server-side scripting This page has examples for all three styles of database access with php, shows you how you can save the chart as an image on the server and also links to the PhantomJS project which you can use to render charts without a browser.

Are there any functions in RGraph to import query string data?

[Link]
Yes. From version 6.06, there are four new functions that will help you when importing data from the query string. The canvas versions of these functions are:
  • RGraph.GET.string()
  • RGraph.GET.number()
  • RGraph.GET.json()
  • RGraph.GET.array
And the svg versions of the functions are:
  • RGraph.SVG.GET.string()
  • RGraph.SVG.GET.number()
  • RGraph.SVG.GET.json()
  • RGraph.SVG.GET.array()
The RGraph.GET.string() and RGraph.GET.number() functions are self-explanatory whilst the RGraph.GET.array() function fetches a comma-separated list of items, be they strings or numbers. The RGraph.GET.json() function is probably the most useful as it fetches a whole json object from the query string which can contain multiple things - for example, data, labels and the key. An example URL using the json option could be:

foo.html?json={"data":[4,8,6,6,3,5,9],"labels":["Mark","Craig","Rich","Pete","Luis","Bob","John"]

Implementing RGraph and creating charts

What does a basic chart look like?

[Link]
Charts are created using javascript so they can be integrated very easily into your pages. The charts are configured by using the options that are listed in the documentation. [canvas] [SVG] Here's an example of a basic Bar chart:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.bar.js"></script>

<canvas id="cvs" width="700" height="300">[No canvas support]</canvas>

<script>
    myBar = new RGraph.Bar({
        id: 'cvs',
        data: [4,8,6,4,3,5,8],
        options: {
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            colors: ['#a00'],
            marginInner: 25
        }}).draw();
</script>
There are plenty more examples, both basic and more complex, in the demos/ directory of the download archive.

Are files used from outside of our domain?

[Link]
For a straightforward chart - no, RGraph only uses the libraries that you put on your website. There is a case when RGraph does make a call to an outside file and that's when you're accessing a Google Spreadsheet with the Sheets connector. It does this by dynamically creating and adding a script tag to the document. This script tag loads a javascript file from the Google Sheets server which contains the spreadsheet information. Note also that the Moment.js library is an external library - but it's included in the RGraph archive so that you can easily add this to your server if you wish.

My charts don't work in IE6, IE7 or IE8

[Link]
These are all really old and outdated web browsers that don't support either the canvas or the svg tags that RGraph uses to create the charts. RGraph used to work with something called ExCanvas (for IE7 and IE8 support) but as time went on and demands grew, the minimum browser requirement was upped to IE9.

In April 2021 version 6.00 of RGraph was released. This version did not contain a massive amount of changes and nor did it break compatibility - but what made it a major version update was the change to start incorporating javascript es6 features.

So you will need a modern(ish) browser to use RGraph. When this version of RGraph was released es6 had been around for over 5 years - so it was a good time to start using it!

If you want the last 5.xx version of RGraph, that is compatible with older browsers, you can get it from the download page.

Does it matter which webserver I use?

[Link]
Not at all. RGraph creates charts using solely javascript and runs completely within the browser - so whichever web server that you use makes no difference to RGraph. Actually, you don't even need to use a webserver at all! If you wish you can use RGraph charts with a filesystem-based website that's kept on your computer - perhaps for presentation purposes. The Installation and Implementation documentation will help you when you're looking to setup RGraph and get it running.

Can I create a date/time Line chart with irregular data?

[Link]
Yes you can but not with the Line chart. You would actually use a Scatter chart for this and enable the line option. This means that you can have irregular points where the gap between points is not necessarily always the same. There's an example of a date/time chart in the demos. There are various date/time formats that are supported natively by RGraph but if you prefer you can also use the Moment.js library that's included with RGraph. There's a HOWTO document about date/time charts here that has more information.

Can I combine different chart types?

[Link]
Yes you can. Probably the most common type of combination is the Line/Bar combo and you can see an example of that here. Whilst easily being the most common type of combination RGraph is not limited to this. You can combine any of the chart types with others on a single canvas. In doing so you can create some quite novel charts. There are a few examples in the download archive.

Does RGraph send data back to the RGraph website?

[Link]
No. All the data used to create your charts is kept within the webpage. When you use the Google Sheets import utility it fetches data from Google - but no data is sent to them. And with ajax, again, data is fetched but not sent (unless you specifically send it with the RGraph.AJAX.post function).

 

Can I add a double-click event listener?

[Link]
You can though you don't use the convenient on RGraph function to do so. Instead you need to use the standard dom1 or dom2 methods to add the listener and then inside the listener function you check whether a shape was clicked or hovered over. Here's some example code that shows you how to do it.
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.bar.js"></script>

<script>
    myObject = new RGraph.Bar({
        id: 'cvs',
        data: [9,10,6,8,4,6,3],
        options: {
            xaxisLabels: ['Hoolio','Gary','Tom','Mark','Karl','Pob','Bob'],
            marginInner: 20,
            backgroundGridBorder: false,
            backgroundGridVlines: false,
            yaxis: false,
            title: 'Double click event listener added to the chart',
            titleBold: true
        }
    }).draw();

    // This is the DOM1 method of adding events
    myObject.canvas.ondblclick = function (e)
    {
        var obj   = e.target.__object__;
        var shape = obj.getShape(e);

        if (shape) {
            alert('A bar was clicked with index: ' + shape.dataset);
        }
    }

    // And this is the DOM2 method of adding event listeners
    myObject.canvas.addEventListener('dblclick',  function (e)
    {
        var obj   = e.target.__object__;
        var shape = obj.getShape(e);

        if (shape) {
            alert('[DOM2 event listener] A bar was clicked with index: ' + shape.dataset);
        }
    });
</script>

How can I get the best performance out of RGraph?

[Link]
There's lots that you can do with regards to improving the performance of your RGraph charts. The first place you should go is the Improving the performance of your charts documentation page. This page details various techniques that you can use to boost the performance of not only your charts - but some of the points apply to your entire website too (eg making use of gzip compression).

Non-English characters don't display correctly on my charts

[Link]
This can be resolved by employing one of these three different methods.
  1. Specifying the correct character set on the Content-Type http header.
    For this, you would normally use a server-side scripting language like php. You can do it by adding the following piece of code to your php file. If you have a file that's included by all of the pages on your website then it would be wise to add it to that so it affects all of your pages.

    header('Content-Type: text/html;charset=ISO-8859-1');

  2. Using a meta tag in the head section of your document.
    By adding a charset meta tag to your document you may be able to force the browser to switch the character-set that it uses when it's rendering the page. An example of this would be:
    <head>
        <!-- Use either this: -->
        <meta charset="UTF-8">
        
        <!-- or this: -->
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    </head>
    Note that the meta tag must appear entirely within the first 1024 bytes of the page.
  3. Specifying a charset attribute on the script tag.
    Personally, I've never used this method so I can't vouch for it. An example tag would be like this:

    <script src="RGraph.common.core.js" charset="UTF-8"></script>

Can I create my charts on my server instead of in the browser?

[Link]
You certainly can, by making use of PhantomJS - which is a WebKit-based command-line web browser. There's a full HOWTO document that details this here. You may want to employ this technique if you need an image of the chart for (for example) inclusion in a pdf file or other non-web document.