Create A Financial Dashboard From Yahoo Finance With Python

A guide for myself and others on how to use python, dash, plotly to create your very own financial dashboard

Disclaimer: This is mostly just me practicing and learning. I find explaining a concept makes me understand it better. I also appreciate constructive criticism.

Alright, let’s get started.

So let say you are interested in the stock market but you want some flexibility and customization in your chart or this case, your dashboard. We can create one simply from very few lines of code.

Step 1: Import

We will need some modules.

I will be using yahoo finance since it is easier and it doesn’t need you to grab cookies to access its content. A certain site does that. I’m looking at you, MarketWatch.com

from yahoofinancials import YahooFinancials

Then we need to import dash and plotly. I think they are easier to use and quick to get it running while makes it looking very nice.

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

And lastly, we also need pandas.

import pandas as pd

Once you finished installing and able to import them without any errors, we can move on to the next step.

Step 2: Layout

We will be using dash for this.

Now dash has two components. First is its layer which controls by dash_html_components (it helps if you are a bit familiar with react). The second is its interaction which controls by dash_core_components (create graph and stuff).

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
    html.Div(["Input: ",
              dcc.Input(id='my-input', value='initial value', type='text')]),
    html.Br(),
    html.Div(id='my-output'),
    html.Button("Submit", id="submit-button", n_clicks=0),
    dcc.Graph(id="output-graph"),
])

Then put this at the end of your code. This will make sure that the server continues to update every time you save.

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

Run it and you should see where Dash is running in the terminal. It looks like this.

Let’s break down what we just put in.

The external_stylesheets itself and as an argument in Fash. It is just a way to stylize the webpage. We can work on this more but let’s not focus too much on it atm.

On the other hand app variable is just a way to initialize the app.

Most of the layout is pretty straightforward. It will create a Div and within it are other divs (line break, button, and input box). We will need to assign some id onto the input, button, and graph. We will use them later.

So at this moment, you should have something that looks like this.

Alright, now that we have the layout (skeleton), this is where the fun begins.

@app.callback(
    Output(component_id='output-graph', component_property='figure'),
    [Input(component_id='submit-button', component_property='n_clicks')],
    [dash.dependencies.State(component_id="my-input", component_property="value")]
)
def update_output_div(n_clicks, value):
    tech_stocks = value
    yahoo_financials_tech = YahooFinancials(tech_stocks)
    getName = yahoo_financials_tech.get_stock_quote_type_data()
    df = yahoo_financials_tech.get_historical_price_data("2020-01-01", "2021-03-19", "daily")
    df = pd.DataFrame.from_dict(df[tech_stocks]["prices"])
    fig = px.line(df, x=df['formatted_date'], y=df['close'], labels=dict(x="Date", y="US:OCGN $"), title=getName[tech_stocks]['longName'])
    return fig

Now, I know this is a lot of code, and trust me. I had trouble dissecting this as well but since this whole thing comes together as one, bear with me.

This is how dash deals with states. They have this thing called a callback function. Every single time an input( as we see on line 3 above) gets updated, this will trigger Dash and it will automatically call the update_out_div function. Once it gets called, it will need to output somewhere, in this case, it gets outputted as a figure in the dcc.Graph with id “out-graph”( line 2).

The update_out_div function is where to deal with state and how to get historical quotes from yahoofinancials. The gist of it is quite straightforward, it is just the syntax that may be a bit tricky. Once we have done getting the data, we will put the data onto plotly and return the figure.

There we go, that is how to create a basic financial dashboard from python.