The world’s leading publication for data science, AI, and ML professionals.

Dashboard KPI essential Template – Hands-on Tableau

Anatomy of a KPI template visualization in Dashboards. Hands-on demo with Tableau, from scratch.

Photo by Austin Distel on Unsplash
Photo by Austin Distel on Unsplash

Hands-on Tutorials

DataViz Series: Dashboard KPI essential Template

Key Performance Indicators (KPIs) are the bricks of any Dashboard, in any Business domain. A smart way to make those bricks is developing a KPI template, which is a set of expressions and parameters that blend data to explain the Business. Ok, but how can we make a KPI template?

Introduction

In this article, I’m going to explain and show how to develop the underlying objects of a clean KPI visualization in a professional Dashboard. The idea is to build a KPI template that can be applied to any business domain.

I will do it by Tableau, but it will be easily adaptable to other dashboarding tools such as Qlik or Power BI. If you wish to repeat the steps yourself in a demo style, you might want to create a Tableau Public login (for free), and download the dataset I used(link).

If you read my other article "Inspiring Ideas for Dashboards Design" (link below), what I’ll explain here is how to exactly develop any of the KPIs shown in the Cockpit.

Inspiring Ideas for Dashboards Design

For details about Tableau, I already talked about its Public version in the section "Reporting or Dashboarding: Tableau Public" of my other article linked below

Create a "Real-world" Data Science environment at home

KPI requirements

Our goal is to build all the objects to make a standard KPI template, by building its 3 core elements: KPI value, trend, and performance.

For Example, the following visualization uses 8 times the template that we are going to develop.

Screenshot from Tableau Public
Screenshot from Tableau Public

The input of our KPI Template is a dataset with a business measure expressed over time (e.g. the VALUE of month Sale Turnover, over ID_DATE).

Screenshot by Author
Screenshot by Author

We want the KPI Template visualization to be dynamically responding to the selectors for Time and Performance scopes.

Screenshot by Author
Screenshot by Author

The KPI Template’s output will need to provide 3 information

a) KPI value of the business measure over for the selected period

b) KPI performance defined as KPI value vs Benchmark

c) KPI trend of the KPI over a sliding period of 1 year

Screenshot by Author
Screenshot by Author

Hands-on: KPI development by Tableau

In the next 6 paragraphs, I will walk you through the actual step-by-step development of the KPI Template visualization.

1. Create the Data Source

You can download the source dataset from this link.

Screenshot by Author
Screenshot by Author

Create a Tableau workbook and configure the Data Source tab to connect to a Text file (the file is a .csv in the example).

Once done, you should see the imported data: each row gives the Value of a business measure over time (e.g. it can be Profit, Margin,.., if you deal with the Sales domain, Net Promoter Score, Engagement Rate,.., in Digital Marketing, etc.).

"Value" is the business measure, "Id Date" the date it’s referred to.

Screenshot by Author
Screenshot by Author

The data types are chosen automatically, but you always need to check that.

In this case, they are correct: # for the numeric columns and Date for "Id Date". You’ll always need to check that and in case manually change the data type.

We now need to create all the Tableau objects that will be the bricks of our visualization. It all begins by creating a Tableau Sheet, by the tabs at the bottom.

A Tableau Sheet is the most detailed level of visualization in Tableau. It’s where you can define the objects containing the data expressions ( calculations, transformations, filtering, etc.) and the visualization (charts, views, maps, etc.). Usually, Dashboards are composed of several Tableau Sheets.

On the left-hand side, you can see the 3 columns of your source file. Tableau already put some intelligence on them: it classified "Id Date" and "Id Row" in as Dimensions objects (in blue), and "Value" as a Measure (in green).

Screenshot by Author
Screenshot by Author

2. Build the parameters and selectors

Parameters can be used to propagate values towards Dimension or Masure objects. In Tableau (other tools are different), one of the ways to use a parameter is by setting its value by a selector. Another way is to store a constant value. For our KPI template, we decided to show 3 selectors: Current Month, Year, and Performance scope.

  • Current Month: define it as a list of Integers, with values from 1 to 12.
Screenshot by Author
Screenshot by Author
  • Current Year: define it as a list of integers, with the years you need (2018,2019,2020).
