Chained Callback in Dash

[@CharmingData]

Hey Everyone, Download the code here to follow along: github.com/Coding-with-Adam/Dash-by-Plotly/tree/master/Callbacks/chained_callback Que disfruten! Avísenme si algo no es claro. Enjoy! Let me know if you have any questions. Find me on LinkedIn: www.linkedin.com/in/adam-schroeder-17b5a819

[@Jubo256]

Awesome video. Thanks man

[@treyhannam3806]

You are amazing, thank you so much for the lesson!

[@agatarubacka4671]

Thank you for your work! It would be great to see tutorial for structuring the app itself. Just a hint, maybe you could use it. Great job!

[@pankajsc96gtl]

Thank you! please make short tutorial for secondary axis graphs.

[@CharmingData]

You're welcome, Pankaj. Thanks for the request.

[@yfan9642]

Thank you! This is really helpful

[@CharmingData]

You're welcome, @yfan. Let me know if you have questions in the future about Dash

[@stanislavkarasev7025]

Thank you Adam!

[@CharmingData]

You're welcome, Stanislav. I hope you learn a lot from this one.

[@cuserroro]

great work, thank you for it

[@maxxel_]

love your videos :)

[@shanthimandalapu6743]

Hi Adam, Thanks a lot for this video Can you please explain chained callbacks with dcc.checklist options.

[@JitinGinotra]

Book suggestions for someone working with trading data?

[@ap-qn9hw]

Hi, thanks for your video. Do you know if the order of callbakcs in the code is important ?

[@CharmingData]

If it's chained callbacks. I would make sure they are in order, from top to bottom. Otherwise, it doesn't matter

[@ap-qn9hw]

@@CharmingData Thank you

[@fernandoflores5074]

Hi Adam, first, I wanna thank you for the quality of your tutorial, once said that, I would like to ask you or any of your distinguished followers about the issue Im̀ facing: I' m working in a project where I need to select just one value on the list of options, in your tutorial, you manage to return all the available values at the second callback with return [x['value'] for x in available_options], but in my case I only need to return one value (the chosen one) to output to a dcc datatable. To be more clear: suppose in your casa that I only want to return one county not all of them to the graph. Thanks in advance!!!

[@CharmingData]

hi Fernando, in that case, just return the chosen_state

[@amir_forooghi]

Great !

[@siddharthdhote4938]

In the update_graph function is there a specific reason for using the selected_counties option before the selected_states option. If we reverse the order will the function not work?

[@felipebm13]

Once again, great work! I am currently writing a project where I must have a number of different diameters and these values must be entered from a sequence of input boxes. The number of input boxes (and therefore, different diameters) must be linked to the value of another input box previously filled. I am struggling to wrap my head around a method of doing this, since to collect the diameter data I would have to create an id for every one of the input boxes and I don't think it is possible to use list comprehension in the Input section of the callback, since the for loop would depend on another callback result. This problem is quite tricky to explain, but I hope you could shine some light onto it and help me with it. This project is part of a rocketry cooperation and it is totally voluntary, so if you are interested in helping with these kinds of tips we could include you in the 'written by' list. Thank you!

[@CharmingData]

Hi Felipe, Thank you for watching my videos. It is hard to understand your exact challenge. If you're interested, I actually offer a consultation for a very low price. Just sign up for the All-access patreon and I'll set something up so we can discuss your question. www.patreon.com/charmingdata You'll also be supporting me in making more of these tutorials ☺️

[@suniljokare9958]

i have a folder with lot of csv file . i want dynamic graph. but for every file need diffrent graph . how will i make it ?

[@gustavo8433]

it is possible to do the same, however, choosing between all the columns of the database instead of only one ?

[@CharmingData]

Hi Gustavo, that should be doable..

[@shikharbhatnagar8401]

Great work Adam , It is turning out to be a real help for one of my own personal project for portfolio. Looking forward more such videos. Also want to know if it is possible to use API real time and integrate with dashboard while deploying these dashboards since getting data real time from API will make the dash board real time. Looking forward if you can make the content for the same.

[@CharmingData]

Hi @Shikhar, You can definitely connect your dashboard to a real time API. I think I have an example of connecting an API to dash in my Weather tutorial or financial app tutorial. It is not real time though, because most APIs charge a fee for real time data

