SVG charts documentation
- Installing and implementing RGraph
- The available chart types
- Data import utilities
- Features and examples
- HOWTO demonstrations and guides
- Browse the RGraph GitHub repository
As of autumn 2016, RGraph has some brand new shiny
Horizontal Bar charts
Semi-circular Progress bars and
Radar charts are available (amongst others).
There are examples of these types here.
Naturally, being far newer than the
canvas types they're not as
feature-packed - but at lower resolutions, they do have a significantly
better definition than the bitmap-based
There are also
svg versions of the Google
ajax data import utilities (for which the
also applies to). And there's a set of
css animation effects for the
svg libraries too.
Installing and implementing RGraph
Read the installation guide
These are the same installation pages as the
canvas installation guide. All of
these pages apply to both technologies and have information that's
pertinent to both. Topics such as browser support, getting started
and performance enhancements are covered here.
The available chart types
Data import utilities
Documentation for the query string data-import functions
New in version 6.06 are the query string import functions. These allow you to easily retrieve data from the query string of the URL (what comes after the ? in the URL). Although this page is in the canvas section - it still applies to the svg version.
A utility to import data from an HTML table
If you have an
htmltable on your page that you wish to import data from this import utility can make that a very easy process for you. This is the documentation page for it. Although this page is in the canvas section - it still applies to the svg version.
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.
Importing data from a CSV file
Like the Google Sheets import utility, the
csvconnector will make it easy to fetch, read and use data from a
csvfile that's stored on your server (using
ajax). The file doesn't have to be an actual text file - it could equally be a script that simply outputs the relevant data in
phpscript, for example). Although this page is in the canvas section - it still applies to the svg version.
The SVG AJAX functions
If you prefer using
ajaxfunctions to fetch information from your server, these functions will help you to do that. There are functions available to you such as
Features and examples
A description of the custom text option
If you want to add some custom text to your charts you have two options - you can use the RGraph.SVG.text function directly or you can use this option to specify the text inside your configuration. This documentation page is in the
canvassection of the website but the information also applies to the
Supporting different screen sizes with the
responsive configuration option and/or function.
responsiveconfiguration option and function are close to being identical to the
canvasversions of them so for this reason, the
canvasdocumentation page can be used to learn about this configuration option and function. The basic
svgdemos in the download archive use the configuration option.
Using the SVG text function
The RGraph text function is an easy way to add text to your charts. This guide lists the options to the function and gives you an example of how to use it. Because one of the options is
href, this function is also an easy way to add links to your charts should you need to.
CSS animations and effects
This page documents a set of
cssanimation effects and transitions that you can use to spruce up your pages.
HOWTO demonstrations and guides
Read the SVG HOWTO documentation pages
howto documentation pages have a similar purpose to the
howto documents - in that they help you accomplish specific tasks and
inform you about the RGraph
Browse the RGraph GitHub repository
Go to the RGraph GitHub repository
RGraph is now hosted on the GitHub source control platform. You can browse the code online and star the project to keep an eye on the development.