Screenshot by Author
Screenshot by Author
  • Performance Scope: define it as a list of Strings with the performances you want to allow. In this template, we provide show 3 scopes, but you might want to add some more:

Current month compared to a Target value

Current month compared to the previous month

Current month compared to the current month of last year

Screenshot by Author
Screenshot by Author

Now that we created our 3 parameters, we can then build the actual user selectors: right-click on each parameter and select "Show Parameter", so that they appear on your Sheet and can be changed.

Screenshot by Author
Screenshot by Author

To display the selector as I did, you need to right-click on the parameter and select the Compact List view mode.

Screenshot by Author
Screenshot by Author

Finally, we need to create a new parameter to define the Target value we want to use for the performance scope "current month vs Target value". We can define it as 10000 (this could represent the desired monthly sale profit, the number of new customers, or any other target benchmark).

Screenshot by Author
Screenshot by Author

3. Create the Utility Dimensions

Based on the selectors "Current Year" and "Current Month" defined above, we need to interpret the actual dates they represent, by building some dimensions, which I call the utility dimensions. Even if the user will select just a single pair "Current Year" and "Current Month", those dimensions allow the calculations of several measures, each on a different time period.

Create the following 4 object dimensions

Screenshot by Author
Screenshot by Author

With the following expressions

Date Current Month - Current Year 
= MAKEDATE([Current Year],[Current Month],1)
Date Current Month - Previous Year 
= MAKEDATE([Current Year]-1,[Current Month],1)
Date Next Month 
= DATEADD('month',1,[Date Current Month - Current Year])
Date Previous Month
= DATEADD('month',-1,[Date Current Month - Current Year])

Explanation: the function MAKEDATE builds a date based on the provided Year, Month, and Day. In our template, Year and Month are our Parameters, the day is set to 1.

The function DATEADD increments (or decrements) the date provided. Here we calculate the dates of next month by adding 1 month to the current month.

We then create some dimensions to nicely display the dates in a textual format such as

Screenshot by Author
Screenshot by Author
Screenshot by Author
Screenshot by Author

We do so by creating the 2 following dimensions

Screenshot by Author
Screenshot by Author

defined by the expressions below.

Current Period Lable
= LEFT(DATENAME("month", [Date Current Month - Current Year]),3)
 + "-" + RIGHT(DATENAME("year",[Date Current Month - Current Year]),2)
Performance Reference Lable
= CASE [Performance Scope]
WHEN   'CurrentMonth_vs_PreviousMonth' THEN LEFT(DATENAME("month", [Date Previous Month]),3)
        + "-" + RIGHT(DATENAME("year",[Date Previous Month]),2)
WHEN 'CurrentMonth_vs_PreviousYear' THEN LEFT(DATENAME("month", [Date Current Month - Previous Year]),3)
        + "-" + RIGHT(DATENAME("year",[Date Current Month - Previous Year]),2)
WHEN 'CurrentMonth_vs_Target' THEN "Target" 
END

As you can notice, they are based on the objects which we previously built, which in turn were built upon the Parameters.

4. Building the KPI Measures on times scopes

Here is the most interesting part: the actual KPI calculations. For any KPI we need 2 ingredients: a business metric, and a business rule to turn the measure into a KPI. E.g. from telco: the duration of a phone call would be the business metric, and the business rule for the KPI "Daily Average Duration" would be: average duration of the phone calls per day.

In our KPI template, our business metric corresponds to the Tableau object "Value", which represents the source column named Value. I chose as a business rule the total Value by month.

The rule can be changed by changing the aggregation function. E.g. the Average amount per transaction would be the following:

Let’s build the corresponding Tableau object:

Screenshot by Author
Screenshot by Author

Why do we need 3 measures? Because we are considering 3 different periods: the current month, the previous month, the current month of the previous year. You’ll understand better the reason later when we’ll calculate the KPI performance.

Their expressions are the following:

KPI (Current Month)
=SUM(IF (YEAR([Id Date]) = [Current Year] 
         AND MONTH([Id Date]) = [Current Month]) 
    THEN [Value]
    ELSE NULL
    END)
KPI (Previous Month)
=SUM(IF (YEAR([Id Date]) = YEAR([Date Previous Month])
         AND MONTH([Id Date])= MONTH([Date Previous Month]) )
    THEN [Value]
    ELSE NULL
    END)
