Does dataviz matter?
If you've ever questioned why data visualisation matters so much then read on. Charts and other kinds of visual representations of data might seem as though they're unnecessary to you - but I can assure you that you're very special! Most people will want a chart or two sprinkled liberally across your website to make reading and interpreting your data significantly easier.
Data visualisation can reveal important trends in your data - such as a downward trend in a Line chart. Something that you might not notice if you were just looking at the raw data - or you might gloss over it thinking that it wasn't as significant as it actually is.

As an example, you can compare the chart above to the set of numbers to the left. With the chart, it's clear to see that the datasets are roughly equal to each other. There's some variation from hour to hour but there isn't a dataset that sticks out as being either the greatest or smallest. There does seem to be a spike at 6 am for the darker blue dataset - but depending on your data and what it represents you might be able to put mark this as an anomaly.
Plus - the chart looks nicer on your webpage than a table full of numbers. You may think that aesthetics don't matter and in some cases, you'd be correct. But if the data is sat on the front page of your company's website - you'd be wrong (and most managers would think so too!).
Choosing the right type of visualisation
Choosing the correct type of visualisation for your data is important! For example, if you have a dataset of time-based data then a Line chart (or a Scatter chart with a connecting line in RGraph) may be a good chart type to choose.
You could use a Bar chart - but a Line chart would probably be a better choice.
In this case, there would clearly be some wrong types of chart - a Pie chart or a Radar chart, for example. A Line chart just conveys the information better and is easier for the user to understand.
Here are some questions to ask yourself when you're picking a type of visualisation:
1. Do I need to compare my data values?
To compare data values there are certain types of chart that will do this for you:
- (Horizontal) Bar charts
- Line charts
- Scatter charts (with or without a line)
- Radar charts
2. Do I want to show the proportional make-up of a whole?
Say you have a set of data and you want to show the total of that data plus the make-up of it by the individual parts. For that you could use these types of charts:
- Stacked Bar charts
- Accumulative filled Line charts (stacked area charts)
- Stacked progress bars
- Stacked Waterfall charts
3. Do I need to see the distribution of my dataset?
If you have a dataset and you need to see any outlying data points or anomalous values that fall outside the norm then these kinds of charts can be useful:
- Scatter charts
- (Horizontal) Bar charts
- Line charts
4. Do I want to see trends in my dataset?
If your data is time-based then there are certain charts that will prove to be very good at giving clarity to the data:
- Line charts
- (Horizontal) Bar charts
- Scatter charts (with or without trend lines)
- Waterfall charts
5. Do I need to see the relationship between values?
Charts that show the relationship(s) between two or more variable pieces of data. These types of charts can be used to show how one value affects another in a positive or negative way (or has no effect at all).
- Scatter chart
- Bubble chart
- Line charts
6. Do I need to show a single measurement or value?
RGraph has a variety of different meters and progress bars available to you. Some can be significantly customised to look very different from the default appearance.
Some more traditional charts can be customised to act as a meter-type chart as well as the default types eg:
- Activity meters
- Fuel gauges
- Gauge charts
- Horseshoe meters
- Meter charts
- Pie charts
- Progress bars (horizontal or vertical)
- Segmented donut charts
- Semi-circular progress charts
Other types of charts can also be customised to look like Meter charts and demonstrate a single value (in fact the majority can be customised in some way). Such charts include:
- (Horizontal) Bar charts
- Pie charts
- Line charts
What types of visualisations does RGraph support?
RGraph supports 21 base types of canvas
charts and 11 base types of SVG
charts.
With both SVG
and canvas
the base types can be manipulated to
produce further types of charts - such as the SVG
Bar chart can be used
to make a vertical progress bar and the SVG
Pie chart could be used to
make a Donut chart.
Here are the types of charts that RGraph supports.
- Activity meters
- Donut charts
- Gauge charts
- Horizontal Progress bars
- Meter charts
- Radar charts
- Scatter charts
- Thermometer charts
- Bar charts
- Fuel gauges
- Gantt charts
- Horseshoe meters
- Odometer charts
- Radial Scatter charts
- Segmented donut charts
- Vertical Progress bars
- Bipolar charts
- Funnel charts
- Horizontal Bar charts
- Line charts
- Pie charts
- Rose charts
- Semi-circular Progress bars
- Waterfall charts
Activity meters
The Activity meter is a circular gauge-style chart that can be used to show one or more values as a proportion of the whole - in a circular fashion. It's new in 2021 and supports adjusting, tooltips and animations.
Available for: svg canvas
Bar charts
Bar charts are a mainstay of charting - possibly being one of the (if not the) most popular types of chart. You can use it to compare a single dataset or multiple datasets with the grouped or stacked variants.
They can show individual items on the X-axis
or time (eg days in a month
or hours in a day).
Available for: svg canvas
Bipolar charts
Bipolar charts may be more commonly known as Age Frequency charts or side-by-side charts.
They can show a pair of datasets side-by-side to make comparison easy. An example use would be to compare two years' worth of sales figures.
You could also use a vertical stacked or grouped Bar chart in this case as well.
Available for: svg canvas
Donut charts
Donut charts are a slight variation on Pie charts. Essentially they're a Pie chart with the center missing.
They can be used to compare multiple datasets like this example in the download: (donut-nested2.html).
Available for: svg canvas
Fuel charts
Fuel charts are a simple gauge that mimics a Fuel Gauge. It can only show a single value but does so with an aesthetic that may be more suitable to your website or situation.
Available for: canvas
Funnel charts
Funnel charts can be used to show the decreasing (or increasing) level of a measurement - such as stock in a firm.
Funnel charts are commonly used in companies as part of financial reports.
Available for: svg canvas
Gantt charts
Another chart that is commonly used inside companies - in this case as a part of project management to indicate and track personnel and their tasks.
Available for: canvas
Gauge charts
A meter type chart that can be used to indicate a value or level (eg speed).
The Gauge chart can be made to be interactive or can show multiple needles. The default appearance is quite different from the image that you see here.
Available for: svg canvas
Horizontal Bar charts
Horizontal Bar charts can be used when your labels are too big to fit on a regular Bar chart (or if you just prefer them!).
Other than the orientation they're much the same as regular Bar charts.
They can be stacked or grouped to show multiple data points.
Available for: svg canvas
Horseshoe meter
A Horseshoe Meter is a type of chart that can be used to show a single value.
Available for: svg canvas
Horizontal Progress bars
A Horizontal Progress bar is a meter type of chart that can be used to show a value.
Normally they might only show a single value but a variation is the stacked Horizontal Bar chart - so showing multiple values is possible (eg web browser market share).
Available for: svg canvas
Line charts
Line charts are another mainstay of charting - they're good for showing one or more datasets. Particularly if the datasets are time-based as the left-to-right nature of the chart indicates to most people a linear progression.
Multiple sets of data can be shown, they can be filled or not,
curvy (spline
charts), stepped or angular and the filled variations can
be accumulative or not.
By using a pair of datasets and making the color of the bottom one transparent you can create a range chart.
Available for: svg canvas
Meter charts
Meter charts are one of the meters that are available in RGraph - they can show a measurement and can be made to be adjustable (ie interactive) so they can be used as a way of providing user feedback.
The Meter chart is quite versatile and can be significantly customised so instances of it can have significantly differing appearances.
Available for: canvas
Odometer charts
Odometer charts are a fully circular meter that can show a value. With the
needleExtra
property, you can show extra needles too.
It can be adjusted by using the adjustable
property.
Available for: canvas
Pie charts
Pie charts are a popular chart type (though they do have drawbacks) for showing values in relation to others (via the size of the segment sizes).
By using the donut
property you can turn the Pie chart into a
donut chart - which you can then nest which then allows you to show
multiple datasets (or you just overlay Pie charts on top of each other
in ever decreasing sizes).
Available for: svg canvas
Radar charts
Using a Radar chart you show your data in a circular fashion. The magnitude of each data point is indicated by its distance from the center.
The Radar chart can be filled, can display multiple datasets and the background "grid" can be circular or angled.
Available for: svg canvas
Rose charts
Rose charts are similar to Radar charts but each data point is a filled arc that emanates from the center of the chart.
The canvas
Rose chart supports regular, stacked and non-equi-angular
modes
while the SVG
Rose chart supports those three modes as well as a
non-equi-angular
+ stacked
mode.
These different modes make the Rose chart quite versatile when it comes to showing multiple types of data.
Available for: svg canvas
Radial Scatter charts
A variation of regular Scatter charts that shows the data on a circular background.
Like the regular Scatter chart, each point is made up of two numbers - one being used for the angle (the circular position of the point).
The other is used to calculate the appropriate distance from the center.
Available for: canvas
Scatter charts
Scatter charts (sometimes also known as XY charts) are used to plot points on a Bar/Line chart style background.
The RGraph Scatter chart is quite versatile and can be used to also show a box/whisker plot (also known as a candlestick plot), you can have a line that connects the points and you can have full crosshairs drawn onto the chart.
Available for: svg canvas
Segmented donut
The Segmented donut is another meter type of chart where the value is indicated by the extent of the bar.
Available for: svg canvas
Semi-circular Progress bar
The Semi-circular Progress bar is another meter type of chart where the value is indicated by the extent of the bar.
There's both a canvas
and SVG
version of this chart but the canvas
version
supports setting the start and endpoints of the bar.
Available for: svg canvas
Thermometer charts
The Thermometer chart is much like a Vertical Progress bar - but shaped like a thermometer.
The Thermometer chart doesn't support much in the way of configuration, but does support tooltips and can be made to be adjustable.
Available for: canvas
Vertical Progress bars
The Vertical Progress bar acts much the same as the Horizontal Progress bar but is oriented vertically.
It can be used to show a single value or in the case of stacked progress bars, it can show multiple values (eg browser market share).
Available for: svg canvas
Waterfall charts
Waterfall charts can be used to track the level of a value over a period of time.
They could be used, for example, to track the rise and fall of finances.
At the time of writing (January 2018) grouped Waterfall charts were not available but are
on the cards for the SVG
Waterfall (and possibly the canvas
version too
at a later date).
Available for: svg canvas