Features documentation

A description of the custom text option

Read more about the custom text option
If you want to add some custom text to your charts you have two options - you can use the RGraph.text() function directly or you can use this option to specify the text inside your configuration.

Documentation for the query string data-import functions

Read the documentation for the query string functions
New in version 6.06 are the query string import functions. These allow you to easily retrieve data from the query string of the URL (the part that comes after the ? in the URL). This data can then be used to create your charts.

A utility to import data from an HTML table

Read about importing data from an HTML table
New in version 6.03 is the HTML table import tool. This does what you might expect and allows you to easily fetch data from an HTML table that's on the same page as your chart(s). This data can then be used to create those charts.

A description of formatted labels and their use

Read about using formatted labels
New to version 6.0 of RGraph is the capability for labels to be templates - in much the same way as how tooltip templates work. You simply specify a single string with certain macros in it and RGraph will replace those macros with the relevant values.

Supporting different screen sizes with the responsive function

Read the responsive function documentation
Long overdue in RGraph this is a new feature in 2019 - much better responsive control. Previously you could use CSS to control the size of your canvas but now, with the responsive method, you have much better control over how your chart appears.

A rotating StarBurst effect for a background to your charts

Learn how to use the StarBurst effect
Formerly, this was a standalone function that wasn't really using "the RGraph way" of doing objects. It now, however, has been converted and essentially re-written so that it's far easier to use (and still remains standalone). The basic code to employ this is small and is shown on the page. There's also a reference to all of the options that are available to you.

Using accessible text on your charts instead of native text

Read about accessible text vs native canvas text
Read about the new DOM text feature of RGraph that you can use to get better-looking text. In addition to being better looking, you can select and copy text from the charts (such as titles) so it acts more like normal text.

Importing data from Google Sheets

Learn how to import data from Google Sheets
Read about how to use the Google Sheets connector to import data from your Google Docs spreadsheet. By using this you can create very dynamic charts that are 100% up-to-date with whatever the data is in your spreadsheet.

The exec function and configuration option

Read about the exec function
The exec function and configuration option allow you to embed code in your chart's configuration. You might use this to retrieve data from another part of your page that's loaded after your chart.

3D JavaScript charts that are available in RGraph

Read about the 3D support in RGraph
Examples of the 3D charts that are available in RGraph. 3D charts are a relatively recent addition to RGraph and are achieved by stretching or skewing the canvas and then adding extra sections to add depth to the chart.

Animating RGraph properties with the animate function

Learn how to use the animate function
RGraph now has an animate function that allows you to animate the numeric configuration properties. Things such as margin and marginInner values can all be animated and this function allows you to add to or create entirely new effects.

Animation and visual effects

Read about the animations and effects that are available
Details of animations and effects that are available in RGraph. Practically all of the RGraph charts have their own effects available, there's a set of CSS effects that you can apply to any canvas and there's also a CSS Animations library available.

How to use HTML keys with your charts

How to use HTML keys
An alternative to canvas keys - these keys are built with standard HTML elements. Because of that, you might find these easier to work with - especially if you have to add events to either the whole key or just specific elements of the key.

Importing data from a CSV file

Importing data from a CSV file
An AJAX CSV reader that's useful for getting data from server-based files. Doing this is a convenient way of fetching (or updating) data without you having to refresh the page.

The simplified AJAX functions

Learn how to use the basic AJAX functions
Learn about the AJAX functions that are part of the core RGraph common library. These functions facilitate fetching data (or new data) from your server. Using these functions (for example RGraph.AJAX.getJSON ) can enable you to update your chart without having to refresh the page - automatically if necessary.

A summary of the events documentation that's available

Read the events documentation pages
An overview of the various events docs. RGraph has various ways of adding events to your charts which is due to the long evolution and age of the library. This page contains pointers to the documentation pages of all of the different ways.

Combining multiple charts on a single canvas

Learn how to combine charts
Information on combining charts on the same canvas. Commonly this involves the Bar and Line charts but you can combine other types of charts too - such as meters/gauges and progress bars.

Fetching data from an XML file

Read about the AJAX functions
How to use AJAX in conjunction with XML to fetch data from the server. This example shows you how you can fetch an XML file and then use browser-based XML parsing to extract data from that file. There's also a set of quick AJAX functions (eg RGraph.AJAX.getJSON ) that you can use to fetch data from different types of files.

Using keys or legends to add information to your charts

Read about adding keys to your charts
How you can use keys to help you and your users to identify elements and datasets on your chart. Keys can be in two formats - graph and margin. This determines the positioning of the key - either in the margin or on the main part of the chart.

Updating your charts dynamically

Learn how to dynamically update your charts
How you can make your charts dynamic - in this case, a scrolling Line chart is demonstrated. There's a fair amount of code involved but there's a full example shown on this page that you can make use of.

Getting a PNG image of your chart

Get a PNG representation of your chart
This shows you how you can get a PNG image of your chart. You could then save this image and use it like a regular image. The function that retrieves the image is a native canvas function - toDataUrl.

How to use the DOMContentLoaded event

Read about using DOMContentLoaded instead of the window onload event
The DOMContentLoaded event can be used instead of the window.onload event to speed up your page. This event fires after the HTML code of the page has been loaded and the DOM constructed but before any superfluous assets have been loaded so it has the potential to make your pages faster to load.

The custom events that are available in RGraph

Learn about RGraphs custom events
Documentation about the RGraph events that are available. These are RGraph events and allow you to extend the interactivity of your charts.

Read about the dynamically adjustable charts in RGraph

Read about the adjusting functionality
Certain chart types can be interactively adjusted. This includes the Meters and the Bar/Horizontal Bar/Line charts and others too. By utilising the adjustable property you can make interactive dashboards that control devices as well as report information.

Using tooltips on your charts to increase interactivity

Learn about the tooltips feature
Tooltips are probably the most popular and useful of all of the features and can be used to great effect to provide extra information about your chart and the information that it represents.

How to create your charts asynchronously

Read how to make asynchronous charts
Using the setTimeout function you can create charts asynchronously. It uses the setTimeout function that only emulates running two things asynchronously but it can still increase the perceived speed of your page(s).

Annotating your charts interactively

Learn about the annotating feature
Using the annotation feature you can draw and scribble all over your charts! This can be useful in presentations to highlight some element or area of your charts - or you could just use it to have fun!

Integrating RGraph with external libraries

Read about RGraphs integration options
Using the ModalDialog that's bundled with RGraph. This can be used either as part of RGraph or it can also be used standalone. An ideal use of this might be a login link which then pops up a login form in a dialog.

Information about what CSS classes are available to you

Read the list of CSS classes that are available
This page describes the various RGraph-related CSS classes that you can use. There are lots of classes available which you can use to control the appearance of charts and tooltips (for example).

Information about the different types of HTML5 canvas colors

Read about the color specifiers that you can use
Find out how colors can be specified with RGraph (and canvas in general). Many of the colors can be used in your CSS files too (not the gradients though).

Context menus that RGraph can provide

Read how to use context menus
Context menus can be used to add extra interactivity to your charts or they can be used to switch between different charts. Naturally, they can also control other elements on the page - so they're very versatile!