KPI (Current Month Previous Year)
=SUM(IF (YEAR([Id Date]) = [Current Year] - 1
         AND MONTH([Id Date]) = [Current Month]) 
    THEN [Value]
    ELSE NULL
    END)

Let’s explain the first expression KPI (Current Month), the others follow the same concepts. We need to keep the source "Value" that belongs to the Current Month and force it to NULL elsewhere.

Screenshot by Author
Screenshot by Author

This filtering is done by the part of the expression highlighted in blue, which tests row by row our data source whether its date ("Id Date") belongs to the "Current Year" and "Current Month" period.

Screenshot by Author
Screenshot by Author

For instance, If the date Selector was set as April 2018, KPI would only consider the source data in green:

Screenshot by Author
Screenshot by Author

The remaining part of the expression highlighted below aggregates all the Value in scope following the KPI definition (i.e. Sum).

Screenshot by Author
Screenshot by Author
Screenshot by Author
Screenshot by Author

Finally, we can build another measure that reads the parameter "Performance Scope" previously built. Create the object

with the expression:

KPI (Performance Scope)
=CASE [Performance Scope]
WHEN 'CurrentMonth_vs_PreviousMonth' THEN  [KPI (Current Month)]
WHEN 'CurrentMonth_vs_PreviousYear' THEN  [KPI (Current Month)]
WHEN 'CurrentMonth_vs_Target' THEN  [KPI (Current Month)]
END

You can see that depending on the Performance Scope selector, the object acts as a switch and selects one KPI(t). In our Template we decided to look at the Current Month only, so in any case our switch is on "KPI (Current Month)", but you might want to extend that to other scopes (e.g. Current Year, Quarter, Week, etc.).

Screenshot by Author
Screenshot by Author

To visualize the trend of our KPI, we want to display its values over a sliding year. To do so we can build the following object and expression, which leverages the dates we previously calculated.

KPI Sliding Year
=SUM(IF ([Id Date] > [Date Current Month - Previous Year] 
         AND [Id Date] < [Date Next Month] )
    THEN [Value]
    ELSE NULL
    END)

5. Building the References Measures

To display the KPI performances, we need to compare the KPI on a time scope against a benchmark. For our KPI template, we have set 3 different benchmarks: a Target value, the KPI value of the previous month, and the same month of previous year.

Screenshot by Author
Screenshot by Author

To allow the dynamic behavior of the References we need to build the following 4 objects, which I’ll explain below.

Screenshot by Author
Screenshot by Author
KPI Target
=[Target]

This object is simply derived from the parameter Target previously created.

KPI Reference (Performance Scope)
=CASE [Performance Scope]
WHEN 'CurrentMonth_vs_PreviousMonth' 
      THEN  [KPI (Previous Month)]
WHEN 'CurrentMonth_vs_PreviousYear' 
      THEN  [KPI (Current Month Previous Year)]
WHEN 'CurrentMonth_vs_Target' THEN  [KPI Target]
END

Depending on the value of the selector Performance Scope, one of the 3 benchmarks KPI (Previous Month), KPI (Current Month Previous Year), or KPI Target is selected to be the reference.

KPI vs Reference (Performance Scope)
=[KPI (Performance Scope)] - [KPI Reference (Performance Scope)]

This object compares the KPI for the selected scope towards the KPI Reference (Performance Scope), by calculating the difference. In other cases, the expression could also be a ratio or %.

We then create another (identical) measure that will be used just to display its value in a different way. We will see exactly how to configure some additional properties when we’ll build the actual visualization.

KPI vs Reference (Performance Scope) Sign
=[KPI (Performance Scope)] - [KPI Reference (Performance Scope)]

6. Put everything together: KPI visualization

We now need to combine the Tableau Dimensions and Measure to make our dynamic KPI visualization.

In short: we’ll combine the dimensions and measures into 5 Tableau Worksheets, define how to visualize each of them, and finally compose a Dashboard section using the Worksheets to present the 3 KPI’s essential elements: value, trend, and performance.

Screenshot by Author
Screenshot by Author
  • (1) KPI Value
  • (2) Caption
  • (3) Period Lable
  • (4) Sign of KPI value vs Reference
  • (5) KPI Trend

I’m going to present how to make each Worksheet here below.

(1) KPI Value

