Why does dataviz matter so much?

This page explains why data visualization matters so much and how charts can make your life (and your website visitors' lives) significantly easier.

If you've ever questioned why data visualization 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 visualization can reveal important trends in your data - such as a downward trend in a Line chart. Something that you could not notice if you were just looking at the raw data - or gloss over thinking that it wasn't as significant as it really 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 with each other. There's some variation from hour to hour but there isn't a datset that sticks out as being either the dreatest or smallest. There does seem to be a spike at 6am 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 companies website - you'd be wrong (and most managers would think so too!).

Choosing the right type of vizualization

Choosing the correct type of visualization 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 visualization:

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 yiou 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 which 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 affect 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 demnstrate a single value (in fact the majority can be customised in some way). Such charts include:

What types of visualizations 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 producs 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.


Bar charts An example of a Bar chart

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 An example of a Bipolar chart

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 src="/images/dataviz/donut.png" class="dataviz-example-image" width="200" height="157" alt="An example of a Donut chart" />

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.

Available for: svg canvas


Fuel charts src="/images/dataviz/fuel.png" class="dataviz-example-image" width="175" height="198" alt="An example of a Fuel chart" />

Fuel charts are a simple gauge that mimicks 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 An example of a Funnel chart

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 An example of a Gantt chart

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 An example of a Gauge chart

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 to the image that you see here.

Available for: canvas


Horizontal Bar charts An example of a Horizontal Bar chart

Horizontal Bars 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 in order to show multiple data points.

Available for: svg canvas


Horizontal Progress bars An example of a Horizontal Progress bar

A Horizontal Progress bar is 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 An example of a Line chart

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 An example of a Meter chart

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 An example of an Odometer chart

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 An example of a Pie chart

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 An example of a Radar chart

Using a Radar chart you show your data in a circular fashion. The magnitude of each datapoint 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 An example of a Rose chart

Rose charts are similar to Radar charts but each datapoint 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 An example of a Radial Scatter chart

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 An example of a Scatter chart

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 a full crosshairs drawn onto the chart.

Available for: svg canvas


Semi-circular Progress bar An example of a 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 end points of the bar.

Available for: svg canvas


Thermometer charts An example of a Thermometer chart

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 An example of a Vertical Progress bar

The Vertical Progress bar acts much the same as the Horizontal Progress bar but 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 An example of a Waterfall chart

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