JavaScript charts advantages and benefits

Share RGraph:   Share or Like RGraph on Facebook!

A description of why you should use JavaScript and the SVG or canvas tags to build your charts and how they can improve your websites speed.

An example of an SVG Line chart


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 and/or the SVG tags) 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 canvas or SVG based charts

Free and Open Source Software (FOSS)

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

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

Speed of rendering

With canvas, by using a "fire and forget" approach to drawing there's no DOM to maintain so drawing on canvas is very fast. Conversely SVG has a DOM to record a reference to each element thats added to the scene.

Both have advantages and disadvantages, but speed is more than adequate for rendering and animating charts.

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 canvas demos and the SVG 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 and SVG are 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 (canvas only) and adjusting (canvas only). 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.

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 the charts 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 the drawing surfaces 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 or SVG tags straight away.


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, in the case of canvas, you can use the fallback content to provide an alternative version of the data represented. In the case of SVG, screen-readers may be able to access the contents of your chart because of it having a DOM like nature. 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 the <canvas> tag and the SVG tag to produce charts quickly. The canvas tag is 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.

The SVG tag is more tied to the host browsers DOM, has its own DOM and provides excellent integration and accessibility. With SVG there's less code to write and it looks at lot more like the HTML tag system that you're used to.


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