[@atkinsonde]

Very nice tutorial. For my application I am using bar plots with a primary selection of academic term and a secondary selection of courses that were offered in that term. The resulting bar plot shows student counts by major. I had a minor issue whereby the second dropdown field was not populated even though I used a value= in the dcc.Dropdown(id='course-dpdn', value='101B', options=[]), line - it did not place the initial selection of '101B' in the field. This caused the plot callback to pass "None" into the course field, which meant the data filtering part also returned None, meaning the plot couldn't be built, triggering a callback error message to appear. Once a course was selected, it worked fine. The way around this was to use "no_update". The import statement looked like: from dash import Dash, html, dcc, callback, Output, Input, no_update. The option is then implemented in the function associated with the third callback that prepares the plot: def fig_func(term='201801',coursenum='101A'): # coursenum is the course number picked from the drop down #print(term,coursenum) if coursenum==None: #print("COURSENUM TRIGGERED xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx") return no_update # coursenum=list(set_course_options(term)[0].values())[1] bardat = counts_by_course_dept.xs((term,coursenum), level=('Term','Num')).\ rename(index=dept_dict).sort_values(by='count',ascending=False) Note you can see I even tried to specify default values in the function arguments to automatically feed an initial working course number to the plot, but it still didn't work. Not sure why, but hopefully for anyone runs into something similar, considering the no_update option may help. The coursenum=list... you see there was another attempt to just pull the first course out of the list and feed it to bardat, but also didn't work. I also wasn't sure why it worked so nicely for the scatterplot but not for the barplot. But, this implementation works, thanks to this Tutorial, which was my introduction to Chained callbacks! I am quite sure my need for no_update is a reflection of a lack of full understanding of how this is working (e.g., perhaps I need dcc.Store for my work??). Much obliged, and hope the "no_update" helps someone who encounters the variation I did. David A

[@CharmingData]

Thank you David

[@felixasoro7944]

Hello Adams, thanks for this wonderful video. It seems after setting multi=True, one still needs to to update the callback function in order to be able to do multiselect on state

[@CharmingData]

hi @felixasoro Can you show me an example of what you mean? Are you using my exact code from the video?

[@felixasoro7944]

@@CharmingData Oh thanks, I figured it out

[@SemiiSemii]

Thank you!!! :D

[@CharmingData]

you're welcome, @SemiiSemii

[@aaronaragonmaroja557]

Using this method I couldn't create a third chained dropdown using tags from the first and second dropdowns. Is it possible to do it? It gives me: unhashable type 'list' error in python.

[@kostasmandilas4620]

What is the difference between chained callbacks and dynamic callbacks or they are the same feature?

[@sherynakaur1448]

Is it possible to back select? Ex:- In your tutorial, one would have to select a state and only then counties options would appear. What if I'd also like a user to be able to select a countie and see the state options as well? Like a two way chanined callback.

[@vivekswami8683]

Great job Adam, thanks. I have a question please. I want to have certain interaction between different figures. A hover over one figure (say scatter of x,y) should trigger highlighting (or hoverdata display) of same point on another figure (say scatter3d with x,y and z)? Just wondering if you could point on how to do it - either with Plotly alone or via Dash callbacks? Thanks once again for the wonderful work.

[@CharmingData]

Hi Vivek, thanks for watching my tutorials. You should use Dash for that. It's not simple what you're asking, but can be done through the Dash callback.

[@vivekswami8683]

@@CharmingData Thanks Adam. I will give it a try.

[@divyangpatel8803]

I am not able to create callbacks with multi = True. Do you have any relevant videos for that?

[@CharmingData]

Hi there. When multi=True, fine forget that the value is a list

[@Muhammad_Zeeshan_2732]

Hi Adam, Thank you very much for this tutorial. I have a question is there any way to make multi chain callbacks

[@CharmingData]

Hi, do you mean like 3 or 4 callbacks that are tied to each other? Yes, that's possible

[@Muhammad_Zeeshan_2732]

@@CharmingData kindly help me please I'll be very grateful to you

[@Muhammad_Zeeshan_2732]

Like i have a data having Flock , House and mic If i choose a Flock than House in chained callback , then for mic selection it check conditions of Flock and House

[@CharmingData]

