How to make a KPI section in our dashboard?

#Plotly #Data visualization #KPI #Indicators

When designing a dashboard, we often want to start with a quick overview of the most important indicators that summarize the performance on a general level. We can do that in many ways in Python, but today I want to focus on the trace called ‘Indicator’ introduced by Plotly.

Using ‘Indicator’ from Plotly makes it really convenient and fast to create a whole KPIs section in your dashboard. There’s no need to think about many design details or perform calculations. Plotly does it for you. All we need is making some configurations of the attributes according to our requirements.

Let’s see a simple example. Say we want to create a gold price indicator. We want to show in our report:

• Current price

• How much it changed since last session (daily)

• We also want to have a small fancy triangle indicating whether the price went up or down. In addition, the color of the triangle changes depending on the price movement (up – green, down – red)

We start with collecting data we need. In this example I use the data collected from National Bank of Poland's API.

import requests
import plotly.graph_objects as go

base_url ='http://api.nbp.pl/api/'
response = requests.get(f'{base_url}cenyzlota/last/{7}')
gold_price = response.json()

The `gold_price` variable holds the information on gold prices from the last 7 days in json format. The currency is Polish Zloty (PLN) and the price ('cena') concerns 1g of gold:

[{'data': '2024-06-07', 'cena': 299.99}, {'data': '2024-06-10', 'cena': 292.62}, {'data': '2024-06-11', 'cena': 297.54}, {'data': '2024-06-12', 'cena': 301.22}, {'data': '2024-06-13', 'cena': 301.72}, {'data': '2024-06-14', 'cena': 298.04}, {'data': '2024-06-17', 'cena': 305.41}]

Now that we have some figures, let's build our first indicator according to the requirements listed above:

fig = go.Figure(go.Indicator(
	mode = "number+delta",
	value = gold_price[-1]['cena'],
	delta = {'position': "top", 'reference': gold_price[-2]['cena']}
	))

The output of this code looks like this:

Although it looks nice and meets the requirements, there are plenty of possibilities to make it more informative. Let's modify this indicator by adding:

• a prefix being a currency ticker symbol,

• a background chart showing a trend for the last 7 days

• a short text explaining what the indicator represents

In order to do so, let's quickly prepare our data for the whole week:

prices = []
dates=[]
for i in gold_price:
	prices.append(i['cena'])
	dates.append(i['data'])

... and the chart showing the trend:

fig.add_trace(go.Scatter(x = dates, y = prices))

Now we adjust the attributes and plug in the values:

fig = go.Figure(go.Indicator(
	mode = "number+delta",
	value = gold_price[-1]['cena'],
	title = {"text": "Price per 1g"},
	number = {'prefix': "PLN "},
	delta = {'position': "top", 'reference': gold_price[-2]['cena']}
	))

As a result we get:

Now our indicator looks more complete and shows more details. Off course the design and format of the figures, title and chart included in the indicator are highly customizable, however, this is not the point of this article. For more details read the documentation:

https://plotly.com/python/indicator/