SVG charts

• The available chart types
• Installing and implementing RGraph
• 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, Line, Horizontal Bar, Pie, Semi-circular Progress and Radar 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-based animation effects for the SVG libraries too.

The chart types that are available

Activity meter

Bar charts

Bipolar charts

Funnel charts

Gauge charts

Horizontal Bar charts

Horizontal Progress bars

Horseshoe meter

Line charts

Pie charts

Radar charts

Rose charts

Scatter charts

Segmented donut charts

Semi-circular Progress bars

Vertical Progress bars

Waterfall charts

Installing and implementing RGraph

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.

Read the installation guide...

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).

  This 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 function
  The SVG responsive() function is close to being identical to the canvas version of it so for this reason, the canvas documentation page can be used to learn about this function. The basic SVG demos in the download archive use this function.
  
  
• 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-based animation effects and transitions that you can use to spruce up your pages.

HOWTO demonstrations and guides

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.

Read the SVG HOWTO documentation pages...

Browse 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.

Go to the RGraph GitHub repository...