HOWTO guides
How to make a dual-color Line chart
ThisHOWTO
guide takes you through the steps that are required to create anSVG
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 twoSVG
tags along with positioningCSS
so theJavaScript
code to create the chart is quite simple.- How to create a chart without a browser using PhantomJS
ThisHOWTO
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: ThisHOWTO
guide is in thecanvas
section of the website but applies toSVG
charts as well. 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.How to create a horizontal or vertical progress bar
Creating Horizontal or Vertical Progress Bars can be done by using the Horizontal and Vertical Bar charts (or rather two of them - one for the background and one for the foreground).- How to make formatting strings easier
TheSVG
librariesString.format
function can be used to easily format strings like theC/C++
functionsprintf
. It improves the readability of code when compared to simple concatenation. How to use the RGraph.SVG.text.find function
ThisHOWTO
describes how you can use theSVG
charts find function to get hold of text nodes - which you can then customise as required.How to use global configuration values in your charts
The global configuration values are inherited by all of theSVG
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.- 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 yourSVG
charts - these are achieved by using theSVG
g
element. How to turn a label into a link (SVG version)
Like thecanvas
version of this document, this page shows you how to turn one of yourSVG
labels into a functioning link that you can click.