SVG charts documentation
- 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
animation effects for the SVG
libraries too.
The available chart types
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.
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 thecanvas
section - it still applies to theSVG
version.
-
A utility to import data from an HTML table
If you have anHTML
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 theSVG
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 theSVG
version.
-
Importing data from a CSV file
Like the Google Sheets import utility, theCSV
connector will make it easy to fetch, read and use data from aCSV
file that's stored on your server (usingAJAX
). The file doesn't have to be an actual text file - it could equally be a script that simply outputs the relevant data inCSV
format (aPHP
script, for example). Although this page is in the canvas section - it still applies to theSVG
version.
-
The SVG AJAX functions
If you prefer usingAJAX
functions to fetch information from your server, these functions will help you to do that. There are functions available to you such asRGraph.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 thecanvas
section of the website but the information also applies to theSVG
charts.
-
Supporting different screen sizes with the responsive function
TheSVG
responsive
function is close to being identical to thecanvas
version of it so for this reason, thecanvas
documentation page can be used to learn about this function. The basicSVG
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 ishref
, 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 ofCSS
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.