Frequently asked questions

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.

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

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.

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.

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.

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

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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

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>

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

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>

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.