HOWTO guides

  • Sample image for this HOWTO guideHow 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.

  • 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.

  • Sample image for this HOWTO guideHow 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.

  • Sample image for this HOWTO guideHow 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
    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.

  • Sample image for this HOWTO guideHow 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.

  • Sample image for this HOWTO guideHow 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.

  • 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.

  • Sample image for this HOWTO guideHow 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.