An approach to better visualisations with Gauge Chart

Visualisation has become an increasingly critical way to gather useful insights from the trillions of rows of data generated every day. Today, the era of “Big Data” has led to the use of data visualisation to help propel key businesses and governments around the world have also been using visualisation with the data retrieved from the pandamic to help decide the best measures to control the spread of the pandemic.

As such, I would like to introduce an interesting way to visualise your data using a gauge chart, a popular and easy visualisation technique that can highlight key information in an interpretable manner

There are six parts to this blog as we will be sharing about gauge chart in detail.

1. Introduction: What is a gauge chart
2. Types of Gauge Chart
3. When to use a Gauge chart
4. Implementation: How to create a Gauge chart in Tableau
5. Pros and Cons of Gauge Chart
6. Conclusion

With that, let us get started

1. Introduction: What is a gauge chart

A gauge chart is a type of data visualization that is often used to display a single metric or data field in a quantitative context. With a shape that resembles a dial/ speedometer, it allows the ease to identify the minimum, current and maximum value.

Figure 1: Gauge Chart, photo retrieved from: https://docs.cluvio.com/

2. Types of gauge chart

There are many different types of gauge charts as they come in different shapes and forms. In order for us to decide which type to use, we would first need to identify the (Key Performance Indicator) KPIs metrics. This will allow us to pick a suitable gauge chart to best present the information on the visualization. We will be taking a look at three popular types of gauge charts and their use cases

• Speedometer: The most popular choice of gauge chart. It is inspired by the device used to measure the speed of the car and is useful to compare long-range metrics with single/multiple needles to identify a certain value. It is also often used to compare longer ranges of a metric thanks to its circular shape.

Figure 2: Speedometer, photo retrieved from https://www.clicdata.com/

• Linear Gauge Chart: A useful chart to indicate numeric data value on a linear scale. Values are displayed either in a vertical or horizontal bar with different colors differentiating the ranges of data alongside a pointer to indicate the data value on the scale

Figure 3: Linear gauge chart, photo retrieved from https://www.infragistics.com/

• Angular Gauge Chart: The angular chart is the same as the speedometer chart but it displays only half of the circle. It is often used to display a range that is limited or when you want to visualize the performance of a metric based on a positive or negative outcome.

Figure 4: Angular gauge chart, photo retrieved from https://www.pinterest.com/pin/315955730101494067/

3. When to use a gauge chart

Gauge charts are popular and often use in business scenarios amongst other popular types of charts such as pivot tables, line/bar charts, and maps.

It is critical to know that as a gauge chart is mostly used to display one single value if we wish to extract deeper insights, it may not be the most suitable option. Therefore here are some scenarios where a gauge chart can help you to explain your story

• Progressive Information

If we have a linear metric and wish to observe the changes, the best candidate would be a gauge chart as it allows us to monitor the metrics based on a given time period and can observe how it changes. This could also be used to compare performance by time periods.

• Target Metrics

If we have specific KPIs based on a pre-defined target, eg. Tracking of total revenue for the month of May, we can use a gauge chart to easily display the current goal and target

• Progress or Deadlines

It is also useful for keeping up with progress/deadlines in a business dashboard by converting completed tasks into percentages.

Figure 5: Progress or Deadlines https://www.datapine.com/

4. Implementation: How to create a gauge chart in Tableau

Now that we have seen the power of the gauge chart and its practical usage, let us get our hands dirty through the creation of a simple angular gauge in Tableau. Also, take note of the four points as shown below and have them answered before creating your gauge chart.

After you have answered those questions you are ready to get started!

We will be using Tableau to help us create the Gauge chart visualisation, you may download Tableau Public which is free for a quick start: https://public.tableau.com/en-us/s/

Our goal for the Gauge chart is to help us visualize profit percentage across categories from a superstore dataset: Sample_Superstore

You can download the dataset, follow along or try it out at your own pace.

The following is a step-by-step instruction to guide you on the creation of the gauge chart.

Step 1: Creating the Donut chart and Calculated Fields

• Open the Tableau software on your computer and load the sample dataset in the interface. Once the data is loaded, establish the relationship between the tables and open the Tableau worksheet.

Step 2: Next, we will go over to sheet 1

Step 3: Double-click on the Rows section, type in 0, and hit Enter, to create a dummy calculated field. Repeat it one more time and create a second calculated field. This will create an empty sheet with no values.

Step 4: Now, open the drop-down menu of the second dummy field and click on the Dual-Axis option.

You should see a vertical line that combines them together and the circle chart as shown below.

Step 5: Following that, change the chart type to Pie from the Marks card. Also, remove the Measure Names from the All Marks section.

Step 6: Change the color of the 2nd Pie(SUM(0)) to white so that it matches the background color.

Step 7: Also, decrease the second Pie(SUM) size to convert it into a donut chart.

