RGraph: HTML5 canvas graph library - Miscellaneous documentation

Canvas fallback content and visually impaired users

When using the canvas element you should be aware of the accessibility of your graphs, for example where vision limited users are concerned. Screen readers, for example, may not be able to convert a graph into something that is reasonable, so you should consider doing this yourself, possibly using the canvas fallback content (ie the content in between canvas tags). A possible example would be to put a table of data inside the canvas tag that the graph on the canvas represents. Doing this goes a long way towards making the data available to everyone.

Using a DIVs contents as a tooltip

Instead of supplying the HTML in your Javascript, which may get a little unwieldy, you can also specify the ID of a DIV that should be used as the tooltip. Instead of giving the HTML, simply specify (for example) id:myDiv as your tooltip, and RGraph will attempt to use that DIVs contents as the tooltip. Eg:

myBar.Set('chart.tooltips', ['id:myDiv', ...])

Only the content of the DIV is used (ie the .innerHTML), not the DIV itself. So any CSS that you apply to it will be ignored. This does mean however that you can safely set display: none on it, so that it's not visible to the user. An example of this method in action is the first line chart.

Upper and lower limits for horizontal bars

If you don't wish to specify an upper or lower limit for horizontal bars, and you just want them to extend to the upper or lower limits of the graph, whatever they may be, you can specify null for the value determining how far they extend. For cases where the X axis is in the middle and you're specifying a negative start value, or you want the bar to extend all the way to the bottom, you can simply specify an arbitrary length (eg -999999). Eg:

myBar.Set('chart.background.hbars', [[0, null, 'green'], [0,-999999,'red']]);

Setting the canvas width and height

To set the canvas width and height you must use the HTML width/height attributes and NOT CSS. If you do use CSS, the canvas will be scaled, and not enlarged, to fit the new width/height. Eg:

<canvas id="myCanvas" width="200" height="100">[No canvas support]<canvas>

RGraph and Opera

While Opera (and other older browsers) supports the canvas tag, it doesn't yet support the shadow or text APIs. Your graphs will therefore be displayed, albeit without any shadows or text.

RGraph and Microsoft Internet Explorer

You can now use RGraph with Internet Explorer 8 in conjunction with ExCanvas, (which brings a degree of <canvas> support to MSIE). Bear in mind though that shadows are not available.

Debugging tips

If you're having a hard time debugging your graph, try these:

MSIE and the ModalDialog

Microsoft Internet Explorer (8) only supports fixed positioning when used in conjunction with a DOCTYPE. Therefore when using Microsoft Internet Explorer with the ModalDialog, you should specify a DOCTYPE, eg:

<!DOCTYPE html >

Double click context menus

Windows Opera, Windows Safari, Mac Safari and Mac Firefox all attach the context menu to the double click event (left mouse button), not the right, in order to make it more reliable.