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.

A table of data/numbers

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:

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:

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:

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:

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).

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:

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:

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

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