- What are they?
- Advantages of canvas or SVG based charts
- How RGraph can help you
- Example charts
What are they?
Advantages of HTML5 canvas 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.
Speed of renderingWith 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.
FeaturesRGraph 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.
Documentation and examplesBecause 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 loadBy 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.
SecureBecause 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 supportSupport is both fast and free. Many people have praised the support for being quick to respond and knowledgable.
Maturity of the libraryRGraph 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.
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
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.
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