Convert a Power Bi Dashboard to Dash Plotly in Python

hi everybody welcome welcome i hope you're having a great weekend and enjoying the weather that's certainly warming up i'm definitely going to take a walk in the sun here in a few minutes uh but before that i wanted to record this video because i want to show you how to create um a power bi dashboard using plotly dash in python so this dashboard is a replicate of this power bi dashboard that somebody created and submitted in 2017 for power bi microsoft um data story contest so as you can see here we have bitcoin prices the date the uh the bitcoin uh supposedly was bought the date the bitcoin was sold and the amount that of money that was invested in that bitcoin and then uh how much profit the person made so if you bought something in march 3rd and sold it in november 18th of 2017 and you invested this amount of money then you would have made 618 000 and a profit of 502 which is amazing um so this is what we're doing here this is an exact dashboard but we're using plotly and dash and it's just pure python so we're not using javascript or css or anything it's just um python where we get the exact same results and you can also zoom in and do cool things with the graph as well that you can't really do here unless you click on this button um and i want to show you this this tutorial because dash is becoming very very popular a lot of people are using it it actually received a higher score from the reviews here on g2 a higher score than power bi so this is my intention is to teach you how to to use dash and create pretty much any dashboard that you want we're going to use this github so if you want to download the code you're using pycharm or visual studios this is the python file which is right here okay and if you want to use a jupyter or jupyter lab jupiter dash then here's a python python file which which i'm going to be using for this video right here now i would recommend if you want to go into the description below the video i'm also going to have a link with a video uh layout so you can jump to any section of the video that you would like the video i'm going to focus on this tutorial on the layout and then on the five different callbacks the callbacks is what makes the the dash elements interact with each other so the first callback is going to focus on this section the second callback is going to connect between the dates and the slider third callback is the graph fourth callback is these four and then the fifth callback is going to connect between the buttons and the conclusion so jump to any section of the callback that you would like of the video if you want to specifically focus on that on that callback all right so let's get started assuming you downloaded one of these files um open them up and run it on your computer uh if not that's okay i'm also gonna show you how to do it um just on this video so the first couple of things is we are um downloading the libraries here right we're importing the libraries and these libraries i'm going to use jupyter dash you need jupiter you need dash 1.19 or higher anything before 1.19 won't work because of the certain callbacks that we're using we're importing pandas and plotly express and then we're going to read the the data frame right we're going to read the the json file the json file is as you can see here is in the same a folder as my jupyter python file it has to be in the same folder right so i'm going to read it in here inside the pandas data frame i'm going to create a new a new axis a new index and i'm going to make the date actually a column instead of an index i'm going to drop the last two rows since they are just description of the json file and then i'm creating two different columns number column and colors column the number column is going to help us connect between the range slider and the dates right here and the colors column is going to help us make the graph bars in different colors so as you can see here at the very bottom then i'm printing the data frame you'll see the number column and the colors column that i created okay and the next thing you want to do is going to start the app with jupiter jupiter dash i'm using the bootstrap component and this is the layout now the layout in dash right here in the inside the dash bootstrap container is everything that you are going to see on the page so right from row 21 all the way to row 153 it seems like it's a lot of code but it's not that complicated all of this in here is what you actually see on the page okay so for example and this is important you have to familiarize yourself with these components this is just the title if i were a rich man and here we have two buttons an investment button and a non-investment button right so you can see here if you go to the to the app you have the title and then you have the two buttons and then you have an input and a slider and dates and a range slider so you can see here we have uh an input that starts with ten thousand and a slider that starts with ten thousand and then we have two dates it's not a date picker range this is single two day components and then we have a range slider and underneath that you have all these cards one two three four five cards that you can see here dash bootstrap cards one sell price my profit all the way to conclusions and at the very end on the right side of the page you have the graph right the the pixel um plotly express bar chart inside the graph component right here all right so this is how the layout looks like it's important to remember the ids of each component because we are going to use the ids to tie the components to each other on the dash app again this is just a layout if you actually these are all the callbacks if you actually hashtag out all the callbacks so they're not they're not part of the app you'll see that the app will show certain things but they're not connected the slider is not connected to the date picker this slider is not connected to the dollar amount there's nothing here and the graph is not changing with with the changes of of of the days or anything else so to actually connect all of this we are using the callbacks all these callbacks right here like i said there's five different callbacks all right so let's go into the first callback the select dollar amount this callback right here is going to be tie is going to tie this input field with the slider so if i move the slider this changes if i move the input field the slider will move as well as you can see right so how am i doing this let's go back to the code and take a look what i'm doing here i'm taking two inputs um the the input of the slider and the input of the d amount remember the d amount if you go back to the to the layout the d amount is the callback id of of the input field right so i'm taking the value which is 10 000 and i'm taking the value of the slider inside my inputs right here and it's always top to bottom so if i have two inputs the first one is this and the second one is this it's left to right i need two arguments inside the callback function input value refers to this and slider value refers to this if you added another input you would need to add another argument in here okay okay um what i'm doing here i'm actually going to um take this which is um it's it's it's dash language to understand what input was triggered what button was triggered or component right you don't have to understand this it's just copy paste anytime you use component triggered just copy paste this code and then typically you will see this if the component triggered is equal to the slider now slider is because the slider is the id if it's equal to the slider then do something if it's not equal to the slider then it's probably equal to the only other option is d amount so it's either slider or d amount and i'm saying if it's equal to the slider if the slider is the component that is triggered right i'm triggering the slider right now and moving the slider if that was triggered then assign the slider value which is right here which is let's say the slider value right now at the very beginning is 10 000. so assign this value of 10 000 to the input value and then return both input value and slider value so in essence i'm returning if this is 10 thousand this is also ten thousand and then i'm returning here ten thousand and here ten thousand and this is returning to the outputs all right this is the most important part of the callback you have to return the same amount of objects as the number of outputs that you have if you have two outputs two component properties in the outputs then you need to return two objects right and it's again it's top to bottom left to right top to bottom left to right so the first object or the first value or property is the value of the input so i'm going to return this to here and the second object is this returning to here top to bottom left to right always remember that so here i'm returning 10 000 and here i'm returning 10 000. and if i move the slider to let's say this is probably about i didn't add marks here but you can add marks you can add text so you can see where you are but if i move this to about 500 000 let's move this to 500 000 then this will this is triggered this will equal 500 000 this will equal 500 000 which means that now the input value will also equal five hundred thousand and then i'm just returning this right here five hundred thousand five hundred thousand five hundred thousand five hundred thousand are the new values of the input and the slider same thing the other way around same thing if if the triggered component is the the input then i'm going to return whatever that input is this input could be let's say if i return a hundred thousand now if i'm returning and find the input value is a hundred thousand then the input value is going to be assigned to the slider value so both are a hundred thousand and then i just return them here a hundred thousand and a hundred thousand see so as you move this the slider moves as you move it down the slider moves and if you move the slider the input moves so these are it's like a circular callback uh that you can do with with uh with dash app dash 1.19 now we're going to do the same similar thing with the second callback this callback of buy and sell dates this is also like a circular callback and this will tie the dates to the slider so if i change a date here it will move the slider if i change this it will move the the second slide or the second handle it will move this handle this is tied to this and this one is tied to this and same thing if i do the slider it will change the dates here all right now how do i do that what i'm doing here um i'm taking three three inputs so i'm taking the date property of the this component and thinking the date property of this component these are the date components if you go all the way up you'll see on row 58 this is the the first date component the date picker single component and this is the second my date bicker end id all right so i'm taking these two values the date property that's what i'm taking i'm also going to take the value property which is a list here of the range slider so this is remember this is a list don't forget this is important this is a list let's go back down so we're taking the value list of the slider date this is the range slider so we have three inputs we need three arguments this one top to bottom left to right this one refers to this this one refers to this and this one refers to this and now i'm doing the same thing just copy paste just like i had here copy paste i have my component triggered and now i'm asking if the component triggers a slider date slider date is the id if this is a component triggered then do something or if this is a component trigger the start date or the end the the first date component or the second date component first a component triggered or the second date component triggered then also do something right create new objects object object objects and then i'm returning these objects right so the first object is going to return to the date property of the first component the second date is going to return to the second the the second component and then the slider value it's it's similar to this but it's not the same it's a different component this one will refer to the value of the slider the range slider right which is this value right here whatever value that is it's a list so the first item and the second item of the list all right so let's let's see how this works as an example so i'm saying if the component uh triggered with slider date so let's see a slider date let's say we choose we choose let's say this is about um um 34 let's say this is about 34 right so what happens uh if i do this right now if i because i just triggered the slider so this is like saying i chose um a list because the slider component is value this value right here is a list so let's say i chose 34 comma and the second one let's say it's uh whatever 389 right 389 right here and this is 389. now where are these numbers coming from because you can't really see the numbers here these numbers are coming from the slider range itself right here range slider there is from the value goes from 0 to 389 this is the initial value but it goes from 0 to 389 so go all the way back down and now you'll see let's say i chose 34 and 389 on this on the range slider 34 to 389 now what i'm saying is filter the data frame where the num the value of the numbers column equals the first item of in in the list right the first item in the list so where this equals 34 right this will only will only show up as one row because there's only one row that equals 34. and now take that row that that data frame row and take the date column and the value of that date column so if i chose for example the number 3 not 34 but 3 filter data frames i only have this and then just take the date values i'm taking this value right here right so i took the date value well let's say it's equal whatever 2017 two and four let's say it's equal that 2017 two and four so take this date value do the same thing with with with this right here filter the data frame where the number value equals the second item of the of the list so it equals this 389 right which equals this right here 389 filter the data so it's only one row take the date call and then take from the date column take the date value all right so this date value which will be the last date value because 389 in the in the numbers column is actually the last row so whatever that last row is maybe it's i think it's 2018 124 i think right so now we have a start date and an end date and now just return this into our outputs so the start date this 2017 2 4 is going to return to the to the date picker right here the end date is going to return to the second day component right here and the slider value comes from this is not triggered so it doesn't come from here it comes from here and the slider value is what we chose right is what is uh where is it is 34 to 389 right and that's going to be returned to right here so that's why if i move the slider to um uh 300 and about 365 or 260 i'm returning this date right here if i'm removing the first item in the slider list it's changing the first date component right and then i do this the other way around right just like we did here the other way around if i if the component triggered is the date one of these dates are triggered right here then take that date filter the data frame according to that date and then just take the the value uh in the numbers column and that's only one row there's only only going to be one value take the value of this data frame that's filtered by the end date and then just create a new slider value uh list which is going to be the the the first number and the second number and then i'm returning this list right here instead of that okay so that's what what it's doing you can return any number you want if you know let's say i want to return in this list i want to return um 1 and 388 or let's say 200 250 obviously this is not interactive i'm just returning always 1 into 150 this is one and this is 250 right here this would be 389 but this would be 250. you see it always jumps back because i'm always returning the same slider right so this is not recommended this is just to show you how you're returning different numbers um uh into into into the slider value right here all right so that was the the second component the third component is updating the graph and this is i think a little bit easier than than the last callback here i'm taking the date value from the first day component and the date value from the second date component so this one and and this one i'm taking them and then doing something with them inside the callback function i'm filtering the data frame i'm building a polyexpress bar figure and then i'm returning the figure to the figure property of the bar chart now if you go to the bar chart all the way up row 143 you'll see that the bar chart is called bar chart id and the figure is a property so you can't just put anything you want you have to take a property that belongs to this component so this figure is a property of the dash core component graphs so instead of this i'm actually going to return a different figure let's go back down so let's see here i'm taking the start date and the end date of this i'm making a copy of the data frame always make a copy of the data frame and then i'm filtering the data frame so the data frame uh the date column take the date column where it where the values the dates are bigger or equal to the start date and the um and the values of the another date column um here are smaller or equal to end date so it's going to be between so if i chose if i chose here um february 17 to november 30th february 17 to november 30th now i have only a smaller data frame with only those rows and i'm going to say inside the color column of this new data frame put the string black all right so instead of you see all the way down here instead of torque turquoise put the string the string is going to be black okay but it's not for it's not for all the data frame it's only for the data frame that was that was within these two dates these are going to be black so now some some rows in the colors column will be black and some will still be turquoise because turquoise is something that i set at the very very top at the very beginning you'll see um turquoise so everything is turquoise but some of them are going to be black so you go down here we have rows 207 some of these are black and now i'm just creating the bar figure right so i'm doing dff is the new data frame x is the date um x-axis is date y-axis is bpi the bitcoin price and then i'm just changing the marker color i'm changing the the bars would be according to the dff colors column so the dff colors column some of them are black and some of them are turquoise according to the dates that we filtered right and then this is just making the the graph a little bit bigger um so as an and then it's returning the figure into the figure property so if i choose for example from all the way from one to all the way to the very end i can actually change this all the way to the very end january 24th then all the rows within this date range are going to be black that's why you don't see anything that's turquoise everything is black all right let's go to our fourth callback our fourth callback is update prices and profits so this right here it's updating um these price these four four dashboard cards a little bit a break or a side commercial and just want to say that if this tutorial so far has been benefiting you and you've uh you've learned a lot i hope you would consider supporting my cause supporting my work this takes a lot of time and resources and your support is very much appreciated so you can click you can either join my youtube membership my youtube channel or click on the link above if you would like to check out my patreon and get more information on dashplotly thank you okay so the fourth callback um let's create all this all this data right here so let's go in there so here i'm taking three inputs right there's three component properties that's why we have three arguments right here and then i'm doing something i'm creating different objects in python and then i'm returning these objects into the outputs now because i have four outputs i have four objects here and each one of them goes into their respective their respective output property okay so if you forgot the layout these are the children these properties belong to each uh bootstrap car it's this bought and sold children you can go up to row button soul button sold go to row 92 you'll see the id is bought this is the idea of just an html and i'm returning something into a string into the children of this id so i'm going to return a string here i'm going to return a string into this this id this component right here and and also here and also here all right this is the output that's what i'm returning so what i'm doing here i'm taking them the the the both dates start date and end date and the value of the slider this is not the range slider this is the regular slider this is the one right here i'm taking this value so this is not it's not a list it's a string um and i'm saying um filter the the data frame so the date column the value of the date column um equals the start date so it's only going to be one row because i only i have one day per row so this is going to be a date a full data frame of all columns but one row so i'm going to take the bpi column and that that value from that column so if i for example chose the start date to be 2017 january 2nd if i chose january 2nd here then it's going to filter the data frame so only this row shows up and then i'm going to take the bpi values i'm going to take this 1018. so i'm taking the bpi value 1018 and then i'm formatting it right this is like 1018 right i'm going to format it so i have a dollar sign before it and then i put and then i put a comma if it's like more than a thousand it's going to have a comma and i'm only going to have two digits after the dot right and then i'm returning this by price formatted right here as the first object of my children of the bot component html h2 so if i go here and i say move this to all the dates let's move this date to january 31st january 31st has is one row it has um it has a bpi value of 967. the dollar sign comes before only two digits after the the dot and if it's if it's a bigger price then it's going to be with a comma okay so this is the children of of the bot component which is html dot h2 or h3 i'm doing the same thing with the sold price filtering the data frame according to the end date according to this one right here i'm going to have one row from that row take the bpi value and format it the same way i've formatted this one right here and then just return it solid price is sold price formatted here i'm returning i'm going to see my profit so this profit is is going to be this right here right and what i'm doing is i'm saying um do this is just a like a small algorithm function in math just taking the slider value which is this value right here whatever that is take that value divided by a thousand and then just do the sold price i want to see my profit so it's usually the the new price um minus the old price times um this right here because of the bitcoin and dollar differences this is how he's he's doing it on his on his website right here but you can do it anyway you want right and then my profit just format it the same way with no digits after the dot right and i'm returning it right here which is the children of the profit number go up and see what what this is and the last thing i'm doing i'm returning the profit margin which is a percentage uh just doing sold minus bot uh mark which is the margin and then divided by divided by the bot price time a thousand this is just simple math how to see your increase percentage-wise and then just format it and return it to the children of the profit percentage what is that children profit pct profit pct row 119 this is the children right here okay so this was this is the fourth callback right the last callback is going to be the invested buttons now the invested button is this um as i change this right as i change this i'm actually changing this right here i am rich or different text right here and i'm changing the color of the button so how do i do that i'm actually i'm going to go in here to the last callback and here i'm taking two inputs the the n clicks of each button and i'm going to output the message and the different colors of the boot dash bootstrap button component right this colors are properties of the button components if you go into the button component bootstrap you'll see here that our color is a property color is a property a button component you can see all the way down here as well that color is one of the properties so you can't put anything you want there you can only use the property that belongs to the bootstrap and i have like nine different options here either primary secondary and that's the color that i want so if i want blue i don't put blue here i put primary this is a bootstrap class so that's what i'm doing here i'm taking the color um color property right so i'm saying let's see what button was triggered doesn't matter how many times it was triggered just i want to see which one was triggered if the not invested button was triggered do something if the invested button was triggered this right here then do something else right create different objects and then return these objects in the return of the callback function which re return them returns it right here so just as an example if i if the component triggered was invested button if this was a component triggered then the message is going to be i am rich just a string and i'm returning this message right here right inside the children of the concluding remarks if um and then i'm saying the color the invested color is going to be called info and the non-invested color is going to be called lights so this is info and this is light which goes into here info and light right these are the colors again because in the dash boot trap you have info and you have light you can't return teal and gray or teal and white you have to return these bootstrap classes inside the color property you have to assign them inside the color property so this is a little bit of dash bootstrap but if you want to learn more about das bootstrap which will help you understand how how i'm creating rows and columns and using some class names to create some spaces between the components click on the video above this is the introduction and a complete tutorial of dash boost app once you see that it will be a lot clearer how to style your app it's not that important right now the most important thing is to understand the callback which is why you're focused on the callback in this tutorial but if you want to learn about the styling then you can look at the video above also if you want some to learn about the the the card body which is a dash boost trap card dbc card there's another video where you can learn about the card which will explain a little bit of this again you see that for about 30 minutes and you'll understand the card and lastly if this was relatively new to you and and the callback is something you really need more more videos on more tutorials click on this video above and it will show you all about the callback introduction to the callback we'll explain the output we'll explain the input and i think it even explains the state so this was a lot clearer for you that's pretty much it i hope you benefited from this if you did subscribe below hit the like button and please consider supporting my work it does it does mean a lot to me it encourages me to continue and to um to simplify these uh difficult um topics for you better together so help each other out and never give up keep practicing talk to you later

Channel: Charming Data

Views: 3,394

Rating: 5 out of 5

Keywords: power bi dashboard with dash plotly, power bi dash plotly, powerbi plotly, dash or power bi, plotly or power bi, dash plotly or powerbi, dash callback, dash bootstrap, dash layout with power bi, tutorial with python in dash, Data Visualization GUIs with Dash, Plotly Dash Tutorial, interactive web applications, introduction dash plotly, Dash series for Python, Dash and plotly tutorial series, Data Visualization GUIs, web application dashboard, python, dash, dash plotly callback

Id: lSWMvQ4YEIM

Length: 33min 13sec (1993 seconds)

Published: Sun Mar 28 2021