@@Muhammad_Zeeshan_2732 in theory that should work in chained callback, but I recommend you posted the code on Plotly forum to see if someone can help you with the code. Make sure to tell people what error you get

[@bsy3641]

Hi, If wan to set the default value which is the last item within the range, can make it? example: January 31-days (01/01/2022 to 31/01/2022), February only 3 days (01/02/2022 to 03/02/2022) Set the default value to be latest date of the month. January = 31/01/2022 February = 03/02/2022

[@bobruddy]

In the two callbacks for the county drop down where you are updating value=[] and options=[] why wouldn't you put that into one callback with two outputs?

[@CharmingData]

Hi @bobruddy, It made more sense to me to do it that way because first I update the options and then the user chooses a value from the options to update a graph. I haven't tried it all in one callback.

[@wvxiw1098]

I get the following error on line 35: IncorrectTypeException: The input argument `states-dpdn.value` must be a list or tuple of `dash.dependencies.Input`s. how to fix it?

[@CharmingData]

what dash version are you using?

[@wvxiw1098]

@@CharmingData dash v.1.12

[@wvxiw1098]

@@CharmingData I updated the dash to version 1.17 and it worked

[@jayantachakraborty4915]

Hey Adam, I am currently facing these issue: In the callback for output(s): counties-dpdn.value Output 0 (counties-dpdn.value) is already in use. Any given output can only have one callback that sets it. To resolve this situation, try combining these into one callback function, distinguishing the trigger by using `dash.callback_context` if necessary. I do not really know how to solve it. It would be really great if you could help.

[@CharmingData]

HI @Jayanta, yes, you can only use a component in one Output. You can't repeat it in another Output in another Callback. There are many ways around this, but it depends on the type of components you're using, the data, and what you're trying to output. I would have to see the code and maybe have a conversation with you to best help.

[@jayantachakraborty4915]

@@CharmingData Hey, thanks for the feedback. Also, how do I communicate with you regarding the issue?

[@CharmingData]

@@jayantachakraborty4915 Hi, you can send me an email with your code to [e-mail] I'll try to help when I have some time available. Also, if you'd like to chat, I offer consultation for a very low price, which also supports me in creating these tutorials. All you have to do is join the All-Access Patreon Charming Data community here: www.patreon.com/charmingdata

[@jayantachakraborty4915]

@@CharmingData hey Adam, thank you so much for the warm response. I have sorted out the issue, and now it works fine. :) Anyways, keep blessing us with your wonderful videos. It helps us a lot! Cheers mate.

[@CharmingData]

@@jayantachakraborty4915 You're welcome @Jayanta. I'm here for you all if you need me. Also, if you'd like to support me in making these tutorials, it's just 1-3 coffee cups a month and it would mean a lot to me 🙏 www.patreon.com/charmingdata

[@bbedem]

Charming data I tried using your code with dataset I have shows the error message "Cannot accept list of column references or list of columns for both `x` and `y" even though the graphs and everything works fine

[@CharmingData]

Hi Bright, you used my exact code with the same data or you changed something?

[@bbedem]

@@CharmingData I used the exact code with new datasets (similar to yours).

[@bbedem]

A line by line inspection shows the error was linked to this line if len(selected_counties)==0:

[@CharmingData]

@@bbedem Try to use the new code that I uploaded to Github. I took out hover_data={'bubble_size':False}. That line of code was throwing an error. NOw, both python files work for me on my computer with Dash version 1.21.0

[@bbedem]

@@CharmingData Problem was with the plotly express(px), changed it and everything works fine

[@haroldchoi3622]

Thank you Adam! This content is absolutely fantastic! I have a question about having a 'Select All' option for State level that gives all the counties. I updated the options for the first callback, in this case State, to include a Select All label with value All, but I am not sure what to do for the Counties dropdown options and ultimately the filtering for the third callback. Any help is much appreciated!

[@CharmingData]

Hi Harold, What do you mean you don't know what to do? What are you trying to accomplish with the counties dropdown?

[@stuckdata3484]

Thank you, I have a question, why when I run the code at the final works if I put "Debug=False"? but not when I you put "Debug=True"

[@CharmingData]

Are you using Jupyter Notebook?

[@stuckdata3484]

@@CharmingData yes :'(

[@CharmingData]

