Advanced Interactive Dashboard in Python
Connect differents APIs to create an advanced interactive dashboard for analysis.
In the design process of a dashboard you need the summarized the most important KPI’s or indicators to give you the completeful information or description of your process. Generally, these indicators stay static along the time (or at least that is the goal). In general, the majority of dashboards are static in its layout structure and information.
But sometimes the indicators or series used in a dashboard need to be changed along the time. That’s the case of economic and financial time series. Economic and Financial time series tends to be correlated but along they lag between then along the time and it’s not possible to know what is the exact order of lag or what time series will show you the next piece of information required by taking a decision.
A solution for this situation is let to the user create new dashboards layout, add new time series to the dashboard and save the result. In this short article i want to show how to do it using Python panel. This is not a tutorial step by step. I’ll only show you some features implemented in the dashboard and i’ll leave you in the last section the GitHub link to the repository.
What is Panel?
According to the oficial web site https://panel.holoviz.org
Panel is an open-source Python library that lets you create custom interactive web apps and dashboards by connecting user-defined widgets to plots, images, tables, or text.
With panel, you don’t need to know how to create the HTML components and its interactions in Javascript because you coding all in Python.
1.Introduction
This dashboard integrate different data sources (API) to be visualized.
This article explain the main features of the dashboard with some code for purpose but if you want to use it please download the code of the repository and follow the instructions contained in the README.md file.
2. Design
The dashboard will have the following layout. The dashboard is simple you can add new analysis tabs and plot series in each tab.
Each plot is going to have the following layout:
Clicking in the “Add Serie” button display a modal that let you select the data source and search a time serie by name.
2. Plot
With Panel you can use different plotting libraries to graph your data like Matplotlib, Plotly, ECharts but in this dashboard i am going to use Bokeh library.
3. Connect with Data Sources
For this project we create an structure for connecting with multiple data sources. I consider two types of data sources: API and CSV Files.
3.1. API Data source
I’m going to connect to the Federal Reserve of St. Louis API and Nasdaq Data Link API (Quandl). These are a sources for financial, economic and alternative data.
The Federal Reserve API return a single timeseries always with a predefined column name in the dataframe. Therefore the data is return in a structured way. In contrast, Nasdaq Data Link API doesn’t return a single timeserie in many cases, for that reason i did a pre-selection of time series. It’s a good idea in future features that you can select the column of the dataset.
You need to register in its web site and get a token for using the API.
3.2. CSV Files
Furthermore, i’ve include connection with in CSV files data sources. In the project repositiory, i’d included several CSV files in the “dataset” directory to show this functionality.
4. Transform Data
Sometimes the time series are not useful to find patterns and it’s necesary to apply transformation. We create a class that let you create different types of transformation data. We define a transform method in the abstract class that do it the data transformation. This dashboard include the following transformation:
- Differentiation
- Fractional Differentiation
- Percentage Change from 1 periods
- Percentage Change from 12 periods
5. Miscelaneous
To analyze different charts is so difficult if you can’t identify the same data of each point in graph. To improve the dashboard visualization we sync all crosshair tool of the figures and create a Span component that mark the point selected in all plots.
Let’s go working the dashboard
First, i am going to create a new Analysis in the dashboard.
Then, i click the Add Serie button and it will show a modal to do a search by data sources.
Below the plot you have a dropdown list for generate a transformation in the data.
This is a very simple implementation dynamic. To use the dashboard download the code with the link of the repository below.
This is my first article. I expect to help you!!!
