- A description of the custom text option
- Documentation for the query string data-import functions
- A utility to import data from an HTML table
- A description of formatted labels and their use
- Supporting different screen sizes with the responsive function
- A rotating StarBurst effect for a background to your charts
- Using accessible text on your charts instead of native text
- Importing data from Google Sheets
- The exec function and configuration option
- Animating RGraph properties with the animate function
- Animation and visual effects
- How to use HTML keys with your charts
- Importing data from a CSV file
- The simplified AJAX functions
- A summary of the events documentation that's available
- Combining multiple charts on a single canvas
- Fetching data from an XML file
- Using keys or legends to add information to your charts
- Updating your charts dynamically
- Getting a PNG image of your chart
- How to use the DOMContentLoaded event
- The custom events that are available in RGraph
- Read about the dynamically adjustable charts in RGraph
- Using tooltips on your charts to increase interactivity
- How to create your charts asynchronously
- Annotating your charts interactively
- Integrating RGraph with external libraries
- Information about what CSS classes are available to you
- Information about the different types of HTML5 canvas colors
- Context menus that RGraph can provide
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.
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
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 chart and
Line chart 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 -
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 -
How to use the DOMContentLoaded event
Read about using DOMContentLoaded instead of the window onload event
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 chart /
Horizontal Bar chart /
Line chart 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
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!