Browser support for RGraph

RGraph version 6

From version 6.01 RGraph will start to use JavaScript ES6 features. What this means is that you'll need to be using a modern-ish browser to view RGraph charts. This isn't a case of going back and updating the libraries - that would produce a large number of bugs and errors. Only new features and code will use the new features and not immediately either.

Version 6.00 itself will not use any of these new features - so you'll be able to upgrade to that if you want to. But subsequent releases will use the new features.

So you'll need a modern, ES6 compatible browser. ES6 has been around for over 5 years now so any of the major browsers will incorporate support - including WebKit-based browsers and Firefox. This covers the vast majority of the browser market.

Older version (5.xx) requirements

With the older 5.xx releases the charts are made using HTML5 features (the SVG and canvas tags) so browser support includes:

The HTML5 canvas and SVG tags are part of the HTML5 standard, and all of the above browsers have some sort of support for them.

Canvas, SVG & Microsoft Internet Explorer

Microsoft Internet Explorer 9 added support for the <canvas> and <SVG> tags at the start of 2011. Older versions of MSIE are no longer supported by RGraph. Remember that version 6.00 of RGraph increased the base requirement to an ES6 compatible browser though.

Also note that as of version 5.27 the responsive() function was switched from using the window.onresize function to using media queries that are installed via the JavaScript API (the window.matchMedia() function). With Internet Explorer, this function is only supported from version 10.

However the older version of the function that uses the window.onresize function is still available in the RGraph.common.core.js file. Simply search for the phrase RGraph.responsive_old and change it to RGraph.responsive. The way that the functions are created means that this will overwrite the newer responsive() function and the result will be that you use the old version of the responsive() function.

The two functions use different styles of configuration so their configurations are incompatible. If you want to use the old function you can of course - just keep in mind that the conditions should be listed in reverse order - from smallest screen condition to largest screen condition. Like this: 

.responsive([
    {maxWidth: 800,width:400,height:200,options:{marginInner: 5,textSize:10}},
    {maxWidth: null,width:600,height:250,options:{marginInner: 10,textSize:12}}
]);

Other devices

Other devices (eg mobile devices) may support or may be intending to support the canvas and/or the SVG tags as part of their HTML5 support.

Typically the newer a device or its OS is the higher the chances are that it has support for the HTML5 canvas and SVG tags.

Creating your charts without a browser

If you wish to make charts without a browser or user involved - eg from a script - there's something called PhantomJS that you can use to make images from webpages automatically.

There's a HOWTO document here that goes through the process of using PhantomJS. This document, despite being in the canvas section of the website, applies also to SVG-based charts.

You can also find a little bit of information about PhantomJS on the download page.

Puppeteer for NodeJS

If you're using NodeJS then there's a more up-to-date project called Puppeteer that you can use to get images of your charts instead of PhantomJS. You can find the Puppeteer Git page here:

https://github.com/puppeteer/puppeteer