HOWTO guides
- How to make a dual-color Line chart
- How to create a chart without a browser using PhantomJS
- How to create a stacked and grouped Bar chart
- How to create a horizontal or vertical progress bar
- How to make formatting strings easier
- How to use the RGraph.SVG.text.find function
- How to use global configuration values in your charts
- How to use the background layers in your SVG charts
- How to turn a label into a link (SVG version)
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