Features documentation

Summary: 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.

• Supporting all devices 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 StarBurst object that can be used to give your charts an animated background
  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 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.
  
  
• 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 in order to add depth to the chart.
  
  
• 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.
  
  
• 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.
  
  
• 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 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 (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.
  
  

• 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 - 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.
  
  
• 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 - toDataUrl().
  
  
• DOMContentLoaded example
  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.
  
  
• 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.
  
  
• Creating your charts asynchronously
  Using the setTimeout() function you can create charts asynchronously. It uses the setTimout() function that only emulates running two things asynchronously 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!