Sitemap
- Website pages
- Installation documentation
- SVG chart types
- SVG HOWTO documents
- Other SVG documentation
- Canvas chart types
- Canvas based HOWTO tutorials
- Adjustable canvas charts
- Other canvas documentation pages
- The canvas drawing API
- A canvas reference
- The RGraph blog
- The RGraph release notes
- Demos of RGraph charts
- Other pages
Website pages
Installation documentation
SVG chart types
- SVG Activity meter API reference
- SVG Bar chart API reference
- SVG Bipolar chart API reference
- SVG Funnel chart API reference
- SVG Gauge chart API reference
- SVG Horizontal Bar chart API reference
- SVG Horseshoe meter API reference
- A Horizontal Progress bar using the Horizontal Bar chart
- SVG Line chart API reference
- SVG Pie chart API reference
- SVG Radar chart API reference
- SVG Rose chart API reference
- SVG Scatter chart API reference
- SVG Segmented donut chart API reference
- SVG Semi-circular Progress bar API reference
- A Vertical Progress bar created using the Bar chart
- SVG Waterfall chart API reference
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 chart types
- Activity meter API reference
- Bar chart API reference
- Bipolar chart API reference
- Donut chart API reference
- Fuel Gauge API reference
- Funnel chart API reference
- Gantt chart API reference
- Gauge chart API reference
- Horizontal Bar chart API reference
- Horseshoe meter API reference
- Line chart API reference
- Meter chart API reference
- Odometer chart API reference
- Pie chart API reference
- Radar chart API reference
- Rose chart API reference
- Radial scatter chart API reference
- Scatter chart API reference
- Segmented donut chart API reference
- Semi-circular Progress Bar API reference
- Thermometer chart API reference
- Vertical Progress bar API reference
- Waterfall chart API reference
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 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
Adjustable canvas charts
- Adjusting your charts: Activity meter
- Adjusting your charts: Bar chart
- Adjusting your charts: Fuel chart
- Adjusting cyour harts: Gantt chart
- Adjusting your charts: Gauge chart
- Adjusting your charts: Horizontal Bar chart
- Adjusting your charts: Horseshoe meter
- Adjusting your charts: Horizontal Progress bar
- Adjusting your charts: Line chart
- Adjusting your charts: Meter chart
- Adjusting your charts: Odometer chart
- Adjusting your charts: Segmented donut chart
- Adjusting your charts: Semi-circular Progress
- Adjusting your charts: Thermometer charts
- Adjusting your charts: Vertical Progress bar
- Adjusting your charts
Other canvas documentation pages
- 3D charts
- Using accessible text
- The simplified AJAX functions
- The animate() function
- How you can annotate your charts interactively
- API documentation
- Asynchronous charts
- Types of canvas based charts
- HTML5 canvas colors
- Combining charts
- Backwards compatibility
- Context menus
- CSS classes
- Importing data from a CSV file
- Custom events
- What is the DOMContentLoaded event?
- Animation and visual effects
- Events documentation
- The exec function
- Features documentation
- Index of howto guides
- Horizontal Progress bars API reference
- 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
- Importing data from Google Sheets
- A rotating StarBurst effect
- Importing data from an HTML table
- Information about the text configuration option
- Using tooltips
- Updating your charts dynamically
- Fetching data from an XML file
The canvas drawing API
- The drawing API background object
- The drawing API Circle object
- The drawing API Image object
- The drawing API
- The drawing API Marker1 object
- The drawing API Marker2 object
- The drawing API Marker3 object
- The drawing API Poly object
- The drawing API Rect object
- The drawing API Text object
- The drawing API X-axis object
- The drawing API Y-axis object
A canvas reference
- Canvas reference: The arc() function
- Canvas reference: The arcTo() function
- Canvas reference: The beginPath() function
- Canvas reference: The bezierCurveTo() function
- Canvas reference: The canvas element
- Canvas reference: The clearRect() function
- Canvas reference: The clip() function
- Canvas reference: The closePath() function
- Canvas reference: The createImageData() function
- Canvas reference: How to use the canvas drawImage() function
- Canvas reference: The ellipse() function
- Canvas reference: The fill() function
- Canvas reference: The fillRect() function
- Canvas reference: The fillStyle property
- Canvas reference: The fillText() function
- Canvas reference: The font property
- Canvas reference: The getContext() function
- Canvas reference: The getImageData() function
- Canvas reference: The getLineDash() function
- Canvas reference: The globalAlpha property
- Canvas reference: The globalCompositeOperation property
- Canvas reference: The imageData object
- HTML5 canvas reference
- Canvas reference: The isPointInPath() function
- Canvas reference: The isPointInStroke() function
- Canvas reference: Linear gradients
- Canvas reference: The lineCap property
- Canvas reference: The lineDashOffset property
- Canvas reference: The lineJoin property
- Canvas reference: The lineTo() function
- Canvas reference: The lineWidth property
- Canvas reference: The measureText() function
- Canvas reference: The moveTo() function
- Canvas reference: The Path2D object
- Canvas reference: The createPattern() function
- Canvas reference: The putImageData() object
- Canvas reference: The quadraticCurveTo() function
- Canvas reference: Radial gradients
- Canvas reference: The rect() function
- Canvas reference: The restore() function
- Canvas reference: The rotate() function
- Canvas reference: The save() function
- Canvas reference: The scale() function
- Canvas reference: The setLineDash() function
- Canvas reference: The setTransform() function
- Canvas reference: The shadowBlur property
- Canvas reference: The shadowColor property
- Canvas reference: The shadowOffsetX property
- Canvas reference: The shadowOffsetY property
- Canvas reference: The stroke() function
- Canvas reference: The strokeRect() function
- Canvas reference: The strokeStyle property
- Canvas reference: The strokeText() function
- Canvas reference: The textAlign property
- Canvas reference: The textBaseline property
- Canvas reference: The toDataURL() function
- Canvas reference: The transform() function
- Canvas reference: The translate() function
The RGraph blog
- 10 example charts to get started
- 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
- 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
- RGraph demo: A 3D Bar chart with multiple rows
- RGraph demo: A customised and adjustable Bar chart
- RGraph demo: A Bar chart using AJAX
- RGraph demo: A basic Bar chart
- RGraph demo: A Bar chart with a dark background
- RGraph demo: A Bar chart showing Google's power usage
- RGraph demo: Favourite dog breeds
- RGraph demo: An example of how to use images as labels
- RGraph demo: An example of a Bar chart with an interactive key
- RGraph demo: Bar and Line charts with a switch effect
- RGraph demo: A demo of a logarithmic Bar chart
- RGraph demo: A Bar that looks like the millionaire bar chart
- RGraph demo: A Bar/Line chart using a negative horizontal margin
- RGraph demo: A Bar chart showing new car registrations in the UK, 2010-2016
- RGraph demo: A customised adjustable Bar chart
- RGraph demo: A Bar chart with post-processing
- RGraph demo: A Bar chart with a rotating background on dual canvas tags
- RGraph demo: A segmented Bar chart
- RGraph demo: Things to release at a wedding
- RGraph demo: A 3D Donut chart
- RGraph demo: A nested Donut chart progress bar
- RGraph demo: A segmented Donut chart
- RGraph demo: A Line chart with multiple datasets tracing sequentially
- RGraph demo: A Line chart using the animationTraceCenter option
- RGraph demo: A customised Gauge chart
- RGraph demo: A Horizontal Bar chart showing popularity of languages
- RGraph demo: A Horizontal Bar chart using the CSV reader
- RGraph demo: A Horizontal Bar chart using formatted tooltips
- Demos of charts
- RGraph demo: A black and purple combined Bar and Line chart
- RGraph demo: A black Line chart
- RGraph demo: A Line chart using the CSV reader
- RGraph demo: A Line chart showing employee sales
- RGraph demo: A Line chart using the Google Sheets connector
- RGraph demo: An adjustable black Meter chart
- RGraph demo: An adjustable Meter that looks like the Google charts Meter
- RGraph demo: A Pie chart that retrieves JSON data via AJAX
- RGraph demo: A basic Pie chart
- RGraph demo: A grey Pie chart
- RGraph demo: A horseshoe Pie chart
- RGraph demo: A pink Pie chart
- RGraph demo: A progress-bar Pie/Donut chart
- RGraph demo: A non-filled Radar chart
- RGraph demo: A 3D rose chart
- RGraph demo: A basic Rose chart
- RGraph demo: A Radial Scatter chart using the CSV reader
- RGraph demo: A Scatter chart using date/time values
- RGraph demo: A vertical line chart
- RGraph demo: The earnings of Britain's top paid boss
- RGraph demo: A dark and graduated blue Bar chart
- RGraph demo: A combined Bar and Line chart
- RGraph demo: An SVG Funnel chart showing the key stages of plan CD1
- RGraph demo: An SVG Horizontal Bar chart showing income for Star Tech
- RGraph demo: A black and orange SVG Horizontal Bar chart
- RGraph demo: An SVG Horizontal Bar chart that's useful for an infographic
- RGraph demo: A mock-up of a Google Analytics style dashboard.
- RGraph demo: An SVG black and white Line chart
- RGraph demo: A predominantly Line chart based status dashboard
- RGraph demo: An SVG dynamically updating SVG Line chart
- RGraph demo: An SVG Line chart using the trace() effect
- RGraph demo: An SVG Line chart using transparency
- RGraph demo: An SVG version of an older filled demo chart
- RGraph demo: An SVG Line with a simple look and feel
- RGraph demo: A Line chart with a highlighted section
- RGraph demo: An SVG Line chart inspired by a chart on the NVD website
- RGraph demo: A graduated Line using the trace effect
- RGraph demo: An SVG Line chart showing revenue over time
- RGraph demo: A mixed Line/spline chart and a Bar chart
- RGraph demo: An SVG Line chart showing UFO sightings over the past century.
- RGraph demo: SVG Pie charts that are configured to look like meters
- RGraph demo: An SVG Pie chart configured to look like a Meter
- RGraph demo: An SVG Pie chart using the Google Sheets connector
- RGraph demo: An SVG stacked Rose chart with unequal segment sizes