Stock Price Dashboard built with Plotly Dash — Part I

Jacques Sham
6 min readMay 7, 2020

--

I have recently started a project to make stock analysis with data science techniques. Before getting in deep on making cool prediction models, there is a problem — I don’t have a good dashboard for myself that fits my needs for simple stock analysis. I need to build my own dashboards to accommodate my needs.

Currently, I go to the following sites for stock research:
1. Merrill — My broker account
2. Yahoo Finance
3. Google Finance
4. StockCharts.com

There are problems to the dashboard to each site:

Stock Price Dashboard Provided by Merrill (Source: Merrill)

Merrill
The dashboard provided by Merrill is great on features. It provides a lot of technical indicators for stock analysis, such as adding moving average, MACD, RSI. However, it takes so long to log in to account and generates the chart. Also, the UI of adding technical indicators is not user-friendly if I just simply need moving averages.

Yahoo and Google Finance
Yahoo and Google provide convenience for us to enquire about the stock price and stock price chart without a charge. Yahoo does a good job of providing the stock basic fundamental statistic of the stock selected but the chart does not allow me to add extra technical indicators. It happens similarly to Google that you google a ticker and Google returns the stock price and stock price chart. Both sites are great to get the real-time stock price but lack of the features if I want to do more technical analysis on the stock price.

StockCharts.com Dashboard with Moving Average and MACD (Source StockCharts.com)

StockCharts.com
StockCharts.com provides me a comprehensive dashboard to display the historical stock price on a chart with some technical indicators. However, the free version does not allow you to look at a chart with more than 6 months period which is not too helpful if I want to look at a longer time interval.

The chart to compare Growth Rate among Indexes (Source: CNBC)

Besides the disappointment of the functionalities provided by those dashboards, there is no dashboard from the sites about providing a chart to comparing the growth rate of an index (Market benchmark) with the growth rate of stock(s) price. Currently, I only see that chart on CNBC.

this chart is very useful to see whether the stock is underperformed or outperformed the market benchmark. CNBC does not provide this chart to me whenever I want nor select the stocks I want to look at.

So, I have decided to build my own dashboard which fits to my wants on my own with Python and Dash.

I want a dashboard that serves the following goals:
1. Display Stock price and related statistic of one stock along with a candlestick chart with moving average lines
2. Display the growth trend between index and its stocks

How does the dashboard works?
The dashboard is designed to have 2 tabs, each tab serves one of two goals I have listed.

Displaying Stock Price of GE stock

Let’s try that with General Electic (GE) first. On the “Stock Price” tab, I have entered GE to the dashboard, the dashboard would obtain the stock price and information from Yahoo Finance. Then, it would generate a candlestick chart of stock price along with 50-, 100-, 200-moving average on the dashboard. When you look at the dashboard I can see the closing price of GE was $5.98. The trend of GE stock price is flat because the 200-day moving average is flat, but the trend is going south because the 100-day and 50-day moving average lines have crossed below the 200-day moving average line. On the fundamental side, we can see the EPS is negative, so GE is losing money at this moment although it is offering a 4 cents per share dividend.

Besides displaying the stock price of one stock, the dashboard is able to display the growth trend of an index and its stocks. Let’s try with another example by comparing the growth trend of Heng Seng Index and HSBC Holding (0005.HK) in the Hong Kong Stock Market.

If I select the tab “Stock/Index Growth”, the dashboard will land to the default page, like the following:

Stock/Index Growth Default page

You may see the dashboard is displaying the growth trend of Heng Seng Index (HSI) year-to-date. You can see that the HSI has dropped about 15% since the beginning of the year. Let’s select or enter the ticker of HSBC Holding on the second dropdown list to add the stock price growth trend of HSBC Holding to the chart.

Comparison of HSI Growth and HSBC Price Growth

Once the chart is re-generated, you can see the growth rate of both HSI and the stock price of HSBC Holdings. HSI is the benchmark index in Hong Kong. Any stock with a stock price growth trend above the growth of HSI is outperformed. As you may see from the chart, the growth trend of HSBC Holdings is below the growth trend of HSI. Therefore, HSBC Holdings stock is underperformed.

How does the dashboard works?
The dashboard is powered by Python and Dash. First, I have defined the layout of the dashboard with Dash first. For the “Stock Price” tab, the dashboard asks the user to input stock ticker and request the stock price and stock statistics from Yahoo Finance. If the data set is successfully obtained from Yahoo Finance, the dashboard will calculate the moving averages, generate a candlestick chart with a list of the historical stock price and moving average lines on top of the candlestick chart with Plotly, and generate an HTML table to display the statistic of the stock. If the “Stock/Index Growth” tab is selected, the dashboard will obtain the list of stocks the user selected first. Then, the dashboard will request the index and stock prices of the selected stocks from Yahoo Finance. After that, the dashboard calculate the growth rate of each trading day and plot all those data on a line chart with Plotly.

You may find more detail and the code of the dashboard in my Github. The dashboard relies on Pandas, Dash, and yfinance.

Gallery

Stock Price of Cathay Pacific Airways (0293.HK) YTD
Stock Price of Microsoft Corporation (MSFT) 1-month interval
Stock Price of Coca-cola Company (KO) 3-years interval
Growth of HSBC(0005.HK) stock price and HSI 5-years interval

Reference
Github page of this dashboard

--

--

Jacques Sham

A data analyst at a digital consulting firm, a whisky-lover, an aviation enthusiast, and a gamer. Concern how to use data science to answer questions.