• DOWNLOAD
• SVG
• CANVAS
• DEMOS
• BLOG
• VIDEO
• ABOUT
• LICENSE
• SUPPORT

• download
• svg
• canvas
• demos
• blog

• video
• about
• license
• support

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

More »

 

Get the latest version of RGraph (version 6.20, 1st December 2024) from the download page. You can read the changelog here. There's also older versions available, minified files and links to cdnjs.com hosted libraries.

Download »

 

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

More »

The benefits of using RGraph

Read about the benefits of using RGraph
Read about the benefits of using RGraph to show charts on your website. Benefits include things such as saving money, better website performance and it also allows you to create pretty charts!

Browser support for RGraph

Read about browser support for RGraph
Information about browser support for RGraph. For years now browser support for canvas and svg has been good with most of both desktop and mobile browsers able to display them.

• RGraph version 6 As of version 6 RGraph will start to use es6 features so you'll need to be using a more recent browser to see your charts.
• Older version (5.xx) requirements These are the requirements for the older, version 5.28 version of RGraph. This version is available for you to download from the download page.
• HTML5 canvas, HTML5 SVG & Microsoft Internet Explorer (MSIE) Details of Internet Explorer support. More recent versions of Internet Explorer have had good support for canvas and svg, since version 9.
• Other devices Details of support for other devices. Typically the newer the device then the more likely it is to have support for the canvas and svg tags. it will be hard to find a device that doesn't have support these days (2017+).
• Creating your charts without a browser How you can create your charts without a browser by using PhantomJS. This is just a note with a link to the PhantomJS website. This means that you can create charts from automatic scripts, such as scheduled tasks.

Getting started with RGraph

Read how to get up and running with RGraph
How to start with RGraph - a basic chart. This bit of information is an easy way to understand how RGraph works and how you can use it on your website.

• Suggested structure for RGraph A suggested structure for the RGraph libraries. Having a good structure makes things easy to handle and makes things easier for future developers.
• Alternative structure for RGraph An alternative structure for the RGraph libraries that could also be used. This layout includes dates in the filenames so can make upgrading to a newer RGraph release quicker and easier.
• The $p(), $a(), $c() and $d() functions RGraph has a few useful debug functions that you can use while making your charts. These functions can make finding problems with your code easier. So much so in fact that you may want to add them to your own code.

Integration with server-side scripting

Learn about integrating RGraph with server-side scripting
Learn how to add RGraph to your server-side scripts. This page has examples of using the php mysql, mysqli and pdo extensions. Learn how to make ajax requests, saving your (canvas) charts as images and how to read csv data.

• Integration with PHP and MySQL using the MySQL extension Information about integrating RGraph with the older php mysql extension. This extension has been deprecated for some time but is still in use and is an easy way to connect to your database.
• Integration with PHP and MySQL using the MySQLi extension Information about integrating RGraph with the php mysqli extension. The mysqli extension is a newer way that php has available to connect to your mysql database server.
• Integration with PHP and MySQL using the PDO extension Information about integrating RGraph with the php pdo extension. Like the MySQLi extension, pdo is a newer way to fetch data from your database server, but pdo is more of an abstraction interface that can connect to other database servers as well as mysql.
• Making AJAX requests Information about making ajax requests with RGraph. RGraph has some ajax functions that are available to both the svg and canvas libraries that make it much easier to fetch data by ajax. If they're not good enough for you though you can always use other ajax libraries or things such as the jquery $.ajax() function.
• Saving the chart as an image on the server How to save your charts as an image on the server. Like all (client-side) javascript RGraph runs in your browser. An easy way of fetching data from your server is to use ajax. In some cases this can actually improve performance too as the amount of data that is sent by the server is smaller.

Improving the performance of your charts

Improving the performance of your charts
Hints and tips on how to improve the speed of your charts and also your entire website. The tips here are aimed at increasing the speed of your charts but many can also be applied across your whole site (eg using gzip compression) giving your website and your charts even more of a speed boost. Studies have shown that having a faster website can make your users happier and can then lead on to bigger sales figures and turnover!

• A reasonable performance strategy What's a good way to improve the speed of your charts? Well not every tip or tweak needs to be used so this is what you should consider doing first as these tips give the biggest bang for your buck.
• General website performance tools Links to a few useful more general website speed tools which can be used to gauge the effectiveness of your speed tweaks. These tools can be used to increase the speed of your entire website - not just your RGraph pages. You'll find that the PageSpeed tool, in particular, is very useful.
• Note about performance and HTTP/2 A note about how http/2 means that some of the performance tweaks that are listed here will become less necessary. The main thing to remember with http/2 is that it takes place over a single connection (per server) so keep that in mind when planning your performance tweaks.