RGraph: JavaScript charts library

Share RGraph:   Share or Like RGraph on Facebook!

What are they?

Simply, they're "web 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 HTML5 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 JavaScript libraries can be both minified, compressed and cached to reduce their size (as an example, when minified and compressed the RGraph Bar chart library is just 9k!).

Advantages of charts made with JavaScript and the HTML5 canvas tag

Using the HTML5 canvas tag in conjunction with JavaScript to produce your graphs and charts has significant advantages over server based solutions:

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 HTML5 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 turned off?

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 textual version of the data represented by your chart. 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 HTML5 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 (including IE7 and IE8) and produces attractive charts.

Example charts

In total RGraph can produce roughly 23 different kinds of charts - 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

© Copyright Richard Heyes 2008-2017