Does dataviz matter?

• Choosing the right type of visualisation
• What types of visualisations does RGraph support?

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, imagine your data as a large, quite boring, set of numbers. With a chart showing the data however, it would be clear to see any trends that are present in the data and whether the data is changing or if it's mostly just staying the same. There may be a short-term uptick or downtick in the data - but with a chart it would be easier to determine whether this is an anomaly or if it's part of a longer, growing trend.

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 - charts look nicer than a page full of numbers (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:

• Bar charts
• Horizontal Bar charts
• Line charts
• Scatter charts (with or without a connecting 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 Vertical 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
• Bar 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
• Bar 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 charts
• Bubble charts
• 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
• Vertical Progress bars
• Horizontal Progress bars
• 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:

• Bar charts
• 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 chart or 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