{"id":671,"date":"2024-04-19T00:00:58","date_gmt":"2024-04-19T00:00:58","guid":{"rendered":"https:\/\/alex-jimenez.com\/?post_type=rara-portfolio&#038;p=671"},"modified":"2024-11-12T02:50:28","modified_gmt":"2024-11-12T02:50:28","slug":"plotly-dashboard","status":"publish","type":"rara-portfolio","link":"https:\/\/alex-jimenez.com\/?rara-portfolio=plotly-dashboard","title":{"rendered":"Dash and SQLAlchemy Dashboard"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\">Source Code: <a href=\"https:\/\/github.com\/alexjimenez99\/DashStocks\" data-type=\"link\" data-id=\"https:\/\/github.com\/alexjimenez99\/DashStocks\">GitHub<\/a><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Summary<\/h4>\n\n\n\n<p>A stock forecasting Dash dashboard with a backend MySQL database; the database was setup in AWS RDS as well as a local MySQL server. The final project features the local database simply to avoid unnecessary costs. Below is a high level view of the programming layout.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"396\" src=\"https:\/\/alex-jimenez.com\/wp-content\/uploads\/2024\/08\/GIthub-Layout-1024x396.png\" alt=\"\" class=\"wp-image-888\" srcset=\"https:\/\/alex-jimenez.com\/wp-content\/uploads\/2024\/08\/GIthub-Layout-1024x396.png 1024w, https:\/\/alex-jimenez.com\/wp-content\/uploads\/2024\/08\/GIthub-Layout-300x116.png 300w, https:\/\/alex-jimenez.com\/wp-content\/uploads\/2024\/08\/GIthub-Layout-768x297.png 768w, https:\/\/alex-jimenez.com\/wp-content\/uploads\/2024\/08\/GIthub-Layout-1536x593.png 1536w, https:\/\/alex-jimenez.com\/wp-content\/uploads\/2024\/08\/GIthub-Layout-155x60.png 155w, https:\/\/alex-jimenez.com\/wp-content\/uploads\/2024\/08\/GIthub-Layout.png 1724w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><strong>Figure 1<\/strong>: Github Repository High Level Overview<\/figcaption><\/figure><\/div>\n\n\n<p>App.py has the main plotly app code. The database.py file has the code necessary to create and update the MySQL database. The utils.py file has some utilities for querying the stock data. Other files are supplementary and either used for debugging or have a future use. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Dash App Design<\/h3>\n\n\n\n<p>The dashboard was built using the <a href=\"https:\/\/plotly.com\/examples\/\" data-type=\"link\" data-id=\"https:\/\/plotly.com\/examples\/\">dash framework<\/a>, which features a high level api for html, and css design within Python. The main dashboard features three tabs: a stock history page, stock forecasting page, and a recent articles page with additional information regarding a stock.  The stock forecasting page was created with the vision of incorporating the <a href=\"https:\/\/alex-jimenez.com\/?rara-portfolio=time-series-forecasting\" data-type=\"link\" data-id=\"https:\/\/alex-jimenez.com\/?rara-portfolio=time-series-forecasting\">Time Series Prediction<\/a> portfolio project; this still has not been done. Below is a screenshot of what the dashboard looks like. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img decoding=\"async\" width=\"1024\" height=\"615\" src=\"https:\/\/alex-jimenez.com\/wp-content\/uploads\/2024\/08\/Top-of-Layout-1024x615.png\" alt=\"\" class=\"wp-image-885\" style=\"width:698px;height:auto\" srcset=\"https:\/\/alex-jimenez.com\/wp-content\/uploads\/2024\/08\/Top-of-Layout-1024x615.png 1024w, https:\/\/alex-jimenez.com\/wp-content\/uploads\/2024\/08\/Top-of-Layout-300x180.png 300w, https:\/\/alex-jimenez.com\/wp-content\/uploads\/2024\/08\/Top-of-Layout-768x461.png 768w, https:\/\/alex-jimenez.com\/wp-content\/uploads\/2024\/08\/Top-of-Layout-1536x922.png 1536w, https:\/\/alex-jimenez.com\/wp-content\/uploads\/2024\/08\/Top-of-Layout-2048x1229.png 2048w, https:\/\/alex-jimenez.com\/wp-content\/uploads\/2024\/08\/Top-of-Layout-100x60.png 100w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img decoding=\"async\" width=\"1024\" height=\"616\" src=\"https:\/\/alex-jimenez.com\/wp-content\/uploads\/2024\/08\/Bottom-Layout-1024x616.png\" alt=\"\" class=\"wp-image-886\" style=\"width:706px;height:auto\" srcset=\"https:\/\/alex-jimenez.com\/wp-content\/uploads\/2024\/08\/Bottom-Layout-1024x616.png 1024w, https:\/\/alex-jimenez.com\/wp-content\/uploads\/2024\/08\/Bottom-Layout-300x180.png 300w, https:\/\/alex-jimenez.com\/wp-content\/uploads\/2024\/08\/Bottom-Layout-768x462.png 768w, https:\/\/alex-jimenez.com\/wp-content\/uploads\/2024\/08\/Bottom-Layout-1536x924.png 1536w, https:\/\/alex-jimenez.com\/wp-content\/uploads\/2024\/08\/Bottom-Layout-2048x1232.png 2048w, https:\/\/alex-jimenez.com\/wp-content\/uploads\/2024\/08\/Bottom-Layout-100x60.png 100w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><strong>Figure 2<\/strong>: Dash Stock Dashboard Layout<\/figcaption><\/figure><\/div>\n\n\n<p>The dashboard can be updated by changing the tabs at the top of the page. The company news, earnings, volume, and stock price data will update accordingly to the selected options. The next portion will go into detail on the database design. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Database Design<\/h3>\n\n\n\n<p>The database was designed using MySQL and SQLAlchemy with Python. The schema was a simple 5 table schema that features information related to stocks. The database schema relationships can be visualized below.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"730\" src=\"https:\/\/alex-jimenez.com\/wp-content\/uploads\/2024\/08\/Stock-Database-Layout-1024x730.png\" alt=\"\" class=\"wp-image-887\" style=\"width:671px;height:auto\" srcset=\"https:\/\/alex-jimenez.com\/wp-content\/uploads\/2024\/08\/Stock-Database-Layout-1024x730.png 1024w, https:\/\/alex-jimenez.com\/wp-content\/uploads\/2024\/08\/Stock-Database-Layout-300x214.png 300w, https:\/\/alex-jimenez.com\/wp-content\/uploads\/2024\/08\/Stock-Database-Layout-768x547.png 768w, https:\/\/alex-jimenez.com\/wp-content\/uploads\/2024\/08\/Stock-Database-Layout-84x60.png 84w, https:\/\/alex-jimenez.com\/wp-content\/uploads\/2024\/08\/Stock-Database-Layout.png 1490w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><strong>Figure 3<\/strong>: MySQL Database Schema Layout <\/figcaption><\/figure><\/div>\n\n\n<p>More tables could have been added or connected with relationships, but the primary purpose of this was to demonstrate some competency of executing SQLAlchemy commands. The tables that were loaded into the main app script had additional processing to ensure all values on the dashboard would update together to display the correct information.  <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Conclusion<\/h3>\n\n\n\n<p>More functionality could have been added but this was more of a proof of concept and display of competency using these packages. If I were to invest more time, it would be for an actual project that I&#8217;d be using. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Source Code: GitHub Summary A stock forecasting Dash dashboard with a backend MySQL database; the database was setup in AWS RDS as well as a local MySQL server. The final project features the local database simply to avoid unnecessary costs. Below is a high level view of the programming layout. App.py has the main plotly &hellip; <\/p>\n","protected":false},"author":1,"featured_media":700,"comment_status":"open","ping_status":"closed","template":"","rara_portfolio_categories":[10,7],"_links":{"self":[{"href":"https:\/\/alex-jimenez.com\/index.php?rest_route=\/wp\/v2\/rara-portfolio\/671"}],"collection":[{"href":"https:\/\/alex-jimenez.com\/index.php?rest_route=\/wp\/v2\/rara-portfolio"}],"about":[{"href":"https:\/\/alex-jimenez.com\/index.php?rest_route=\/wp\/v2\/types\/rara-portfolio"}],"author":[{"embeddable":true,"href":"https:\/\/alex-jimenez.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alex-jimenez.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=671"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alex-jimenez.com\/index.php?rest_route=\/wp\/v2\/media\/700"}],"wp:attachment":[{"href":"https:\/\/alex-jimenez.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=671"}],"wp:term":[{"taxonomy":"rara_portfolio_categories","embeddable":true,"href":"https:\/\/alex-jimenez.com\/index.php?rest_route=%2Fwp%2Fv2%2Frara_portfolio_categories&post=671"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}