Features documentation
-
A description of 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
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 (what 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
New in version 6.03 is theHTML
table import tool. This does what you might expect and allows you to easily fetch data from anHTML
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
New to version 6.0 of RGraph is the capability for labels to be templates - in much the same way as to 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
Long overdue in RGraph this is a new feature in 2019 - much betterresponsive
control. Previously you could useCSS
to control the size of yourcanvas
but now, with theresponsive
method, you have much better control over how your chart appears.
-
A rotating StarBurst effect for a background to your charts
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 the newDOM
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
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 totally up-to-date with whatever the data is in your spreadsheet.
-
The exec function and configuration option
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
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 thecanvas
and then adding extra sections to add depth to the chart.
-
Animating RGraph properties with the animate function
RGraph now has ananimate
function that allows you to animate the numeric configuration properties. Things such as margin andmarginInner
values can all be animated and this function allows you to add to or create entirely new effects.
-
Animation and visual effects
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 ofCSS
effects that you can apply to anycanvas
and there's also aCSS
Animations library available.
-
How to use HTML keys with your charts
An alternative tocanvas
keys - these keys are built with standardHTML
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
AnAJAX
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 about theAJAX
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 exampleRGraph.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
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
Information on combining charts on the samecanvas
. Commonly this involves the Bar and Line charts but you can combine other types of chart too - such as meters/gauges and progress bars.
-
Pseudo-standard events that are available in RGraph
How you can add events to your charts using the RGraph configuration properties andDOM1
styles. If your needs are simple this is a very easy way to add a click or mousemove event to your chart.
-
Fetching data from an XML file
How to useAJAX
in conjunction withXML
to fetch data from the server. This example shows you how you can fetch anXML
file and then use the browser-basedXML
parsing to extract data from that file. There's also a set of quickAJAX
functions (egRGraph.AJAX.getJSON
) that you can use to fetch data from different types of files.
-
Using keys or legends to add information 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
andmargin
. This determines the positioning of the key - either in the margin or on the main part of the chart.
-
Updating your charts dynamically
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
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 nativecanvas
function -toDataUrl
.
-
How to use the DOMContentLoaded event
TheDOMContentLoaded
event can be used instead of thewindow.onload
event to speed up your page. This event fires after theHTML
code of the page has been loaded and theDOM
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
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
Certain chart types can be interactively adjusted. This includes the Meters and the Bar/Horizontal Bar/Line charts and others too. By utilising the Adjusting feature you can make interactive dashboards that control devices as well as report information.
-
Using tooltips on your charts to increase interactivity
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
Using thesetTimeout
function you can create charts asynchronously. It uses thesetTimeout
function that only emulates running two things asynchronously but it can still increase the perceived speed of your page(s).
-
Annotating your charts interactively
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
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
This page describes the various RGraph relatedCSS
classes that you can use. There are lots of classes available which you can use to control the appearance of charts and the tooltips (for example).
-
Information about the different types of HTML5 canvas colors
Find out how colors can be specified with RGraph (andcanvas
in general). Many of the colors can be used in yourCSS
files too (not the gradients though).
-
Context menus that RGraph can provide
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!