HOWTO guides

How to create a dual-color Line chart

Read this HOWTO document
From version 6.07 there was a new api function added: RGraph.clipTo.start which allows you to produce multi-color charts - but now (as of version 6.17) there's a new clip property which makes things much easier. This howto document takes you through making a dual-color Line chart with the new property. The full clip documentation page is here.

How to get transparent tickmarks using the canvas Line chart

This is one of the RGraph examples that are included in the download zip file. Normally getting transparent centers to your tickmarks is possible - but it wipes out the center of the tickmark in its entirety - including the background grid that sits behind it. This is an explanation of how, using dualcanvas tags, you can get a transparent center to your tickmarks but with the background grid showing through. The demo is svg-line-formidable.html in the download archive.

How to get rounded corners on a Bar chart

Read this HOWTO document
This HOWTO guide details how you can get rounded corners on your Bar chart. Previously this involved a substantial amount of custom code. Now though (as of version 6.01) it's just a case of specifying the corners option.

How to create a chart without a browser using PhantomJS

Read this HOWTO document
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 to make images of charts available for download to include in (for example) pdf documents.

How to dynamically add points to your Line chart

Read this HOWTO document
This HOWTO guide shows you how you can add new points to your chart by simply clicking in the left or right margins. It consists of simply adding an event listener to the canvas tag and manipulating the arrays of the Line chart.

How to get angled labels that follow your line

Read this HOWTO document
This HOWTO guide shows you how to add custom labels to a Line chart that follow the undulations of the line itself - as well as having regular labels in the bottom margin of the chart.

How to turn a label into a link

Read this HOWTO document
This document shows you how, when using the textAccessible option, to turn one of your labels into a functioning link that you can click.

How to create a Bar chart with multiple select

Read this HOWTO document
This HOWTO demonstrates how to add multiple select capabilities to your Bar chart. You could, for example, use this together with someajax code to pass information back and forth to the server about which bars are currently highlighted.

How to create one touch Line chart adjusting

Read this HOWTO document
This HOWTO demonstrates how to go about creating an adjustable Line chart that doesn't use the built-in adjusting functionality. This is so that the adjusting can be made to use a single touch - so it works well on touch-based devices as well as mouse-based computers.

How to use repeating canvas patterns

Read this HOWTO document
This HOWTO shows you how you can use repeating seamless fill patterns in your chart(s) instead of solid colors or gradients. Patterns can be used in place of solid colors.

How to create a multi-chart scrolling effect with CSS transitions

Read this HOWTO document
Create a single largecanvas to show multiple charts and switch between them usingcss 3 transitions. This can be an effective way of showing multiple charts but in a limited space.

How to create a CSS3 switch effect

Read this HOWTO document
Create acss3 based switch effect for showing two charts in the same place. Usingcss transitions can also be a good way of using a smaller space and show multiple charts.

How to use CSS3 transitions to save space

Read this HOWTO document
This HOWTO document shows you how to display four canvas tags using the space of one and use css3 transitions to switch between them. Because it uses css to switch between the charts the scrolling is smooth.

How to create a multi-chart scrolling effect with CSS transitions

Read this HOWTO document
Create a single large canvas to show multiple charts and scroll between them using css33 transitions. This changes the css top / left properties and uses css transitions to do the animation, but you just as easily use the jquery animate function (for example) to do the animating.

How to make a scrolling Line chart

Read this HOWTO document
Create a dynamically scrolling and updating Line chart. Scrolling Line charts can be used to great effect when monitoring a value (such as an attached device).

How to use CSS3 transitions with your canvas tag

Read this HOWTO document
Use css3 transitions to create a zooming switch effect between two charts. As one chart zooms out, another then zooms in. This is another way of showing multiple charts in the space of one.

How to use CSS3 gradients with your canvas tag

Read this HOWTO document
How you can use css3 gradients as the background on your canvas tag. This HOWTO document illustrates various gradients that css can produce, some repeating and some not.

How to make your line clickable using the isPointInStroke function

Read this HOWTO document
Make whole lines clickable instead of just certain points along that line. This could be used to allow you to provide more information (via a popup for example) about a particular dataset.

How to make your line clickable and then highlight the key

Read this HOWTO document
Make whole lines clickable and highlight the key at the same time. This uses the coordinates from a Line chart object to draw a drawing api Poly object over the lines and then when the poly objects are clicked, highlights the key.

How to use the RGraph.text function

Read this HOWTO document
Use the RGraph.text function to add custom text to your charts. You can use two methods - the RGraph.text function as shown here or the drawing api text object. The RGraph.text function is the underlying function that's used by the drawing api text object.

How to make a contract/expand transition effect

Read this HOWTO document
Create a switch effect between two canvas tags. Note that css3 transitions are smoother (example above). This is useful when you have multiple charts to display in a limited space.

How to show a custom static Y-axis

Read this HOWTO document
Create a y-axis that remains static whilst the canvas scrolls left and right. This can be used when you have a wide dataset that you still need to correlate closely with the scale.

How to use CSS3 animations

