How to Create Your First Python KPI Dashboard

Is Python a good tool for building dashboards? Want to build one but don't know how? Check out this article!

Measuring KPIs (key performance indicators) is a common way to assess organizational and project performance. However, understanding and communicating these KPIs is not a trivial issue, as they compress a complex situation into a few numbers.

KPI dashboards are great ways to present these metrics, as they provide context and customizable means to visualize them. With Python, you can build a KPI dashboard by writing a few lines of code. This article will show you how.

The first part of this article explains what KPI dashboards are, their benefits, and why Python is a great tool to build them. The second part goes through the building of a sales KPI dashboard, step by step.

What Are KPI Dashboards?

KPI dashboards are visualizations of the key performance metrics of an organization, department, or project. These metrics:

• Provide specific and measurable information about operations.
• Contribute to a shared language about aims and performance.
• Support accountability in planning.

However, KPIs are hard to comprehend and communicate because they are numerical expressions of processes with complex relationships and history.

KPI dashboards address this problem by presenting the metrics visually. They also:

• Make it easier to report and analyze the metrics.
• Add context and detail by providing historical data, categorization, and filtering.
• Assist understanding, thinking, and planning by providing different views of the data.
• Allow examining the performance in ‘real-time’, outside of the reporting cycle.

A dashboard is a great tool to communicate insights, track metrics, and promote accountability in many sectors, like finance, marketing, or HR. Building KPI dashboards is a great way to add value to a team and advance your career.

Why Build KPI Dashboards with Python?

Python is a great language for building KPI dashboards and other data science tasks  because of its accessibility and usefulness. The most important alternatives to Python are BI tools like Tableau, Power BI, or Google Data Studio. These are established solutions and are accessible for analysts with no coding skills. BI tools are useful when:

• The dashboard relies on an existing data warehouse.
• Columns have clear meaning and importance.
• The presentation style fits into a well-defined business case.

However, there are many situations when Python is the better choice. Such situations include:

• When the data is ‘raw’ and needs complex processing work beyond the capabilities of Excel.
• Concepts and ideas around the data are not clear and established; exploratory analysis and feature engineering is needed to reveal meaning.
• The dashboard interacts with other services, like data processing and machine learning pipelines.
• The dashboard is part of a larger application.
• The project needs to remain flexible about future options and avoid tool lock-in.

In these cases, Python is a very useful tool; this is one of the reasons why many have learned Python for Data Science. Learning Python is also a great choice on a personal level. Many organizations recognize the benefits of using Python and offer positions and career paths requiring Python knowledge. Python dashboard-building skills are in demand and can translate into opportunities in data science or analytics engineering.

Now that we know what KPIs are and why Python is a good choice to build a dashboard, let’s get started with building our own KPI dashboard in Python.

How to Build A KPI Dashboard With Python

Python has a wide selection of data science libraries. In this example, we’ll use Dash (one of the most popular Python dashboarding solutions), Plotly (to visualize the data), and pandas (to process the data).

Our dashboard will visualize the sales KPIs of a fictional supermarket chain; the mock sales data comes from Plotly’s example datasets. The dashboard shows an overview of the distribution and history of sales and revenue and a summary revenue breakdown for Q1 (January – March) 2019.

The following image shows the final dashboard:

The example KPI sales dashboard

The example dashboard consists of the following components:

• A metadata summary header.
• Revenue distribution charts and breakdown table.
• A historical chart of the daily number of sales.
• A historical chart of the 7-day moving average of daily revenue.

The rest of this section goes through the steps of building the dashboard:

1. Environment setup.
2. Dashboard setup.
3. Data loading and preparation.
4. Metadata summary header.
5. Historical charts.
6. Revenue distribution and breakdown visualizations.

Setting Up an Environment

The first step is setting up a Python development environment. This step is optional but recommended. Working in an environment will help you reproduce the code and prevent versioning and dependency conflicts.

Navigate to the directory where you want to work on the dashboard. Then create an environment with the following command:

$ python3 –m venv dash_project

To activate the environment, you need to use different commands depending on your operation system:

On Unix or macOS:

$ source dash_project/bin/activate

On Windows:

