SVG charts documentation
- Installing and implementing RGraph
- Available chart types and option references
- 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.
Available chart types and option references
See the available canvas charts
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 clipping functionality
The clipping functionality is new to version 6.17 and allows you to more easily combine chart types and restrict those charts to certain areas of the SVG. This documentation page is in the canvas section of the website but the information also applies to the SVG charts.
-
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.
-
Adding zoom to your charts
SVG charts now support the addition of zoom. Perhaps most useful with a scatter chart though all chart types support the feature.
-
Adding images to your charts
Whilst the canvas libraries have the drawing api image object, the SVG libraries have the RGraph.SVG.drawImage function. This documentation page details the function, the options that you can use with it and shows you an example of how to use it.
-
Animating RGraph properties with the animate function
Similarly to the canvas libraries, the SVG libraries have an animate function which can be used to animate the numeric chart properties (for example the margins and text sizes).
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.