HOWTO guides

The SVG HOWTO guides are a set of informative documentation pages that are applicable to the SVG chart types. They cover common tasks and also document parts of the RGraph API.

  • Sample image for this HOWTO guideHow to make dual color Line chart
    This HOWTO guide takes you through the steps that are required in order to create an SVG based dual color Line chart where the upper half is one color (eg green) and the lower half is a different color (eg red). Because SVG has a retained drawing mode you can add elements to the SVG after the charts have been drawn and the effect can still be seen on the resulting SVG. This makes it easy to add the necessary clipping after the charts have been drawn and still see the effect.

  • 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 charts for the purposes of making images of charts available for download to include 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 in a similar way to 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 element.

  • Sample image for this HOWTO guideHow to turn a label into a link
    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.