$ dash_project\Scripts\activate.bat

If the activation was successful, you’ll see the text dash_project showing on your prompt.

Now, install the pandas and Dash packages:

$ pip install pandas==1.3.5 dash==2.6.1 dash-bootstrap-components==1.2.1

You install Dash and pandas directly. Plotly automatically comes with Dash. As the dashboard uses the Bootstrap framework to structure its components, you’ll install its Dash implementation, dash-bootstrap-components.

Now that your environment is set, let’s start building the dashboard.

Setting up the Dash App

The code of the example dashboard is simple enough to write into a single file. Create a file named app.py and open it in your favorite code editor.

First we’ll import the libraries and modules for the dashboard:

import dash
from dash import html
from dash import dcc
from dash.dash_table import DataTable
import dash_bootstrap_components as dbc
import pandas as pd
import plotly.express as px

We already discussed dash, dash_bootstrap_components, plotly, and pandas. Here’s a short explanation of the remaining modules:

• dcc stands for Dash core components and provides the main structuring elements of the dashboard.
• html allows us to structure the dashboard with HTML tags.
• DataTable is a module that allows Dash to display tables on the dashboard.

Let’s create the structure of the app by adding this code to the file:

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = html.Div([html.H1("Sales KPIs")])

if __name__ == "__main__":
	app.run_server(debug=True)

Explanation:

