The Dash Callback - Input, Output, State, and more

hi everybody welcome back to charming data i hope you had a wonderful week a couple of weeks ago i posted this uh introduction to dash tutorial but i realized that i didn't really go into the callback and the callback is the most important thing you need to know in dash in order to create powerful interactive graphs for example here you see how the drop down value changes and it changes the graph component in this case the pie chart accordingly this is only or can only be done via the callback you cannot create any type of interactive dashboards without the callback decorator so this is what we're going to do today i'm going to focus on the callback and teach you all the things you need to know in order to create these powerful interactive dashboards with dash if reading some material also helps you make sure to open this link below the video i'm going to give you this url and go into the basic callbacks the basic dash callback a lot of this i'm going to talk about in this tutorial so feel free to read if there's something you don't understand and feel free also to go into the youtube comments and just ask me any questions you have if my explanations were not very clear also i'm going to create in the future i'm going to create a tutorial on advanced callbacks and and callback gotchas and client-side callback just make sure to subscribe to my channel turn on your notifications so every week you will get a notification of that video and just other videos that i create on dash plotly so you can make interactive powerful dashboards in python the data that i'm going to use is data by um stefan stefano leone on kaggle and the sources finance yahoo.com um this had like 25 000 rows but i i made it smaller truncated it to 3 000 rows we're going to focus on the fun names and we're going to focus on the year to date returns of specific fund names in order to create these this dashboard okay so let's get into it oh make sure that if you want to skip to a certain section of the video make sure to go into the video layout and just choose the section you want to go to or you want to see again i would really recommend to wait or to see the end or the last part of the video of this tutorial because here's where i go over the most important things you need to remember in order to master the callback make sure that you know these things because this will make your life a lot easier when you build these powerful dashboards with um with python okay so let's go into the code make sure to import these libraries because you need these libraries to work with this with this dash app if you don't have them just pip install plotly and just pip install dash and within four minutes you will have these libraries that you can import and then we're going to read this csv document of mutual funds into a pandas data frame we're just going to create a list color that we're going to use later below start your app and then go into the app layout okay i'm not going to go over every single property in here because there's in the dash introduction and many other videos i go over the properties but we can just see that we have the first component is going to be the drop down which refers to the drop down up here and then we have the button right here and then we have another component graph which is going to be populated with the pie chart and then we have the div below and then we have the radio item right here so we have one two three four five components inside our layout most important thing is to remember the id we're going to use the ids to connect everything inside the callback okay so always have an id for your components okay and then we're going to have two sets of callback we're going to have this callback and we're going to have this callback this is just for tutorial purposes they are mutually exclusive so you can't have both of them first we're going to go over this which refers to we're going to learn about the single input we're going to learn about the single output the state how to prevent the callback from triggering and prevent an update and in the second callback we're going to learn about the multiple input multiple output and dash no update okay so just let's do one at a time all right so let's do this um i'm really excited about teaching you about the callback because it's it i practiced this a lot and it's not easy to to simplify um this but but i hope i'll be able to to teach you this so you can create these strong dashboards again if you have any questions please under the youtube video just go into the comments and ask me any question you have okay the most important thing to remember is every callback needs an output and an input you can have callbacks without state but you need an output and an input for every callback every callback has the output input and state they have a component id and they're also comprised of a component property so they always have these two things id and property the component id will tell the app what component you are referring to inside the layout so in this case my drop down is a component id of you guessed it my drop down so now i'm telling the app um think of or look into this drop down and the property i'm gonna i'm gonna use is a value so if you go into the drop down you'll see that documentation has information about the drop down but here in pycharm if you also hover on this it will give you the different properties that the that the drop down has and in this case the drop down has several different properties we're going to focus on the value property okay and as you can see here the value property is a list of the funds names okay so remember it's a list of strings of the fun names so we're going to take something we're going to take this value and we're going to use it in the function and do something with it in order to affect the output okay something important to remember every callback under the callback you're going to have to define a function you can call it whatever you want but every function needs arguments and the arguments have to refer to the inputs and the states so if you have one input you'll have one argument if you have an input and a state you'll have two arguments or two inputs you'll have two arguments as well and the arguments refer to the component property of the input or of the state okay so this valve chosen just a name that i created you can change this name to whatever you want refers to the component property of the drop down in this case the value all right so let's see what the value is the value is a list of fun names so this is the same thing of saying this this is exactly the same thing okay but we can't do this because we want to make it interactive so it's not always going to be these fun names it's just going to be whatever the user chooses okay and now let's look into the function and see what happens and how it affects the output because that's the whole goal of the function to do something with the input and state and do something with your data in order to impact the output so we're going to say if the length of the valve chosen is over is bigger than zero and we know that the initial length is bigger than zero because the initial length is three fun names so it's a list of equal three then then do this right and what does this mean we're going to print the value chosen we're gonna print the type i always recommend printing these things because they help you understand what type you're looking into and what the value looks like and then all i'm doing here is i'm going to filter the data frame so i only get the rows of the funds chosen right the list of those funds so now i have probably only three rows because by default i only have three funds and then i'm going to build the pie chart important to remember the dff you have to make a copy of the data frame make a copy of the data frame never change or filter the data frame and update it the original data frame that you have on top if you have a df on top like that's your data frame that's your global uh um data frame you if you change it you want to make a copy of it a lot there's a lot of different reasons of why you want to do that i'm not going to go into it but always inside the function make a copy of your data frame if you're changing the data frame you're building the pie chart and then you're returning the figure what does this mean whatever you return in the function the callback function returns the component property of the output okay remember whatever a function returns the object the function returns returns the with the component property of the output so in this case the output id is graph output so we know that we are referring to the uh the component the graph component and it's going to return an object into that figure property right so it's going to return object into this you don't need this this is just for tutorial purposes so you can see but what i'm actually doing if i'm returning a figure this fig that was built it's exactly the same thing as saying figure equals fig all right again but you can't do this because you want your your dashboard to be interactive so you just have an empty dictionary and it's a dictionary you need to know what you are returning you need to know what the property type is in this case the property type is dictionary because figure is a dictionary in in the graph component so you have to return whatever you return has to be in the form of a dictionary if you return a list it won't work okay some properties are are lists for example look at the div here we'll see below that um the children of the div is a list so if you for example return an output to the children component property of the div you have to return some an object that that is a class type list all right okay so i'm returning the figure here and this figure is a dictionary which is actually the pie chart so now every time i update the drop down let's take out one one property it actually triggers the callback and now you can see down here below because i'm printing the values chosen was fidelity and 500 infidelity adviser we only have those two and the list here the type is a list do i'm creating this pie chart i'm updating it and then i'm returning it into the output of the graph which is why you're returning two if i return only if i do only one then it returns only one okay input triggers whenever the component property of the input changes it triggers the callback okay remember this whenever the component property of the input changes it triggers a callback so that's why if i the button here doesn't mean anything because i don't i don't put it in this callback but every time i change the component property of the drop down i'm triggering the callback okay so we went over the single input the single output now let's look at state what is state let's do this hashtag this out hashtag is back in let's add n here and let's print this okay so what did i do here what what do we have right now right now we have the same output the figure of the component property but we have now we have an input and a state so because we have two we need two arguments inside the function and it's by order so the first argument refers to the first um input which is the n clicks and the second argument refers to the drop down so we already did this we already know what val chosen means because we did it two minutes ago with this but what is the input here this input n refers to the n clicks property component property of the button my button is the button id right here and n clicks equals zero and clicks is just a property that counts the number the button the number of times the button was clicked the first default is going to be zero so this is the same thing as saying n clicks we can just say zero again you can't do this because you want it to be interactive so you just say and clicks so n is always going to refer to the number of times the button was clicked and because input whenever input changes the callback is triggered whenever a button changes the callback is triggered the difference between input and state is that state does not trigger the callback state can change i can change the values of state of the drop down because state is a drop down and it will not change the pie chart you see i'm changing the drop downs but it doesn't change pie chart because it's only state and state does not trigger the callback to trade the callback i have to change the component property of the input which is in this case my button so if i change the click so i'm going to click on it once you'll see that it changed the pie chart because now we'll go to the bottom n equals 1. if i click on it again n equals 2 and n equals 3 and so on and so on so whenever the input changes which in the case is a button the pie chart changes i'll take out some values it doesn't matter it doesn't update i have to update only when the input changes when i click on the button so usually state is is used when there's like a lot of options that you want the user to choose before updating any graph or maybe when you want to do like a form when you want them to fill out their email address or or credit card information you need to put things in state so the callback is not triggered every time the user changes something and so it's usually used with a button as well okay but what happens if you don't want um the the the output to update what if you don't want the figure to update so for example um you have these and then the user just says you know what i don't want i don't want these i want to clear everything out right and then update the graph with trigger the callback by hitting the button so what right now you'll see that it didn't change anything right why is that because we used prevent update and prevent update is what what you want to use in order to tell the app that the output should not be the output property the component property should not be updated so the callback is triggered because the input did change but the component property of the output did not update so that's the difference it's usually when you're dealing with graphs um if the user does something that triggers the callback but you don't want the output to update you always use the prevent update so what am i doing here i'm saying if the length of the valve is chosen remember the valves chosen in the drop down is the list of the fun names so if the list of the fund names is empty the length is going to be zero and if the length is zero then i'm going to raise not return raise a dash exception dot prevent update okay because you do not want the dashboard to the output to update although the callback is triggered so remember that the callback is triggered okay so i hope that explains the oh one last thing um prevent initial call dash the way dash is build is that when you refresh a page like this it will always trigger all the callbacks in your dashboard all the callbacks are automatically triggered when you first load the app or when you refresh your page if you do not want the callback to initially trigger just change this to false to true so if it changes this true and you save it now you will see that as soon as this reloads or refreshes that it's not going to trigger the callback just refresh this oh this okay let me explain um okay let me just reload because it didn't save there we go so now i saved it so now you see it did not trigger um the callback because i put initial call back to you sometimes you will want to do this just just know that you have this option okay let's hashtag this out and let's learn about multiple inputs and multiple outputs all right when you have multiple outputs you need to put them inside a list you don't need to do that probably should not do that when it's one output but multiple outputs need these brackets because they need to be inside a list and the inputs as well if they're multiple or also just like single they have to be inside of a list okay so we already know that we have multiple inputs we need to have multiple arguments for each input so in this input we're going to have the radio item component and we're going to have the properties going to be value so the first argument of this function color chosen refers to the radio item value which by default is radio item value by default it's black so it's just going to be black when we load the page and the second input refers to the drop down value that we already saw initially is three um mutual fund names all right so i'm going to take these two arguments and i'm going to say um uh before that i'm going to take these two arguments i'm going to do something inside the function and then i'm going to return uh in a certain case i'm going to return a figure and i'm going to return something and because i have two inputs i have to return to two objects right because every object you return in the function refers to the component property of the output in this case i i don't you don't always need to use component id like this you can just oops you can just write it this way this refers to the component id and this refers to the component property it's just a shortcut so in this case i have component properties of the figure and another component property is the style so i need to return two things inside the function okay remember this is very important in the function you have to return two things if you have two outputs or you have to return three objects if you have three outputs and by order so the first one returns this one and the second one is always going to refer to the second output property okay so let's see what happens here here i'm going to say if the length of the valve is chosen equals zero meaning if um the user um cleared the drop down and there is no drop down let me save this i forgot to save and reload it so if the user cleared the drop down and the list is empty i'm going to say return dash no update so return dashing update is going to say do not update the output okay but do update the second object which is the second figure which is the style all right so let's see what happens here reload it initial callback is false so it's going to it's going to load a pie chart and now if i do x then it's not going to update the pie chart you see it's going to stay 3 but it is going to update the style it is going to update the color so this is blue and this is red and this is yellow what how am i doing this um the style let's see the style of the sentence output what is this style of sentence output the sentence output here is the id of the div and the style is a dictionary again you don't need this to put that in there but i i'm putting it so you can see remember the style is a dictionary and you have to remember what class type it is so i have to return some kind of dictionary and what i would want to return is the color here so as you probably know a css dictionary um and in style you have to return something like this so it's going to be color and then the the key is going to be color and the value is going to be the color chosen remember i'm not going to put this inside a string because this is already a string the color chosen is already a string from here color chosen refers to color chosen which refers to my radio item component which refers to the value and this value in the radio item is a string black so you don't have to put it inside quotation marks to make it a string it is already a string so i'm going to say the color is going to be whatever the color was chosen and that's going to update the style of the second output but in the first output i'm not going to update it this is the difference between dash no update and dash prevent update dash no update allows you to partially to not update some of the outputs when you have multiple outputs prevent update like we used here before right here just says raise prevent update just don't update the output it's usually used with one output but if you have multiple outputs and you want to update some of them then you just some of them you do updates and then once you don't you just do dash no update okay now we're going to say else if the value chosen if there's something in the drop down again like above just filter the drop down create the pie chart return the figure which is first to the first output property right here and return the style which is a dictionary of color and the color chosen so whenever i do this and i'm changing the drop down i can see that it is um returning um it's returning the the values of the drop down which was returned to pie chart here i do not i'm not using the button because i don't have button in the callback and whenever i change the the radio item it's also returning the new style color of the radio item and if i do x then it doesn't it does dash no update okay okay so we went over a lot let's do a summary of everything that we just saw okay so the first thing to remember is a callback automatically triggers when the app is loaded when or when a browser is refreshed so if you do not want dash to trigger all the callbacks inside your app just do prevent initial callback um true and it will not trigger them when the page loads which is right here let's us do this okay we'll do that later second thing whenever the component property of the input changes the callback is triggered so if anything in the input changes right here is the radio item the callback will be triggered and try to update the output but the callback is not triggered when the component property of the state changes so here above let's see what that means again as a refresher here above we use state so we're saying whenever the component property of state changes the callback is not triggered only when the component property of input changes and this is very important to remember because you're going to uh use many times your dashboard with excel sheets with forms or with input fields that you don't want to update immediately um so you just put state if you don't want the callback to be triggered four the callback always needs an input and output you don't necessarily need a state but every callback needs an input and an output or multiple inputs or multiple outputs every state and input need to be represented as arguments so if you have three inputs in one state you need four arguments inside your uh your callback function the callback function returns data or objects to the component property of the output so this right here is always whatever it returns always returns information to the component property of the output if you have multiple outputs you need multiple return objects always make a copy of the data frame so if you're manipulating a data frame inside the callback function always make a copy of it don't manipulate the original data frame that is outside of your layout right here any given output this is important i didn't go over this any given output pair a component and property pair right here a component id and a component property every single pair of output can only have one callback so you cannot use this in another callback you can't have another callback down below or anywhere in your app that has the exact same output you can have an output with component property graph output and component id and component property of maybe mode bar or any other properties that the graph has but you cannot use these same pairs in another callback output only once and if the user this is the last thing that we already went over if the user triggers the callback because they changed something in the input but you don't want the output to update then just raise prevent update but if you have multiple outputs then and you only want the sum of the outputs to update and some not to update make sure to use a dash no update so that's it i hope you learned a lot i hope you understand a lot better the the callback and everything that can be done with the callback um uh if you like this tutorial please hit the like button um don't forget to subscribe below and turn on your notifications so you can see future videos about the callback and about powerful interactive dashboards with dash um keep practicing never give up and always remember we are better together so try and help others out as well thank you very much and have a good day

Channel: Charming Data

Views: 21,384

Rating: 4.9737272 out of 5

Keywords: Dash and Python Callbacks, delve into callbacks within Dash, What is a callback?, how callbacks are used in real applications, dash and plotly tutorial, callbacks in dash, patter matching callback, dash and python, plotly dash, plotly, python, dash, data analysis, plotly python, data science, dash callbacks, basic callbacks, dash python, create dash callback, callback, dash interactive dashboard, callback tutorial, react callback, callback decorator, Dash Input, Dash State

Id: mTsZL-VmRVE

Length: 26min 54sec (1614 seconds)

Published: Sun Aug 30 2020