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.
Chart types that are available
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
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
How to use the RGraph.SVG.text.find() function
To help you find the text nodes that RGraph generates and adds to the SVG document there's a function to do just that called RGraph.SVG.text.find(). It allows you to search based on the text (both an exact-match string and a regular expression) and also by the tag that RGraph assigns to it (which is just a string such as labels.xaxis, labels.yaxis or title). This document shows you these methods. This function was added in version 4.65.
How to turn a label into a link (SVG version)
It's by no means uncommon for people to want to see labels as links - so that users can click the link and get more information. To do this after you've made the chart is quite a simple affair and this page goes through the necessary steps with you.
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.
How to use global configuration values in your charts
The global configuration values are inherited by all of the SVG charts that are created on the page and make it easy to reduce the amount of text on the page and cut down on your RGraph configuration. They can also make it easy to get multiple similar looking charts by sharing the configuration values between charts.