• The app = dash.Dash(... line creates the dashboard.
• The app.layout = … line defines the dashboard components and its layout with the help of HTML tags. This is where you will add the components of the dashboard.
• The if __name__ == "__main__": part tells Python to run the app on a server when it executes the file as a module.

Now you can launch the app from the command line:

$ python app.py

This command starts up the dashboard on a localhost server, which you can open in a browser by navigating to http://127.0.0.1:8050/ . It should show a page with the text Sales KPIs.

As you add components to your dashboard, you can follow the changes on this page in real-time or after a restart.

Loading and Preparing the Dataset

Let’s load the dataset. The following snippet loads the data into a dataframe.

data_url = "https://raw.githubusercontent.com/plotly/datasets/master/supermarket_Sales.csv"
sales = pd.read_csv(data_url)

Let’s examine a sample row:

A sample row of the example dataset

Each row represents a sale event containing product, customer, branch, and sales information.

Let’s make a few changes to the data:

• Convert the Date column into pandas datetime
• Calculate a Revenue column from Unit price and Quantity.
• Rename the Gross Income column into Income after costs and taxes.

sales["Date"] = pd.to_datetime(sales["Date"])
sales = sales.sort_values("Date").set_index("Date")

sales["Revenue"] = sales["Unit price"] * sales["Quantity"]

sales.rename(columns={"Gross income": "Income after costs and taxes"}, inplace=True)

Here is a sample of rows filtered for the columns this tutorial uses:

After preparing the data, let’s add components to the dashboard.

Adding Summary Information

The first component of the dashboard is a few lines of summary information added to the top. It consists of the following elements:

• A subheader.
• The number of cities in the dataset.
• The time period the dataset covers.
• A link to the dataset source.

The following code shows the new lines (in bold) added to the app.layout object.

app.layout = html.Div(
	[
    	html.H1("Sales KPIs"),
    	html.H2("Sales Dataset"),
    	html.Ul(
        	[
            	html.Li(f"Number of cities: {sales['City'].nunique()}"),
            	html.Li(
                	f"Time period: {sales.index.date[0].isoformat()[:10]} - {sales.index.date[-1].isoformat()[:10]}"
            	),
            	html.Li(["Data Source: ", html.A(data_url, href=data_url)]),
        	]
    	),
	]
)

The layout structure relies on the common HTML tag structure. In this example, it uses the following tags:

• H2: Header 2
• Ul: Unordered list
• Li: An element within the list
• A: Link element

After saving the script and rerunning the app, you should see the header at the top of the dashboard:

Summary information

Adding Historical Graphs

Let’s add the historical sales count and revenue graphs to the dashboard.

We’ll start with the number of sales by creating a time series sampled for daily values. You can do this with a pandas groupby transformation on the dates by counting the number of unique invoices for each day:

daily_sales_number = (
	sales["Invoice ID"].groupby(sales.index.date).nunique().rename("Number of sales")
)

Next, we’ll create a line chart object from this data with Plotly’s px.line method. Also, we’ll define a title_font_size parameter to make the chart titles obvious:

title_font_size = 30

figure_daily_sales_number = px.line(
	daily_sales_number, title="Daily number of sales"
).update_layout(title_font_size=title_font_size)

Let’s do the same with the revenue chart. The main difference is that you need to calculate the mean of daily total revenue values over 7-day windows.

m7d_mean_revenue = (
	sales["Revenue"].groupby(sales.index.date).sum().rolling(7, min_periods=7).mean()
)

figure_m7d_mean_revenue = px.line(
	m7d_mean_revenue, title="7-day moving average of daily revenue"
).update_layout(title_font_size=title_font_size)

Now that you have the two figures, add them to the end of the layout after passing them into dcc.Graph objects:

app.layout = html.Div(
	[
    	html.H1("Sales KPIs"),
    	…,
    	dcc.Graph(figure=figure_daily_sales_number),
    	dcc.Graph(figure=figure_m7d_mean_revenue),
	]
)

After restarting the app, you will see the following graphs at the bottom of your dashboard:

Historical charts

Adding Revenue Distribution Graphs and a Revenue Breakdown Table

The final step consists of adding three separate elements displayed in a single row:

• A pie chart showing the revenue distribution between product lines.
• A bar chart showing the revenue in each city.
• A table showing revenue, taxes, costs, and the remaining income.

Creating the two charts is similar to how you created the line charts in the previous step. One difference is that you use the px.pie and px.bar methods, respectively.

figure_product_line = px.pie(
	sales.groupby("Product line")["Revenue"].sum().reset_index(),
	names="Product line",
	values="Revenue",
	title="Product lines ratio",
).update_layout(title_font_size=title_font_size)

figure_revenue_bycity = px.bar(
	sales.groupby(["City"])["Revenue"].sum(), title="Revenue by city"
).update_layout(title_font_size=title_font_size)

Let’s create the revenue breakdown table by first defining a pandas dataframe:

sums = (
	sales[
    	[
        	"Revenue",
        	"Tax 5%",
        	"Cost of goods sold",
        	"Income after costs and taxes",
    	]
	]
	.sum()
	.rename("Value")
	.reset_index()
	.rename(columns={"index": "Item"})
)

To display the dataframe on the dashboard, convert it into a Dash DataTable object. Let’s also add an HTML label and some space to it:

sums_datatable = html.Div(
	[
    	html.P(),
    	html.Label(
        	"Revenue breakdown",
        	style={"font-size": f"{title_font_size}px", "font-color": "grey"},
    	),
    	html.P(),
    	DataTable(
        	data=sums.to_dict("records"),
        	columns=[{"name": col, "id": col} for col in ["Item", "Value"]],
    	),
	]
)

Now we’ll use the dbc.Row and dbc.Col Bootstrap Dash components to place the revenue distribution charts and the datatable into a single row. Also, we’ll add some padding at the start and end of the row.

row_summary_metrics = dbc.Row(
	[
    	dbc.Col("", width=1),
    	dbc.Col(dcc.Graph(figure=figure_product_line)),
    	dbc.Col(dcc.Graph(figure=figure_revenue_bycity)),
    	dbc.Col(sums_datatable),
    	dbc.Col("", width=1),
	],
)

Finally, let’s update the dashboard layout with the summary metrics:

app.layout = html.Div(
	[
    	…,
    	row_summary_metrics,
    	dcc.Graph(figure=figure_daily_sales_number),
    	dcc.Graph(figure=figure_m7d_mean_revenue),
	]
)

You are done! Congratulations! You have built a working Python dashboard from start to finish.

Build Dashboards With Python

Python is a great tool for many analytics, engineering, and data tasks beyond building dashboards.

If you would like to improve your Python skills, make sure to check out our learning tracks. The Python Basics track teaches you the fundamentals of Python development. If you already have that and would like to apply your Python knowledge to data science tasks,  Python for Data Science gives you the skills you’ll need.