Creating a Financial Dashboard with Python

Building a financial dashboard with Dash, Plotly and Python

This post will be a bit different than my previous ones. We are not going to analyse financial data or value companies using Python. Instead, we are going to learn how to create a financial dashboard with Python using Plotly and Dash. Below is a sample of what we will build!

Financial Dashboard with Python

Interactive Dashboards with Python

Plotly is a great and free Python library to create interactive graphs and dashboards. The Plotly documentation is wonderful and it is more than enough in order to start creating our own interactive graphs without the need to know HTML, CSS or JavaScript. Of course, prior HTML knowledge will work to your advantage but it is not required.

During this post, I will cover the essential parts to have a working interactive dashboard.

We will build a very basic dashboard where we will input the ticker of a company and within seconds, we will see in the screen two financial bar charts displaying company revenues and net income over time.

Once you understand good enough what we are doing and how Dash works, You will be able to create more advanced dashboards on your own.

Starting our Financial Dashboard in Python — Installing Dash

First thing first, before start with the code we need to install Dash. We can easily do that by running below command in our terminal. You can skip this part in case that you already have Dash installed.

pip install dash==1.12.0

Great, with that line of code, you have installed all required components to have Dash running.

How Dash works

What we do with Dash is to create an app that will run in our local server (I will later create a post showing how to publish it online with Heroku).

Dash apps are made out of two parts. A layout component where we will need to enter HTML to create the design of the page. And a second component defining the functionality of the application.

To create our financial dashboard with Python, we will have a very basic layout. Let's start our interactive dashboard and provide the basic layout in the next section.

Creating the Financial Dashboard Layout

We will write our code in a standard Python file, for instance, dashboard_fin.py. First, we import all the required packages. Below four lines of code are needed to use core Dash functionalities. They are taken from the Dash documentation. Feel free to have a look at it if you want to know more on what each package is providing:

import dash 
import dash_core_components as dcc 
import dash_html_components as html 
from dash.dependencies import Input, Output

Core components is what we will use to create interactive Dash graphs in our financial dashboard. The HTML component will be used to structure and design the layout of the page. Finally, we also import Input and Outputs from dash dependencies.

The input will be the information entered by the user in the Dashboard. Those inputs will go into a Python function in order to return certain data.

Output on the other side will be the graph placeholder where we plot the data. We will build a Python function that will take input, transform it and return an output in the shape of a graph to be included in the HTML layout part.

Then, we will be using requests to get data from an API and Plotly to build our graphs.

import requests 
import plotly.graph_objects as go

Next, we can create the app by passing below line of code. That will create an object containing our app:

app = dash.Dash()

Finally, we are ready to create the page layout. We will have a H1 heading and then a Div section containing our input text box and two graphs:

app.layout = html.Div([
  html.H1('Financial Dashboard'),
html.Div([
  dcc.Input(id='company_selection',value='AAPL'),
  html.H3(id='text'),
  dcc.Graph(id ='revenue'),
  dcc.Graph(id ='netincome'),
  ],style= {'padding':10})
])

Therefore, we have three elements within our Div section:

• Input: Text box where users will enter the name of the company for which financial data is requested.
• Graph: This is the placeholder where the graph will be displayed. It will be the main component of our financial dashboard. The graph data and type will be built in our Python function.
• H3: Placeholder to show the name of the company that we are showing data for.

Note that the id of each of the components will be used as a reference later on in our Python function in order to pass data or to output data. It is the link between the layout and the financial dashboard functionality.

Building Functionality in our Python Financial Dashboard

Now that we have the layout ready, we can simply create a function to get our data and create an interactive graph. We are going to use financialmodelingprep in order to retrieve company financials. It offers 250 free API calls per month.

For our Python financial dashboard, I will only retrieve company revenues and net income. I will not go into the details on how to retrieve financial data since I have covered this part multiple times in my previous posts.

Then, our function will return the data points in a dictionary form and we will be using Plotly to build the graph. More details on how Plotly charts are built can be found here. Then, we use an app.callback() decorator in order to link the input and outputs to our Dash layout component. This is the part that makes our financial dashboard interactive and responsive to user inputs.

We will have two functions. Each function will be displaying data for a single bar graph in our financial dashboard. The first one, it will plot company revenues over time.

@app.callback(Output('revenue','figure'),
              [Input('company_selection','value')])
def retrieve_revenue(company):
  demo = 'your api key'
  stock = company
  print(stock)
  IS = requests.get(f'https://financialmodelingprep.com/api/v3/financials/income-statement/{company}?apikey={demo}')
  IS = IS.json()
  IS = IS['financials']
  Revenues = []
  Dates = []
  count = 0
  for item in IS:
    Revenues.append(float(IS[count]['Revenue']))
    Dates.append(IS[count]['date'])
    count += 1
  print(Revenues)