@@stuckdata3484 you need jupyterLab and jupyterDash. That allows Dash to work smoothly with jupyter. I have a tutorial on how to set that up

[@stuckdata3484]

@@CharmingData thank you bro

[@stuckdata3484]

​@@CharmingData Thank you for your answers, I found a page with my problem, look: github.com/plotly/dash/issues/34

[@GabrielHernandez-sn3el]

Awesome video! I am learning plotly because my management wont pay for a tableau subscription, so this is much appreciated. Can you point me towards a video that shows how to do this with multiple graphs in a 'tableau story' like layout. I think I am getting the call backs, but struggling on how to set up the layout for multiple graphs. Thanks!

[@CharmingData]

Hi Gabriel, Yes, I think I can help you. But first, can you please show me what you mean by 'tableau story' like layout. Do you have an image or website example?

[@GabrielHernandez-sn3el]

@@CharmingData public.tableau.com/profile/gabriel.hernandez8655#!/vizhome/EuropeanBankData/Story1 The story has multiple graphs on one sheet.

[@vedantsane1216]

Hi Adam, Thank you very much for these tutorials! Currently, I am working on Tool Development in which I want to use chained callbacks but, I am stuck on one point which I could not able to solve. Your help would be helpful. Could you please share your e-mail id so that I can share the details with you? or should I past the code in comment section below? Thank you very much! Vedant

[@CharmingData]

hi Vedant. I would recommend first trying to ask your question on the Plotly forum. community.plotly.com/ They are plenty of people there that are willing to help, and I'm there as well :)

[@vedantsane1216]

@@CharmingData Hi, Thanks for your comment! 👍🏼

[@FernandaSilva-zs3ty]

Hey, Adam! First, I'd like to congratulate you on the quality helpful videos you put out. Very nice work and thank you! And up next, I got questions =B I got a code I'm working on, very first swing at dash, where I'm using chained callbacks but can't, for the life of me, realize why I'm getting the error that I'm getting, even though the dashboard does what I want it to. So...I got mulyiple dropdowns that I'd like to populate depending on what the user chooses in the previous dropdown. I populate the first dropdown with: schools_requests = requests.get("ipwhatever:portwhatever/list_all_schools") schools_data = schools_requests.json() df = pd.DataFrame(schools_data) nome = df['nome'].tolist() It gives me the names of the schools I got listed. I then send it (nome) to the first dropdown like this: html.Label('Escola'), dcc.Dropdown( options = nome, id = "escola", ) The first callback works fine and it's the one down below: @callback( Output('id_school', 'children'), Input('escola','value') ) def find_id_school(school_name): all_schools = requests.get( "ipwhatever:portwhatever/list_all_schools") all_schools_data = all_schools.json() for element in all_schools_data: if school_name == element['nome']: id_school = element['id_escola'] return id_school It basically searches for the corresponding school id given the name of the school the user chose in the first dropdown and stores this id in a hidden html.Div. Cool. Now comes the second callback, where I use pandas and don't understand why it's different from the first time. @callback( Output('ano', 'options'), Input('id_school', 'children') ) def render_grade_from_school(chosen_id): grade = requests.get( "ipwhatever:portwhatever/grade?school_id="+str(chosen_id)) grade_data = grade.json() indices = list(range(0,len(grade_data))) df = pd.DataFrame(grade_data, index=indices) ano = df['serie'].tolist() return ano So it takes the school id, requests the grades from another endpoint and basically does the same thing as the first time I used pandas in the code. THe only difference is the index argument. It started complaining about the lack of index. So I check the length of the list of jsons, generate a list of indices like [0,1,2,...] and passes it as argument to dataframe. So it stopped complaining about it. But now...I get a KeyError: 'serie'. The warning highlights this: return self._engine.get_loc(casted_key) as the source, I don't know. Still, the dropdown 'ano' (grade) correctly updates and shows it in the dropdown. But the warning never goes away. Anyway, I much appreciate if anyone could help me with this. Frustrated and jus would really like to know what's going on haha. Sorry for the long ass comment. Maybe this should be in stackoverflow. Anyhow, congrats on the awesome work!

[@CharmingData]

HI @Fernanda. I'm sorry I missed this. It's pretty complicated to read code on KZbin. If this is still a problem you're trying to solve, please email me at [e-mail]