The benefits of free JavaScript charts

Share RGraph:   


What are they?

Simply, they're charts that are made inside the browser with JavaScript! They have significant advantages over server based generation or Flash based libraries. Their audience is large, with the majority of browsers and mobile devices supporting the necessary parts of HTML5 (ie the canvas tag) and because they're created in the browser they're both quick and small. There's no large image or Flash files to send and the libraries can be both minified, compressed and cached to reduce their size (as an example, when minified and compressed the Bar chart library is roughly just 15k!).


Advantages of HTML5 canvas based charts

Free and Open Source Software (FOSS)

RGraph is free to use for all purposes under the terms of the GPL version 2.0 license. The source code that creates the charts is available as part of the download and you can edit or update as much as you wish.

Read more about the Open Source nature of RGraph and the RGraph license page.

Speed of rendering

By using a "fire and forget" approach to drawing there's no DOM to maintain so drawing on canvas is very fast. Compared to adding objects to the page or using a DOM based alternative canvas performs admirably - up to 10x in many cases.

With no DOM available a system has to be used to maintain references to 'objects' (charts in the case of RGraph) and this is where RGraphs ObjectRegistry comes in.

JavaScript is very fast and secure because it runs on the client (in the browser) so it has ample CPU power available to it.

In addition browsers have been getting steadily faster - especially at running JavaScript and rendering pages - and that will only get even better over time.

Ease of use

As you can see from the demos, the basic examples (now included in the demos) and the implementation documentation the requirements to get RGraph integrated into your page are very strightforward and easy to understand.

It can be manipulated quite simply and integrates well into whatever JavaScript code that you already have. Even though canvas is so easy to use RGraph goes further and makes things even easier.

Small file sizes

Charts made with JavaScript typically have quite a small foootprint. The code to create and configure the charts is tiny and the libraries are small too. Additionally the libraries can be both minified, compressed and cached making them even smaller. More on this in the performance section of the documentation.


RGraph has a number of features that can make your charts rich and interactive - such as tooltips, annotating and adjusting. New features are being added constantly - an example of a particularly useful addition in the October 2013 is the CSV reader - which can be used to read either seperate or embedded CSV data. It can make integrating with a database easier.

Ease of skills transfer

From a manager perspective - JavaScript will be easy to train or hire for and often complements other skills and requirements. As RGraph gains popularity you are likely to come across more and more people who have used and understand RGraph.

Documentation and examples

Because of its maturity the documentation is extensive and there are lots of examples and instructive guides for common tasks. There are also basic examples available (which are now included in the download archive) which are purposefully simple and without the website "chrome" to allow you to easily understand and follow them.

Reduced server load

By moving the generation of your charts away from the server and on to the client (ie each individual browser) it takes away a significant chunk of processing from your server. So instead of making potentially thousands of charts your server makes none and the browser handles their creation.

You can read more about improving performance even further here...

No plugins required

Using JavaScript for your charts means that you don't need plugins. Plugins can slow down your browser and can also introduce instabilities. Additionally the browser may be in a controlled evironment where the installation of plugins is not allowed.

Because JavaScript is part of every browser your charts will work both on and offline. This allows you to use them in offline pages, on Intranets or in browser based presentations (for example).

iPad and iPhone compatible

Unlike flash charts, the charts will work on the iPad, iPhone and other mobile devices. Battery life is also less of a concern with JavaScript. Mobile devices are quickly growing in popularity so this will become more and more of an issue as time goes on.


Because the charts are made inside the browser (using integral parts of it) they inherit all of its security features. This includes Chromes sandbox model so they are extremely safe to use. Also, as a result of being Open Source software the feedback includes people submitting bug reports. These can then be quickly fixed and the software just gets better!

Excellent support

Support is both fast and free. Many people have praised the support for being quick to respond and knowledgable.

Maturity of the library

RGraph was started in 2008 and as a result is very mature and the techniques for drawing on canvas have been honed to give the easiest, most painless and quickest way to get your charts up and running. The techniques used to integrate with canvas have been optimised for speed and this can be seen in the rendering times - which can be measured in milliseconds.

As you can see the advantages of using up-to-date JavaScript and HTML5 technologies far outweigh the disadvantages so depending on your audience you may wish to start using the canvas tag straight away. Also, RGraph provides ExCanvas in the archive which can help where Internet Explorer 7 and 8 compatibility is a concern.


What if JavaScript is unavailable?

Fortunately this doesn't happen much these days as JavaScript is required for the majority of websites to function well or even at all. With more and more "applications" being transferred to the web and converted to HTML - JavaScript is becoming even more of a fundamental requirement of the modern website. As such you can safely assume that the majority of browsers or mobile devices will be able to see and use your charts.

That isn't to say that you can ignore the issue completely. Accessibility of websites is becoming more and more of an issue, particularly where disability access is needed. Some countries have even legislated or are in the process of legislating that government websites and the services that they provide have to be accessible by all concerned. Thus you can use the canvas fallback content to provide a alternative version of the data represented. Providing good quality titles for your charts will also help people to understand the data that is being represented.


How RGraph can help you

RGraph uses JavaScript and the <canvas> tag to produce charts quickly. The canvas tag is very fast as a result of there being no DOM to maintain - it uses a "fire and forget" approach to drawing. The charts that it produces are attractive and it boasts a number of useful additional features - such as tooltips, annotating, zoom and events. It's easy to use, scales very well, is compatible with a wide variety of browsers and produces attractive charts.


Example charts

RGraph can produce over 50 different kinds of chart - all of which can be significantly customised which in some cases can produce other types of charts. For example the filled range Line chart can have its data tailored in order to produce Fan charts - which is an example of the type of chart the Bank of England uses to show growing uncertainty in future currency valuations. For examples of the various types of chart that RGraph can show visit the examples section


Add a new comment...