datapoints = {'data': [go.Bar(x=Dates, y=Revenues)],'layout': dict(xaxis={'title':'Date'},
                                                                      yaxis={'title':'Revenue'},
                                                                            )}
return datapoints

While the second function will plot company net income over time. Note that the two functions are almost identical. We have only changed the id and the dictionary key to extract net income from the API.

@app.callback(Output('netincome','figure'),
              [Input('company_selection','value')])
def retrieve_revenue(company):
  demo = 'your api key'
  stock = company
  IS = requests.get(f'https://financialmodelingprep.com/api/v3/financials/income-statement/{company}?apikey={demo}')
  IS = IS.json()
  IS = IS['financials']
  Revenues = []
  Dates = []
  count = 0
  for item in IS:
    Revenues.append(float(IS[count]['Net Income']))
    Dates.append(IS[count]['date'])
    count += 1
 
  datapoints = {'data': [go.Bar(x=Dates, y=Revenues,marker_color='lightsalmon',name='Net Income')],
  'layout': dict(xaxis={'title':'Date'},
                yaxis={'title':'Net Income'},
                  )}
return datapoints

Dashboard Input-Output Links

Both functions return financial data for the company that is requested by the user in the financial dashboard input box. For example, if the user passes the ticker AAPL, the Python function will take AAPL as an input and pass it to the url request in order to retrieve the financials for Apple.

Then, we append each year revenue (or net income) and date to a Python list and pass them to the go.Bar figure to create a bar chart.

Finally, the function returns a dictionary containing the figure data points and layout which is then output in the HTML graph placeholder having the same id.

To let the user known the name of the company that we are displaying data for, we can add an additional function linked to our H3 section in the HTML layout:

@app.callback(
    Output(component_id='text', component_property='children'),
    [Input(component_id='company_selection', component_property='value')]
)
def update_output_div(input_value):
    return 'Displaying Data for "{}"'.format(input_value)

Starting the Financial Dashboard

To run the financial dashboard, we only need to add below lines of code and run our python script from the terminal.

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

The app is then running in your local server on http://127.0.0.1:8050/. You can simply copy and paste the url in the browser and you should be able to see something similar to below. Simply write the ticker of any company in the text box and the graphs will be updated interactively!

Financial Dashboard with Dash

If the graphs are not showing ensure that you also have Plotly installed.

Now you should be ready to start building more advance dashboards by your own. Subscribe to my social media channels to discover in one of my next posts how to publish the dashboard online.

Check out my video tutorial explaining the code step by step:

import dash
import dash_core_components as dcc
import dash_html_components as html 
from dash.dependencies import Input, Output 
import requests 
import plotly.graph_objects as go
app = dash.Dash() 
app.layout = html.Div([ 
  html.H1('Financial Dashboard'), 
  html.Div([ dcc.Input(id='company_selection',value='AAPL'), 
  html.H3(id='text'), dcc.Graph(id ='revenue'),
  dcc.Graph(id ='netincome'), ],style= {'padding':10})
 ]) 

@app.callback(Output('revenue','figure'),         [Input('company_selection','value')])
def retrieve_revenue(company):
  demo = 'your api key' 
  stock = company print(stock)
  IS = requests.get(f'https://financialmodelingprep.com/api/v3/financials/income-statement/{company}?apikey={demo}')
IS = IS.json()
IS = IS['financials'] 
Revenues = []
Dates = []
count = 0
for item in IS:
   Revenues.append(float(IS[count]['Revenue'])) 
   Dates.append(IS[count]['date']) 
   count += 1 
datapoints = {'data': [go.Bar(x=Dates, y=Revenues)],'layout':   dict(xaxis={'title':'Date'}, yaxis={'title':'Revenue'}, )} 
return datapoints
 
@app.callback(Output('netincome','figure'), [Input('company_selection','value')]) 
def retrieve_revenue(company): 
demo = 'your api key' 
stock = company 
IS = requests.get(f'https://financialmodelingprep.com/api/v3/financials/income-statement/{company}?apikey={demo}') 
IS = IS.json() 
IS = IS['financials'] 
Revenues = [] 
Dates = [] 
count = 0 
for item in IS: 
  Revenues.append(float(IS[count]['Net Income']))   
  Dates.append(IS[count]['date'])
  count += 1
datapoints = {'data': [go.Bar(x=Dates, y=Revenues,marker_color='lightsalmon',name='Net Income')], 'layout': dict(xaxis={'title':'Date'}, yaxis={'title':'Net Income'}, )}
return datapoints 
@app.callback( Output(component_id='text', component_property='children'), [Input(component_id='company_selection', component_property='value')] ) 
def update_output_div(input_value): 
  return 'Displaying Data for "{}"'.format(input_value)
if __name__ == '__main__': app.run_server(debug=True)

Originally published at https://codingandfun.com on June 14, 2020.