Frequently asked questions

Summary: Frequently asked questions about RGraph. If you have a simple question about RGraph then check this document first because it may be answered here. Some of these questions have been picked from the Google search "People also ask..." sections.

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 MIT license. This means that you can use RGraph as much or as little as you please, for any purpose and you don't need to ask for permission. Use it on your website, on a private intranet or embed it with your device - anything you please!

Is RGraph free to use?

[Link]
Yes - there is no charge to use RGraph for any reason. You can use it as much or as little as you wish all for free. The MIT license allows you to use the software for any purpose - private or public.

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 per quarter.

Can I include RGraph in my application?

[Link]
Yes. The liberal nature of the MIT license (which RGraph is released under) means that you're free to do practically anything you please with the code and that includes distributing them 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 and SVG HBar can be used to make progress bars (there are no dedicated SVG Horizontal Progress or Vertical Progress bars.).
Canvas
  • Bar
  • Bipolar
  • Donut
  • Funnel
  • Gantt
  • Gauge
  • Horizontal Bar
  • Horizontal Progress
  • Line
  • Meter
  • Odometer
  • Pie
  • Radar
  • Radial Scatter
  • Rose
  • Scatter
  • Semi-circular Progress
  • Thermometer
  • Vertical Progress
  • Waterfall
SVG
  • Bar
  • Bipolar
  • Funnel
  • Gauge
  • Horizontal Bar
  • Line
  • Pie
  • Radar
  • Rose
  • Scatter
  • Semi-circular Progress
  • Waterfall

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 are 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 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 off 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 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.

Implementing RGraph and creating charts

What does a basic chart look like?

[Link]
Charts are created using JavaScript so they can integrated very easily into your pages. The charts are configured by using the options which 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 out-dated web browsers which don't support either the <canvas> or the <svg> tags which 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. So now your users will need to be using at least version 9 of Internet Explorer to be able to see the charts. This too is a really old browser (it was released in 2011) so the likelihood is that your viewers will be using a newer browser.

Does it matter which web server I use?

[Link]
Not at all. RGraph creates charts using solely JavaScript and runs completely within the browser - so whichever webserver that you use makes no difference to RGraph. 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 separation 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 post() function).

 

Can I add a doubleclick 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>