List of Features and examples of them that RGraph supports
These are some of the features of RGraph. There are example pages included with the RGraph download that demonstrate some of the features and you can also see them here.
- Using normal text instead of canvas text for better looking text
Read about the new DOM text feature of RGraph which 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.
- 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 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 charts configuration. You might use this to retrieve data from another part of your page that's loaded after your chart.
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 in order to add depth to the chart.
RGraph now has an
animate()function that allows you to animate the numeric configuration properties. Things such as margin and hmargin values can all be animated and this function allows you to add to or create entirely new effects.
- Configuring RGraph using JSON
How to use JSON to configure RGraph instead of chaining
set()functions together (the former standard way - which still works if you wish to use it). The new JSON method is prettier though and is a bit more versatile. It's also the way that all of the RGraph examples are in so if you're reading the documentation this method will probably make more sense.
- 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 of CSS effects that you can apply to any canvas and there's also a CSS Animations library available.
- Using HTML keys in charts
An alternative to canvas based 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.
- The CSV reader/connector
An AJAX based CSV reader 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.
- 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.
- Summary of events docs
An overview of the various events docs. RGraph has various different ways of adding events to your charts which comes the long evolution and age of the library. This page contains pointers to the documentation pages of all of the different ways.
- The pseudo-standard events dollar syntax
An easy way to add events for specific elements on your chart. Because canvas elements don't have event listeners themselves they have to be emulated for you by RGraph. You can read about them here.
- Combining charts
Information on combining charts on the same canvas. 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
How you can add events to your charts using the RGraph configuration properties and DOM1 styles. If you needs are simple this is a very easy way to add a click or mousemove event event to your chart.
- Displaying financial data
How to use the Scatter chart to show financial data. This is essentially an XY chart so you need to have a pair of values for each point. If you want an XY style chart you need to use the Scatter chart with a connecting line - the Line chart has no concept of an X axis scale.
- Fetching data from an XML file (AJAX)
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 the 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 file.
- Variable margin sizes
Previous versions of RGraph had just one margin setting - now there's four: top/bottom/left/right. This allows you to get more from the space that's available on the canvas - reducing wasted whitespace.
Examples of using keys in your charts
How you can use keys to help you and you 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.
- Interactive keys
You can make your keys clickable to make it easier for your users to identify elements on your chart. The interactive key is supported by both
graphmodes and there is also an event available to use.
- Interactive keys
- 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.
- Retrieving a PNG of your charts
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 actually a native canvas function -
- DOMContentLoaded example
The DOMContentLoaded event can be used instead of the
window.onloadevent 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.
- Custom RGraph events
Documentation about the RGraph events that are available. These are RGraph events and give you the opportunity to extend the interactivity of your charts.
- Adjusting your charts interactively
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 reporting information.
- Using tooltips in your charts
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.
- Resizing your charts
How to use the resizing feature of RGraph. Resizing can be used to increase the size of your chart temporarily, perhaps to bring more attention to it during a presentation.
- Creating your charts asynchronously
setTimeout()function you can create charts asynchronously. It uses the
setTimout()function that only emulates asynchronicity but it can still increase the perceived speed of your page(s).
- Annotating your charts
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.
- Available CSS classes
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 the tooltips (for example).
- About canvas color definitions
Find out about 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
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!