Features documentation

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.

• A utility to import 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
  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 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
  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 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
  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 the canvas and then adding extra sections to add depth to the chart.
  
  
• Animating RGraph properties with 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
  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
  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.
  
  
• Importing data from a CSV file
  An AJAX-based 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 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
  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 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 that are available in RGraph
  How you can add events to your charts using the RGraph configuration properties and DOM1 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 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 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 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
  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 native canvas function - toDataUrl().
  
  
• How to use the DOMContentLoaded 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
  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 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
  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 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).
  
  
• Information about the different types of HTML5 canvas colors
  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
  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!