Build a Financial Dashboard - Python Dash - Part 1

hi everybody welcome back how's everybody doing uh in this tutorial i wanted to show you how to create a financial dashboard in pure python so a lot of you have asked me adam can you please create um a dashboard from the beginning all the way to the end like from from a to a to z and some of you have said that you're really interested in financial dashboard so thank you alta for offering this website um this is a cool website and what we're going to do today is replicate one of these cards so we're going to go in here and we'll see how we create we download the logo of a company how we change the text here and how this will change in color the graph will be green or red if the price of the stock goes up or down and also these boxes will change as the as the numbers go up and down specifically we are going to create this um card this is a dash bootstrap card and you'll see if we start from the bottom how the numbers will change in color the box here will change in color every five seconds if the stock goes up or the stock price will go up or down um and this graph is also red because the daily change is negative and this represents the daily change and we'll also put this logo on there so we're going to do most of this today um half of this today and then the other half next week i'll try and do live so i can answer any questions you might have because my goal is that you learn how to create pure web analytic or data analytic web apps in python and that's what we can do with dash plotly okay so to follow along to best follow along go in the link under the video and you'll go into this page right here which is what we're going to cover today all right um if you have questions on the video please please please add ask the question in the comments um and i will do my best to help you all right so i'm going to create a new i did some practice so i will do this good for you but i'm going to create a new um uh python file we'll call it part one and we'll close this and we'll start okay so the first thing you want to do is obviously import your the the the libraries these are all the libraries that you're going to need to create this cool dashboard like this uh these are the three things you need there's like 10 libraries here or nine you only need to install these three if you don't have them right so go into terminal and just copy paste pip install dash and those three into here into your project so you can get started all right so assuming you have all the libraries set up let's click enter and go to the next line the next line is um connecting let's see from our github connecting to our api we're going to use alpha vintage to connect to api financial data so we can download data from the stock market on any company that we would like so i'm going to put this link under the video as well go to this link and just claim your key you need a key which is free so choose your uh describe yourself however you want to describe yourself you don't i don't think you need this put your email address here hopefully you're not you're not a robot and uh and just click to get a free api you'll get that after i think you confirm an email so once you get that just copy paste this right here all this that's hashtag out copy paste that from the github and put into our new file all right let's do this together it's a lot easier when we do this together so in this first step is right here hashtag this out where you please put your key that you created and don't don't use my key if you do use my key please support me on on youtube or patreon um and then and then now you have your key in here and now we're gonna go into this so this your i just created this code so you can have it so you don't have to spend five hours just filtering the data like i did because i'm slow um but this is using the alpha vantage repository on github or library and what we're doing is pretty much we're using the key to pull a time series in the pandas format from the api and this is where we're pulling from the api so we're gonna pull a compact information we're not gonna we're only gonna pull like 400 rows not everything and we're going to pull every one minute is the interval and we're going to pull tata motors tata motors is this uh this company that we're going to pull from the stock market if you want to pull google just do a g o o g l sorry l or if you want to put macy's that's a big retail store in the united states just put m but stay with tt motors for now um so we can follow along a lot easier and you're going to get intraday you're going to get data on on a daily basis every one minute um maybe i can take this out we don't necessarily need to make 550 slices we can make the whole the whole thing we're making a data frame here then we're trying then we're just transposing renaming columns melting and then changing the the main column name to from from uh taking out a few more things and this is just so so the database is a lot um is in is formatted in a way that's easier to work with and easier to to plot graphs with um you don't if you don't want to do it you don't have to you can do it your own way but this makes it easier and you can print you should actually print and see what comes out print df head and see what comes out let's print the first 10 right so now if you run this with me run part one let's see what we get let's make this a little bit bigger so you can see and then here oh head all right let's run it again and you'll see that this is the data that you get from tata motors on i got it from or this is from yesterday because they don't give it live apis live will cost you a little bit of money so this is from yesterday and you'll see you get the latest time and it goes back to the earliest time of the seventh of yesterday of january so this is how the data is going to look like you'll see here the the indicators open high we're going to use the high high high price date and rate what is the rate of that stock what's the stock price um okay so we have that close that and now this is you're actually making a call for the api what i would recommend you do is you do this and you save it one time save it into um data data three 72 into a csv format so we run this again and when we run this it's going to exit after it saves and it's saving it into a cs data3.csv sheet which is going to be inside your project folder your project folder is right here and now i saved it as data3 csv now this is here which you can see right here data three and this is excel sheet that we just printed out i would recommend you do that because it will um it doesn't if as you build a dash app you're working with with data and you don't want to overwhelm the api you can only make five api requests per minute with a free key so just ask it once and then just pull from the csv to work with the csv data okay so here's all our data all right so we have our csv in our case i'm just going to go into github and to make it easier so you can actually run run this code i'm just going to pull it from from github right here let's go here let's go back i'm just going to now hashtag all this out because we already we already did this close the project okay hash all this out and now um this was copy basis from github right i'm going to read the data that i downloaded from two days ago from january 6. it's in my github and i do it this way so if you copy paste all this code in github it's going to work on your computer all right so let's see we're reading the csv data from github and then we're just changing uh the in the data frame so we're only taking high um high values everything that is closed or open or low is not going to be in there we're only going to have um the data frame with uh high indicators high stock prices okay so once we did that let's go back to our pycharm make sure this is yeah perfect once we did that go back to the row 36 or the next row and now uh simply we're going to start our dash app all right start the dash app here like this copy paste everything this is how you start the app we're going to use the bootstrap theme and this just copy paste this this will really never change either this is it will allow you your app to be have a responsive layout on mobile phones so just use that all right and now the fun part now we're going to build the layout we're going to build a layout of this uh bootstrap card so we're going to see all of this so how do we do that obviously you should do app.layout equals and we're going to use a dbc container we're going to open the parentheses open brackets and then in here we're going to create our first row our first row a component and calling component is going to house the whole card the whole card is going to be inside the first so all of this is going to be one row all of this thing um we're going to dbc oops dbc row parentheses open brackets you don't always need the brackets but i like to add them just in case i want to add more later more components inside dbc and always dbc column right open parenthesis brackets again and inside here we're going to put our card all right so the card is going to be dbc up dbc card and inside the card there we go and inside the card we're going to have a few things inside the card let's see what we have here we have our um card image we're going to put on top the image which is like a row and then we're going to have four rows one row for here second row for this one and the third row for the buttons and the fourth row for the text so let's build that let's first put the dbc card image open parenthesis that's going to be inside of here and then under that card image we're going to put the card body come on uh card image we're gonna put the dbc card body parentheses and bracket image does not have brackets like this but the car body does all right so we have inside the car we have our card image we're going to put something in there and inside the card body remember we're going to put four rows one two three and four so let's do that let's put four rows dbc and we'll just copy paste the rows dbc row with brackets um like that copy comma always add the commas i always forget the commas comma comma and comma so we have four different rows in the first row every row needs column components right um so in the first word we're going to have two calling components this one and this one for the column components so we'll put dbc in the first row dbc column like this and we'll just copy paste and we'll do that again comma don't forget the damn comma um dbc column abc column and later we'll define here we'll define uh the width of and of the of the columns to see how many columns we want to give it but we need two column components for the first two things in the second row we only need one column component and we only need one column component in the second row because we're only putting the graph in here we're not putting two separate things only one graph and here in the buttons we need two column components and here for the text for the last row we also need two column components because we have two separate items so let's do that let's copy paste the column components right here third row two column components and the fourth row another two column components all right so now that we have our our to our our rows and columns let's start putting in there the images and the and the empty graphs and the text so in the first card image we're going to go to the card image right here oops github and in the first card image you want to put this we'll copy paste this right here so we're going to put the card image on top we're going to style it so it's 6 rems wide and we're going to pull it from the source so you need to have an assets folder and you need to have the tata.png picture in there so you can image so it can actually work so you see how if i open my github here you'll see that in the same folder in the finance folder i have the the app that i'm building right now and i have an assets folder so you need that assets folder put inside the ad and you have to spell it assets and then just put inside the tata png or any other image you want to you want to have inside of there okay so you have that inside i don't know why i didn't show okay this is ibm so you'll have the tata png and then that will work and it will pull it automatically from there all right um and in the next in the body in the body we're going to put this text an html p text and then this this is actually a graph this is called an indicator in plotly and you can see here all the indicators in python plotly that you can use with with plotly right and we're specifically going to use just this this indicator like the percentage points and the and the delta the arrows um so let's do that let's go to the github go to our our file this is under the video and we will under the card image well in the first row we're going to have these two columns with um with the component so just copy that like that and then go here i'm just going to go over the columns again so i can repeat it and i'm copying pasting so i see the first column component is going to have this text in it and htmlp allows us to put text and the second column component is going to have a graph component that's called indicator graph now it's going to be empty there's not going to be anything anything in there so if i run part one if i run this app you'll see we should see the image and we should see an empty graph in this text right there that's um a second okay so we have an error here um did you forget to wrap multiple children in an array oh so this always happens to me um we forgot to put we have multiple uh components we have the card image and we have the card uh a body inside the dbc card so this has to be an array it has to be a string so we open uh this and below we'll actually put um we'll close the brackets i think it's here yeah okay so that should work so now we have our dbc card let's actually move this all the way to the left perfect all right so now let's run it let's save it and run it and what do we get we won't get anything unless we copy paste the if statement at the very bottom to start our app so go into github and just copy paste this to start our app perfect save it okay so now if we go uh in there like this you will see that we have our come on reload and you'll see that we have our our car that's pretty big right now tada at the beginning change of text and this is a graph we're going to make it a lot smaller so it looks like this but for now it's just an empty graph all right so let's put the next components the next component is an empty line graph and these buttons and text so going to the github copy paste the next uh row the second uh row which is the daily line graph right here underneath this graph we'll copy paste this perfect so we have our graph and under this row under the graph row we have the buttons so let's copy paste all the buttons here in the two columns like this and then in the last one we have our text that is going to change as we change the callback as the data updates perfect all right so now if we save it it will automatically run because it's in debug mode true and you'll see that we have this graph that's in the indicator it's going to be on top here this line graph that's empty right we're going to have a line graph in there and then the buttons and the text now let's make it a little bit a little bit nicer we're not going to focus too much on the styling we're going to do styling at the very end but let's make it a little bit smaller so it's not a gigantic card like that and all right so the first thing we there's multiple ways to do that the way i did it i added i styled the width and i added some um a class name to the card itself to the end of the card outside of the card children so copy that and then go all the way to you see how it says card on top you um put comma space and then just these two these two parameters the style parameter says it's going to be 24 rem and the class name this means margin top three three units of space in the top margin so if you save this and again this is right outside the dbc card make sure it's outside the dbc card children and not the column or the card image so if you go back to our website our new app now you see that it's a lot smaller it's 24 and there's space here on top you see this is three mmt3 three units of space okay another thing we're going to do to make it a little bit prettier um we're going to add with and justify to the the the main row of the whole the first row of the whole card so with six and justify center let's see justify center will go for the whole rows it's going to go right here you see on top how it says oh no that's not it we made a mistake that will be the width this will be the dbc row you see on top it says dbc row this will be justify center and the column that's right under the row outside of the of the of the children of the of the column right here go all the way to the bottom here's where you put with six because you want the width of the you don't need more than six columns because the card is small so just six columns and justify center of the main row that that whole houses everything it means that the card is going to move into the center right now it was in the left and now it's in the center about about six columns wide all right perfect let's see if there's any other things we can add we added all the all the we added perfect we added everything so now let's add this interval and this interval component outside of the of the last row so outside of the center comma don't forget your commas make some space here this is an interval that we're going to use to update the app every five seconds all right add that perfect so we have everything the interval is is invisible you can't see it now now that we have our app ready now let's start let's create this this is going to be the percentage that's going to change okay it's important to understand what this is going to do we're going to take the api data on tada that we downloaded two days ago where that's one two days old and we're going to take the the the the rate of the the price the high price of the tata stock um when the day began here is 2 27 and when the day end and ends and then we're going to compare them if it went down from beginning to end then it's going to be red and the arrow is going to be down if it went up then where it's going to be green and it's going to calculate the percentage so this is like i mentioned this is the indicator component of the of of plotly and you can see a few examples here how of how this is made so we already i already made it for you so i'm going to show you how to do it let's actually go into the callback first like this copy paste the first callback i'm running a little bit too far ahead and look at the callback before we go into the indicator so to create the indicator we're saying create a callback where the input is going to be the n intervals it's going to be the the number of intervals of this of the dcc interval components so this will and this is going to be this this argument inside the function of the callback refers to the n intervals so when we load the app this is going to be zero and after five seconds you see it says here five five second intervals after five seconds this is going to be 1 and then after 5 seconds is going to be 2 and so on and so on until the end of time so um but we have to call this whatever we have to have an argument in here called timer and then we'll do something with a figure and we'll return we'll be build we'll build the indicator figure and then we'll return this figure right we got to call it something let's call it just a empty dictionary right now let's assign an empty dictionary to this figure and then we're going to return this figure to the figure component the component property of this id and this id is right here right here is the graph it's a graph component this is the id and it refers to the component property refers to the figure so when we build a figure indicator with the data it's going to replace this empty dictionary so let's do that let's do that right now i'll go back to the callback function and let's build this figure right here that will build the indicator so now go into the github one last time and just copy paste everything inside the callback function okay from there let's erase this and just copy paste all right and then enter here it's a bit bigger so let's see what is happening here let me explain this to you um so it's easy for you to understand um the first thing we're doing is we're taking the the the data frame um that we built above the global data frame that we downloaded from uh from the api or we downloaded into a csv database and we filter so it's only the high prices it's only um these prices right here only the up let's see like this it's only the high prices we've only taken this part of the data frame we're taking that and then we're just going to reverse the order of it you see the order of this was first eight o'clock and then six and then four and then three p.m we're just going to reverse the order um so it's easier to to to graph it just makes more sense so it's going to start with the earliest time and end with the latest time and then we're going to define a day start object and a day end because we need to compare inside the indicator to see the percentage difference to arrive to this number right here the 22 percent needs to compare the first value with the last value in the data frame so that's what we do here we're saying the day start value is going to equal the data frame the reverse data frame where the date column equals the minimum date right the minimum date inside the this this this data frame is the earliest date the date that starts i think at two let's see to 2 27 p.m that is the the earliest date if you had an uh 9 a.m then this will be the earliest date so it's going to take this date and we're going to call that it's going to take the this data frame and it's going to take the rate column from this data frame and the first the only value inside there because it's only one row and it's going to be day start that's going to be the value they start and you can actually print let's um let's actually print here so you can see what it's printing out print day start and print day end you can always print inside a function and see what it gives you let's open this and make this a little bit bigger so you can see so you see it's the day start is 13.42 and it ends with 13.39 it ends with 13.39 you can also see it on the excel sheet if you downloaded your your excel sheet your data into csv so 13.42 and 13.39 this is 13.39 because this is 13.39 because this is the rate of the last or max date of the day which i think is eight o'clock at night this was the rate for eight o'clock at night so now that we have these two days in there now we can actually build a figure and this figure is probably go objects um and because it doesn't doesn't exist in polyexpress and we're building the indicator and in the indicator we have three different parameters the mode is delta you can do delta plus number oops number plus delta or or delta plus number and you can see like the number next to it which refers to this right here this big number and this big number but i don't want to see the big number difference i just want to see the percentage i'm going to see only delta the value is going to come the values we're going to calculate is the end value which it was 13.39 and it's going to compare reference to the day start value it's going to compare to 13.3 uh 0.42 um relative true meaning is going to give you the percentage and not the the the value just a percentage with two i'm formatting it so it's two decimal points all right so if you actually uh you know this works because you know if you open your calculator um if you do 13.42 minus 13.39 it's a difference of 0.03 if you divide that by thirteen point three nine four two you will get zero point zero zero two uh um decimal points uh which if you um see in percentages equals minus 0.2 percent so this is how much it went down from the beginning of the day to the end of the day so this is what we did here right with this delta figure now to what i did a little bit so it fits um so it fits the screen is um the first row is delta font i update the traces so the delta font size is 12. so this right here is 12 size font and it's not too big because if it's 30 or 40 this will go back to the second row and it's going to look all jumbled up like we saw at the very beginning and this is the height of the width of the layout again because i wanted a very small small graph to fit this row right here all right once i did that i'm going to do this as well this is going to change the color the color of the delta is through the update traces delta increasing color and delta decreasing color these are two parameters inside the updated traces that you can use for for this indicator the green one i'm going to say if day and if the value of the day end 13.39 is bigger or equal to the value of day start then the stock went up from the beginning of the day and this will be green but if not if it's smaller like in our case then the stock went down which means it's red and you can test it to see if it works because you can say instead of day end which is 13.39 let's put 14.5 and save it so this means the stock went up from 13.39 here to 14.5 which means it's supposed to be green and calculate a new percentage so let it run and now you'll see oops just forgot to save that it's right here actually now you'll see it's eight eight percent the arrow went up because 14.5 over 13.39 is an eight 8 increase and now it's green because we added this line of code to make it green all right and then we print out our fig after we update everything we print out the full figure again this full figure let's close this this full figure will go into this component property of this id which is right here this empty dictionary so instead of this empty dictionary it will actually put a figure in there okay this is actually what's happening in the back end perfect so i i want to stop here because i provided a lot of information in this tutorial and i want to give you an opportunity to to practice and change things and ask me questions going to youtube under the video if you have any questions or doubts or uh misunderstandings let me know and i'll try and help you um if if you want access to what we're going to do next week next week we're going to complete this dashboard this card we're going to actually create the graph here and we're going to create this right here so if you go here this is going to be the final result we're going to create a graph that plots the line chart of the day adds colors of green and red if it goes up and this text below the buttons are also going to change so it's green or red or neutral white if it goes up or down or stays the same for those eager beavers that want to see the whole code i do provide the whole code here the finance app code in my git lab i do offer this git lab as part of my perks to those that support me and help me in promoting my mission which is to help others build their careers in data analytic web apps in python and pure python so if you'd like to support me click the blue join button below the video or going to my patreon and i'll be very very grateful you'll also get access to different community posts and get a one-on-one consultation with me for a very very low price so this is the full code if you are interested um and this is what we're going to build next week i would like to eventually i'm open to eventually creating the whole dashboard so if if or big parts of it so if you would like me to create um a sidebar or sign up might be difficult because i have to connect a database but it might be possible um or to create this here or um other i don't know like this filter box let me know put your comments below the video let me know what you would like to see next and i will i will try to create what most of you would like to see so i can best uh serve you thank you very much for following this video thank you for watching and following the channel i hope you have a great wonderful weekend and agree next week

Channel: Charming Data

Views: 19,003

Rating: 4.9530516 out of 5

Keywords: financial dashboard app, financial dashboard with python, complete dashboard in python, Dash Bootstrap, Dash Plotly, Bootstrap Card, Dash Layout, plotly dash styling, dash callback, dash tutorial, analytic web app with Dash Plotly, Dash, radio button, Plotly, choropleth map, histogram, data visualization python, bootstrap, interactive dashboard, interactive graphs and plotly with dash, plotly express, dbc.col and dbc.row bootstrap, indicator graph, plotly tutorial, finance kpi

Id: iOkMaeU8dqE

Length: 35min 23sec (2123 seconds)

Published: Sun Jan 10 2021