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
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. There are examples of these charts to the right. Naturally being far newer than the <canvas> types they're not as feature packed - but when you zoom in 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.
Installing and implementing RGraph
Browser support for RGraph
SVG is supported by most (if not all) of modern browsers. Including desktop and mobile variations.
Getting started with RGraph
Information on creating your first chart with RGraph, placement of the RGraph libraries and some useful functions that help enormously when debugging your charts.
Integration with server-side scripting and AJAX
A very common need is to incorporate your charts with server-side generated output. This can be done by having your script generate the source dynamically or by using AJAX to fetch the data when the page has loaded. AJAX can also be used after the page has been loaded to update the chart.
Improving the performance of your charts
Doubtless you will be wanting to get the most from your charts speed wise - this page lists many optimisations that you can make to your charts and the libraries to increase the speed at which they're rendered.
These pages are in the canvas section of the RGraph website but have information on implementing the SVG libraries too.
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.
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).
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
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
How to create a horizontal or vertical progress bar
Using the Horizontal and regular Bar charts you can create Horizontal and Vertical progress bars. There are examples of these in the demos that are included in the downloads.
How to use the background layers in your SVG charts
Normally SVG doesn't allow for layers and everything is stacked in the same order as it was created. They can be emulated however by using the SVG <g> tag (g meaning group). RGraph creates a number of these groups that you can use to "slip something behind" what is drawn on the chart.