SVG charts documentation and examples
RGraph now has SVG chart types. Bar, Horizontal Bar, Line, Pie charts and progress bars/meters are all catered for - full list is below
- Chart types that are available
- Installing and implementing RGraph
- Data import utilities
- Features and examples
- HOWTO demonstrations and guides
As of autumn 2016 RGraph has some brand new shiny SVG chart types. Bar, Line, Horizontal Bar, Pie, Semi-circular Progress and Radar are available (amongst others). There are examples of these charts here.
Naturally being far newer than the <canvas> types they're not as feature packed - but at lower resolutions they do have significantly better definition than the bitmap based <canvas> versions.
There are also SVG versions of the Google Sheets, CSV and AJAX data import utilities (for which the canvas documentation applies to also). And there's a set of CSS based effects for the SVG libraries too.
Chart types that are available
Installing and implementing RGraph
These are the same installation pages as the canvas installation guide. All of these pages are applicable to both technologies and have information that's pertinent to both. Topics such as browser support, getting started and peformance enhancements are covered here.
Data import utilities
Importing data from Google Sheets
If you have a Google Sheets spreadsheet that you wish to import data from then this connector will make that easy for you. This is the documentation page for it. Although this page is in the canvas section - it still applies to the SVG version.
A description of the CSV reader
Like the Google Sheets import utility the CSV connector will make it easy to fetch, read and use data from a CSV file that's stored on your server (using AJAX). This file doesn't have to be an actual text file it could equally be a script that simply outputs the data in CSV format (for example a PHP script). Although this page is in the canvas section - it still applies to the SVG version.
A description of the SVG AJAX functions
If you prefer using AJAX functions to fetch information from your server, these functions will help you to do that. There are functions available to you such as RGraph.SVG.AJAX.POST(), RGraph.SVG.AJAX.getNumber, RGraph.SVG.AJAX.getString(), and more.
Features and examples
Using the RGraph.SVG.text() function
The RGraph text function is an easy way to add text to your SVG charts. This guide lists the options to it and gives you an example of how to use it. Because one of the options is an href option, this function is also an easy way to add links to your charts should you need to.
Using keys in your charts
Using keys in your charts can help your users identify different datasets on your chart(s). They can be used in "gutter mode" (ie they're placed in the gutter such as this Funnel chart demo .
CSS animations and effects
This page documents a set of CSS based animation effects and transitions that you use to spruce up your charts and pages.
HOWTO demonstrations and guides
Thee SVG HOWTO documentation pages have a similar purpose to the canvas HOWTO documents - in that they help you accomplish specific tasks and inform you about the RGraph API.