Let’s begin from the KPI value: you will need to drag en drop the object KPI (Performance Scope) as a Text (just drag and drop it in the Text mark, see the yellow arrow below).

Screenshot by Author
Screenshot by Author

To format the text as I did, you need to click on the Text mark and set the properties as follows

Screenshot by Author
Screenshot by Author

To show the $ symbol there are a few ways. One is right-click on the KPI (Performance Scope) object, Format, and edit the number format as follows:

Screenshot by Author
Screenshot by Author

(2) Caption

The Caption zone displays the comparison of KPI value vs Perfomance velue selected.

You need to create a new Tableau Worksheet, drag and drop KPI vs Reference (Performance Scope) and Performance Reference Lable as a Tooltip (just drag and drop them in the Tooltip mark, see the orange arrow below).

Screenshot by Author
Screenshot by Author

Make the "Caption" windows visible on the bottom side of your Tableau canvas, click the top menu "Worksheet", and select "Show Caption".

Then double click on the Caption area and on "Insert", to add the two objects as follows

Screenshot by Author
Screenshot by Author

To set the format as displayed for KPI vs Reference (Performance Scope) you need to edit its the format, as follows

Screenshot by Author
Screenshot by Author

The expression I used is

▲ +$#;▼ -$#;=

(3) Period Lable

The Period label shows which period we analyze and against which benchmark we compare.

To build the visualization you need to create a new worksheet, and drag en drop the objects Performance Reference Lable and Current Period Lable as a Text

Screenshot by Author
Screenshot by Author

(4) Sign of KPI value vs Reference

To visually display the comparison KPI value vs Reference we can show its sign as a colored ▲or ▼. It says whether the current period was better (green ▲) or worse (red ▼) than the Reference.

To implement that, create a new worksheet, then drag en drop the object KPI vs Reference (Performance Scope) Sign as a Text and also as a Color mark.

Screenshot by Author
Screenshot by Author

To set the shapes, edit the format of the Text object, using the expression

▲;▼;=
Screenshot by Author
Screenshot by Author

To set the color click on the Color tab, and select the Red-Green Diverging, centered on zero. This way positive values will be displayed in green, negative in red.

Screenshot by Author
Screenshot by Author

(5) KPI Trend

To show the last year’s trend, create a new worksheet, drag and drop KPI Sliding Year in the zone Rows, and define the following expression in the Columns.

DATETRUNC('month', [Id Date])

Then in the Marks editor select the "Area" and you’ll see something similar to the following.

Screenshot by Author
Screenshot by Author

You should then customize color and hide axes labels to show exactly as above.

Compose a Dashboard section

All the worksheets you just created can be combined into a Dashboard (section). In a real-life dashboard, we would display many KPIs visualizations together, all based on the same template, to give harmony and coherence, so here we do the Demo with just one KPI, to present the concept.

Let’s create a new dashboard (by click on the orange box below) and import all the worksheets we created (see the yellow box), and arrange them as follows

Screenshot by Author
Screenshot by Author

If you try to change the selector’s values you’ll see the KPI values and performance changing.

Screenshot by Author
Screenshot by Author

Effort

You might think for just a single KPI visualization you had to build quite a lot of objects, right?. In a real-life Dashboard, we usually present many KPIs together (see image below), and all of them share the same parameters and utility dimensions. So the actual development you’ll need to do is less than half we did in this demo.

Also, once you have your KPI template, you can create new ones by duplicating the measures we created through §4 and §5, and just replace the basic source measures and calculations, if based on different business rules. That makes the development quick and simple, so I have no doubts about the advantage you get by using this or similar temples, rather than build a custom set of objects for each visualization.

Screenshot from Tableau Public
Screenshot from Tableau Public

In a nutshell…

In this story, I shared with you my way to build a KPI template visualization, through a Hands-on Tableau. KPI templates make dashboard development simpler, quicker, and easier to maintain, than unstructured development.

The methodology is easily applicable to any other tools (e.g. Qlik, Power BI, etc.) and business domains, as long as we have a metric moving over time.

I also provided the source data I used and described step-by-step how I implemented each part of the KPI template so that you can redo it yourself if you wish, regardless of your skill level.


Feel free to subscribe to my "Sharing Data Knowledge" Newsletter.


Related Articles