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 svg types. Bar charts Line charts Horizontal Bar charts Pie 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 canvas charts.

There are also svg versions of the Google Sheets, csv and ajax data import utilities (for which the canvas documentation 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 html table 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 csv connector will make it easy to fetch, read and use data from a csv file 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 csv format (a php script, 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 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, RGraph.SVG.AJAX.getJSON and more.

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 canvas section of the website but the information also applies to the svg charts.
  
  
• Supporting different screen sizes with the responsive configuration option and/or function.
  The svg responsive configuration option and function are close to being identical to the canvas versions of them so for this reason, the canvas documentation page can be used to learn about this configuration option and function. The basic svg demos 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 css animation effects and transitions that you can use to spruce up your pages.
  

HOWTO demonstrations and guides

Read the SVG HOWTO documentation pages
The 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.

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.