Sitemap
The RGraph sitemap. If you're looking for a particular page then this may help
- Website pages
- Installation documentation
- SVG chart types
- SVG HOWTO documents
- Other SVG documentation
- Canvas API references
- Canvas based HOWTO tutorials
- Other canvas documentation pages
- The canvas drawing API
- A canvas reference
- The RGraph blog
- The RGraph release notes
- Demos of RGraph charts
- Video tutorial and walk-through transcripts
- Other pages
Website pages
Installation documentation
SVG chart types
- Activity meter
- Bar chart
- Bipolar chart
- Funnel chart
- Gauge chart
- Horizontal Bar chart
- Horseshoe meter
- A Horizontal Progress bar using the Horizontal Bar chart
- Line chart
- Pie chart
- Radar chart
- Rose chart
- Scatter chart
- Segmented donut chart
- Semi-circular Progress bar
- A Vertical Progress bar created using the Bar chart
- Waterfall chart
SVG HOWTO documents
- How to use the background layers
- How to make a dual-color Line chart
- How to make formatting strings easier
- How to use global configuration values
- HOWTO guides
- How to turn a label into a link (SVG version)
- How to create a Horizontal or Vertical Progress bar
- How to create a stacked and grouped Bar chart
- How to use the RGraph.SVG.text.find() function
Other SVG documentation
Canvas API references
- Activity meter
- Bar chart
- Bipolar chart
- Donut chart
- Fuel Gauge
- Funnel chart
- Gantt chart
- Gauge chart
- Horizontal Bar chart
- Horseshoe meter
- Line chart
- Meter chart
- Odometer chart
- Pie chart
- Radar chart
- Rose chart
- Radial scatter chart
- Scatter chart
- Segmented donut chart
- Semi-circular Progress Bar
- Thermometer chart
- Vertical Progress bar
- Waterfall chart
Canvas based HOWTO tutorials
- How to get angled labels that follow your line
- How to use CSS3 animations
- How to get crisp lines on your canvas
- How to create a combined Bar, Line and Pie chart
- How to create a combined Bar and Vertical Progress bar chart
- How to use CSS3 transitions
- How to make your line clickable
- How to make a Contract/Expand transition effect
- How to use DOM1 custom events
- How to display date/time values on a Scatter chart
- How to debug your charts with Google Chrome
- How to use the dollar syntax for events
- How to dynamically add points to your Line chart
- How to add events to your charts
- How to use repeating canvas patterns
- How to create a floating progress bar
- How to create a Gauge that updates a form
- How to create a bank of Gauge charts
- How to use gradients
- How to use CSS3 gradients
- How to highlight a bar on your chart
- How to use images as your tickmarks
- How to make your line clickable (isPointInStroke)
- How to create a multi-color (based on arbitrary thresholds) Line chart
- How to turn a label into a link (canvas version)
- How to add links to your charts
- How to add the ModalDialog to your charts
- How to create a multi-chart scrolling effect with CSS transitions
- How to create a chart with PhantomJS
- How to get rounded corners on a Bar chart
- How to make a scrolling Line chart
- How to create a Bar chart that's capable of multiple select
- How to use CSS3 transitions to save space
- How to create plus/minus Bar charts and Spark lines
- How to show a custom static Y-axis
- How to create a CSS3 transitions based switch effect
- How to use the RGraph.text() API function
- How to use custom tickmarks in your charts
- How to create one-touch Line chart adjusting
- How to use CSS 3D transformations
- How to make a transition effect
- How to use AJAX to update charts
Other canvas documentation pages
- 3D charts
- Using accessible text
- Adjusting your charts
- The simplified AJAX functions
- The animate() function
- How you can annotate your charts interactively
- API documentation
- Asynchronous charts
- Types of canvas based charts
- Using the new clipping feature to easily make composite charts
- HTML5 canvas colors
- Combining charts
- Backwards compatibility
- Context menus
- CSS classes
- Importing data from a CSV file
- Custom events
- The datagrid component
- See RGraphs default set of colors.
- What is the DOMContentLoaded event?
- Animation and visual effects
- Events documentation
- The exec function
- Features documentation
- Index of howto guides
- Horizontal Progress bars
- Using HTML keys
- Canvas documentation
- Ingraph labels
- Integrating with external libraries
- Using keys or legends
- The filledAccumulative Line chart setting
- A tool that will help with margin sizing
- Miscellaneous information
- Miscellaneous documentation
- Retrieving a PNG
- Pseudo-standard events
- Accessing query string data
- The responsive function
- Version 7 of RGraph introduces scaling that makes your charts look much better. Learn about it and read some caveats here.
- Importing data from Google Sheets
- A rotating StarBurst effect
- Importing data from an HTML table
- Information about the text configuration option
- Using tooltips
- Creating dynamic tree structure menu systems
- Updating your charts dynamically
- Fetching data from an XML file
The canvas drawing API
A canvas reference
- The arc() function
- The arcTo() function
- The beginPath() function
- The bezierCurveTo() function
- The canvas element
- The clearRect() function
- The clip() function
- The closePath() function
- The createImageData() function
- How to use the canvas drawImage() function
- The ellipse() function
- The fill() function
- The fillRect() function
- The fillStyle property
- The fillText() function
- The font property
- The getContext() function
- The getImageData() function
- The getLineDash() function
- The globalAlpha property
- The globalCompositeOperation property
- The imageData object
- HTML5 canvas reference
- The isPointInPath() function
- The isPointInStroke() function
- Linear gradients
- The lineCap property
- The lineDashOffset property
- The lineJoin property
- The lineTo() function
- The lineWidth property
- The measureText() function
- The moveTo() function
- The Path2D object
- The createPattern() function
- The putImageData() object
- The quadraticCurveTo() function
- Radial gradients
- The rect() function
- The restore() function
- The rotate() function
- The save() function
- The scale() function
- The setLineDash() function
- The setTransform() function
- The shadowBlur property
- The shadowColor property
- The shadowOffsetX property
- The shadowOffsetY property
- The stroke() function
- The strokeRect() function
- The strokeStyle property
- The strokeText() function
- The textAlign property
- The textBaseline property
- The toDataURL() function
- The transform() function
- The translate() function
The RGraph blog
- 10 example charts to get started
- News and updates for 2013
- News and updates for 2015
- News and updates for 2017
- News and updates for 2018
- News and updates for 2019
- News and updates for 2020
- News and updates for 2021
- News and updates for 2022
- News and updates for 2023
- How to add "Copy to clipboard" buttons to your code examples
- Walk-through of a 100% Bar chart
- Walk-through of a basic Bar chart
- Walk-through of a dark-themed Line chart
- Walk-through of a Funnel chart demo
- Walk-through of a Horizontal Bar chart smoothed vertical line demo
- News and updates for 2024
- News and updates for 2025
- News and updates for 2026
- 9 Good looking charts
- Spotlight on the AJAX functions
- Spotlight on the CSV connector
- Dotted and dashed lines on canvas
- An example of drag and drop between canvas tags
- Examples of infographic charts
- Measuring text height using DOM elements
- The new features of the canvas v5 specification
- The prototypal JavaScript object model
- A description of Path2D objects
- SVG paths for canvas
- Why should I use semi-colons after functions
- Spotlight on the Google Sheets connector
The RGraph release notes
Demos of RGraph charts
- A 3D Bar chart with multiple rows
- A customised and adjustable Bar chart
- A Bar chart using AJAX
- A basic Bar chart
- A Bar chart with a dark background
- A Bar chart showing Google's power usage
- Favourite dog breeds
- An example of how to use images as labels
- An example of a Bar chart with an interactive key
- Bar and Line charts with a switch effect
- A demo of a logarithmic Bar chart
- A Bar that looks like the millionaire bar chart
- A Bar/Line chart using a negative horizontal margin
- A Bar chart showing new car registrations in the UK, 2010-2016
- A customised adjustable Bar chart
- A Bar chart with post-processing
- A Bar chart with a rotating background on dual canvas tags
- A segmented Bar chart
- Things to release at a wedding
- A 3D Donut chart
- A nested Donut chart progress bar
- A segmented Donut chart
- A Line chart with multiple datasets tracing sequentially
- A Line chart using the animationTraceCenter option
- A customised Gauge chart
- A Horizontal Bar chart showing popularity of languages
- A Horizontal Bar chart using the CSV reader
- A Horizontal Bar chart using formatted tooltips
- Demos of charts
- A black and purple combined Bar and Line chart
- A black Line chart
- A Line chart using the CSV reader
- A Line chart showing employee sales
- A Line chart using the Google Sheets connector
- An adjustable black Meter chart
- An adjustable Meter that looks like the Google charts Meter
- A Pie chart that retrieves JSON data via AJAX
- A basic Pie chart
- A grey Pie chart
- A horseshoe Pie chart
- A pink Pie chart
- A progress-bar Pie/Donut chart
- A non-filled Radar chart
- A 3D rose chart
- A basic Rose chart
- A Radial Scatter chart using the CSV reader
- A Scatter chart using date/time values
- A vertical line chart
- The earnings of Britain's top paid boss
- A dark and graduated blue Bar chart
- A combined Bar and Line chart
- An SVG Funnel chart showing the key stages of plan CD1
- An SVG Horizontal Bar chart showing income for Star Tech
- A black and orange SVG Horizontal Bar chart
- An SVG Horizontal Bar chart that's useful for an infographic
- A mock-up of a Google Analytics style dashboard.
- An SVG black and white Line chart
- A predominantly Line chart based status dashboard
- An SVG dynamically updating SVG Line chart
- An SVG Line chart using the trace() effect
- An SVG Line chart using transparency
- An SVG version of an older filled demo chart
- An SVG Line with a simple look and feel
- A Line chart with a highlighted section
- An SVG Line chart inspired by a chart on the NVD website
- A graduated Line using the trace effect
- An SVG Line chart showing revenue over time
- A mixed Line/spline chart and a Bar chart
- An SVG Line chart showing UFO sightings over the past century.
- SVG Pie charts that are configured to look like meters
- An SVG Pie chart configured to look like a Meter
- An SVG Pie chart using the Google Sheets connector
- An SVG stacked Rose chart with unequal segment sizes
Video tutorial and walk-through transcripts
- Walk-through of a Bar chart that has vertical borders on the bars
- Walk-through of a significantly customised Bar chart
- Walk-through of a dynamically scrolling dual-color Line chart
- Introductory and tutorial videos about RGraph and its features
- Introduction to the new scaling feature thats part of version 7
- A description of how to use the new, version 6.17, clip property
- An overview of the new RGraph HTML datagrid
- How to use the responsive function in RGraph
- Walk-through of the scatter-trendline demo
- How to add "Copy to clipboard" buttons to your code examples
- Walk-through of a Funnel chart demo
- Walk-through of a Horizontal Bar chart smoothed vertical line demo
- Walk-through of a dark-themed Line chart
- Walk-through of a 100% Bar chart
- Walk-through of a basic Bar chart