Step 8: Once done, change the View of your sheet to Entire View and spread the donut across the interface.

Step 9: Now, we need to create different calculated Fields for distributing the slides of the donut chart. Therefore, you have to create seven calculated fields and write the codes for them as per the requirements.

In the following steps, we’ll divide our donut chart based on the percentage of values extracted from the Profit dimension:

Click on the drop-down menu and select the Create Calculated Field option.

Step 10: A dialog box will appear on the screen where you need to write and apply the following codes. Also, rename the calculated field to Profit Percentage.

Once, the code is applied, click on OK and the Profit Percentage will be added to the dataset as Fields. Now, we’ll create more such fields in the same manner.

Step 11: Also, we need to hide the bottom half portion of our donut chart so that it resembles a gauge chart. For that, create a calculator field with the MIN(1) formula.

Step 12: Create a calculated field named Colored<50% using the formula given below. This formula is used to calculate the area below 50% which needs to be filled.

Step 13: Grey<50% will differentiate the portion filled by Colored<50% in case the data doesn’t allow the field to fill the entire 50% of the chart.

Step 14: The next formula, Colored>50% will color the portion which is greater than 50%. If you want to show 65% in your Tableau gauge chart, then the initial 50% will be filled with Colored<50%, and the latter 156% will be filled with Colored>50%.

Step 15: Grey>50% will fill the remaining portion in the second quadrant of our Gauge chart. Referring to the above example, the remaining 35% will be highlighted by this field.

Step 16: Pointer 1 and Pointer 2 will be used to create a needle or the line representing the current value in our Tableau Gauge chart.

Step 17: Once you’ve created all the calculated fields, we’ll move on to the part, that is putting all the fields and measures to the right places.

Follow the steps given below to create a Gauge chart using the measures and calculated fields we made in the previous section:

Drop Measure Names in the filters section and only select the measures you just created.

Step 18: The picture below shows the measures you have to select and apply to the filter.

Step 19: Now, drag Measure Names & Measure Values and drop them in the All Marks section.

Step 20: After this step, your chart will be divided into different sections based on the measured values.

Step 21: Once done, rearrange your Measure Values in the following order.

Step 22: After that, change the color of these Measure Values from the Color Marks Section as shown below. Just make sure to assign the same color to the same pairs like black to the Pointer1 & Pointer2 and blue to Colored<50% & Colored>50%.

Step 23: Now, for the finale, we’ll create a dummy calculated field to assign a different color palette to the measure names. So, write ‘Dummy’ in the code section and click on OK.

Step 24: Add this Dummy field in the Detail Marks section of the inner pie and then change that to Colors.

Step 25: The Measure Names and Dummy will create a temporary combined field in order to create an arc for the gauge chart and color the inner pie. So, change these dummy measure names by double-clicking on any one of the dummy measure names to the exact same color as shown below:

Step 26: Now, add the Category in the columns section to create three different gauge figures representing each category.

Step 27: Also, add the Category and Profit Percentage to the label Marks section for the second pie. It will display the category and profit percentage in each gauge chart on their pivot point.

Step 28: In the above picture, the gauge chart is showing profit percentage in numerical format. But, you can change that to percent by clicking on the drop-down menu>> Quick Table Calculation>> Percent of Total.

You can also do a few formatting changes such as the color, labels, and size of your gauge chart.

You are also welcome to download the notebook and modify it to your own preference. https://public.tableau.com/app/profile/lucas7360/viz/GaugeChartA0156011X/Sheet1?publish=yes

5. Pros and Cons of Gauge chart

We have all seen how gauge chart can effectively highlight the important details through the short hands-on session and to sum it up , here are the pros and cons of using gauge chart

Pros:

1. Easy to create : It is a straightforward and easy visulisation and it serves its purpose
2. User friendly : A great indicator to measure performance which we usually associate with the current speed of the speedometer and also a measurement of progression
3. Easy for interpreting: Reason why business people love gauge charts is because it is direct and needs no further elaboration

Although it is a very popular type of visulisation, it has its haters too for some of these reasons

Cons:

1. Consumes space: The space needed will grow exponentially with more charts used and can become messy very quickly
2. Not able to cover deeper insights: It is only able to show key information, may lack the ability to convey more powerful or deeper insights
3. Needs familiarity with Tableau: Need to be familiar with Tableau in the case of this exercise, different platforms have different ways of creating them.

6. Conclusion

In this short article, we have seen the various types of Gauge chart and the reason for their existence as well as how we can effectively use them and value add to our visualisations. Hopefully everyone would be able to pair the use of guage chartt with other visulisations as gauge chart alone without other metrics may lack the potential for visualisations to cover deeper insights.

References:

What is A Gauge Chart? Definition, Best Practices & Examples

How to Create a Gauge Chart in Tableau? - Intellipaat Blog

Top 3 Data Visualization Types Preferred by Business People - ClicData