Read this HOWTO document
How you can use, and examples of, css3 animations. The animations library here is an external one with a few new animations added. css animations are very smooth in appearance.

How to use the new gradient syntax

Read this HOWTO document
Use the RGraph custom (and much simplified) gradient syntax. Gradients are an easy way to pretty up your charts. The gradient syntax that's shown here is far simpler to use than the standard canvas syntax.

How to use custom tickmarks using the drawing API

Read this HOWTO document
Use the drawing api image object to show customised tickmarks. Because the drawing api image object is being used things such as events and tooltips can be added too.

How to use the new dollar syntax for events

Read this HOWTO document
Use the new dollar syntax to add clickable areas to your chart. The dollar syntax makes adding the clickable areas to your charts very easy. There are mousemove, mouseover, mouseout and click events.

How to display date/time values on a Scatter chart

Read this HOWTO document
Show a date/time chart Line chart (but using the Scatter chart). This is an XY chart so for each point you will need an X value and a Y value. The X value is usually the date/time and the Y value is the numerical value.

How to highlight a bar on your chart

Read this HOWTO document
How to highlight a bar on your chart using empty tooltips (so no tooltip is shown). This HOWTO guide also shows you how you can use the click event to highlight the bar.

How to debug your charts with Google Chrome

Read this HOWTO document
Make use of the Chrome developer tools to debug your charts and a video that shows you how to use them. This page also details some of the debug functions in RGraph that can help you if have trouble getting your charts working.

How to get the original value from a click

Read this HOWTO document
How to get the original value from a click (in this case a Bar chart Line chart and Pie chart). The code consists of an event listener that queries the data of the Pie chart object.

How to create a combined Bar chart, Line chart and Pie chart

Read this HOWTO document
Use the CombinedChart class to make a combined Bar chart Line chart and Pie chart. The full code is given on this page for the combined chart.

How to use DOM1-style RGraph custom events

Read this HOWTO document
Use dom1 style custom RGraph events (eg the tooltip event). This example uses the draw event to add highlighting to each bar on the chart.

How to create a Gauge that updates a form

Read this HOWTO document
Different ways to update a form element when you're altering the Gauge chart. Several different methods are shown and the value represented on the Gauge chart is used to update the form text element.

How to use CSS 3D transformations

Read this HOWTO document
Use css 3D transformations in conjunction with your canvas tag to get a 3D effect. Remember that the 3D transformations are applied to your whole canvas tag. This example allows you to update the XYZ angles that are used.

How to use images as tickmarks

Read this HOWTO document
Use images as your tickmarks when using the Line chart or Scatter chart. A custom function is used to load and position the image and the canvas.

How to get crisp lines with no anti-aliasing

Read this HOWTO document
Achieve crisp lines on your canvas by applying a small anti-aliasing fix. This gives single-pixel width lines and it can also be used on any canvas - not just RGraph.

How to create a bank of Gauge charts

Read this HOWTO document
Make a set of three adjustable or animated Gauge charts (using just one canvas). The Gauge charts can be animated, adjustable or just static. You can also use separate canvas tags for each Gauge, but this example uses just one larger canvas tag.

How to use AJAX to update your charts

Read this HOWTO document
Make ajax requests using RGraph. By using ajax to update your charts you can reduce the bandwidth used, create faster pages and have those pages use less bandwidth (only the new chart data is transferred from the server to your browser instead of the whole page).

How to create a floating progress bar

Read this HOWTO document
Create a progress bar that doesn't begin at zero - a floating progress bar. This is done by using a multi-segment progress bar with the color of the first segment set as transparent.

How to create inline Bar charts and Sparklines

Read this HOWTO document
Use RGraph to create small Sparkline style inline charts. This can be done quite easily using the Line chart or Bar chart properties and this page show you two examples of such charts that are embedded in large blocks of text.

How to create a combined bar and vertical progress chart

Read this HOWTO document
Combine a Bar chart and the Vertical Progress bar to create a Bar chart with Vertical Progress bars instead of regular bars. This is a novel use of the Bar chart and the Vertical Progress Bar and can be used when you have a set of data where each entry has its own "child value".

How to make a transition effect

Read this HOWTO document
Create a transition between two charts occupying the same space. This transition uses one of the css effects that come with RGraph.

How to add events to your charts

Read this HOWTO document
Add events to your charts such as the click or mousemove events. This HOWTO takes you through step-by-step adding the event listeners to the chart using the click and the mousemove events.

How to add images to your charts

Read this HOWTO document
Add images to your chart using a variety of methods. This HOWTO demonstrates (and provides you with example code) the various methods from tooltips to css positioning.

How to add links to your charts.

Read this HOWTO document
Add links to your charts using a variety of methods. This HOWTO demonstrates (and provides you with example code) the various methods from tooltips, event listeners to a simple link around the canvas tag.

How to add the ModalDialog to your charts

Read this HOWTO document
Use the bundled ModalDialog with RGraph events. The ModalDialog can be used to show something (eg photos) or as a way to get input from the user that's triggered by clicking on the chart.