HOWTO guides

How to create sparklines and inline charts

This HOWTO document is in the canvas section of the website but has examples of mini SVG charts that you can use inline in paragraphs of text. You don't need to use any specific libraries - you simply need to use the standard configuration options that are available to you. Read this HOWTO guide

How to make a dual-color Line chart

This HOWTO guide takes you through the steps that are required to create an SVG dual-color Line chart where the upper half is one color (eg green) and the lower half is a different color (eg red). This dual-color chart uses two SVG tags along with positioning CSS so the JavaScript code to create the chart is quite simple. Read this HOWTO guide

How to create a chart without a browser using PhantomJS

This HOWTO guide has detailed instructions about how to use the PhantomJS tool to create your charts from the command line. PhantomJS is a Webkit-based headless browser that runs from the command line. This means that you can use it to automate (via a scheduled task for example) the creation of images that can be made available to download for inclusion in, for example, PDF documents. Note: This HOWTO guide is in the canvas section of the website but applies to svg charts as well. Read this HOWTO guide

How to create a stacked and grouped Bar chart

The default types for the Bar chart are regular, stacked and grouped. With a little manipulation though there's one more that can be generated - a combined stacked and grouped chart. Read this HOWTO guide

How to create a horizontal or vertical progress bar

Creating Horizontal Progress bars or Vertical Progress bars can be done by using the Horizontal Bar chart and Bar chart objects (or rather two of them - one for the background and one for the foreground). Read this HOWTO guide

How to make formatting strings easier

The SVG libraries String.format function can be used to easily format strings like the C/C++ function sprintf. It improves the readability of code when compared to simple concatenation. Read this HOWTO guide

How to use the RGraph.SVG.text.find function

This HOWTO describes how you can use the SVG charts find function to get hold of text nodes - which you can then customise as required. Read this HOWTO guide

How to use global configuration values in your charts

The global configuration values are inherited by all of the SVG charts that are created on the page and make it easy to reduce the amount of text on the page and cut down on your RGraph configuration. Read this HOWTO guide

How to use the background layers in your SVG charts

There are a number (10 by default) of background "layers" available to you to use in your SVG charts - these are achieved by using the SVG g element. Read this HOWTO guide

How to turn a label into a link (SVG version)

Like the canvas version of this document, this page shows you how to turn one of your SVG labels into a functioning link that you can click. Read this HOWTO guide