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

[@CharmingData]

Hey Everybody, I hope this tutorial helps you build those beautiful dashboards. Don't forget to download the code ,the data, and the supporting docs, located under the video. 👉If you benefitted from these tutorials & would like to show your appreciation & support the existence of more tutorials: www.patreon.com/charmingdata

[@marlinn9379]

Just dropping by to say that this video has helped me enormously in creating my own Dash app with a complicated callback, thank you!

[@CharmingData]

You're welcome, Marlin. I'm glad it helped. Good luck building your future apps 👍🏼

[@iannjari6833]

My callback with multiple graph outputs and just one line from this video has eased my school project by like 6000%. Thank you!

[@CharmingData]

You're welcome @Ian. I'm glad it was helpful. Hope you get to watch future charmingdata videos.

[@portador-portador]

Adam, your tutorial videos are the best. Thanks to them, I got a job at a startup. I was looking for a position as a React developer, but unexpectedly in the test task there was a requirement to write code in Dash Plotly. I opened your channel, repeated a couple of examples and was able to beat the competition.

[@Aman-lw3vq]

You're a life-savior man. Everything was brilliantly explained. You've got a subscriber.

[@adityanjsg99]

You are the sole knowledge provider for plotly dash so far!!

[@cihangiraydoner7962]

Everyone needs a teacher like you. Thanks a lot.

[@LewiUberg]

17:18 was the solution to the problem I mailed you about :) I had my single Output inside a list. Thanks for all the content!

[@alexjones4251]

Man this was a good video to watch, without that explanation I don't think I would have gotten this for a while. Very good breakdown, thanks. I would love to see something like this but attached to a local database with an API on it. Just best practices on how to put requests into the callbacks

[@ポルク-v6q]

Hi, I'm Japanese. I study Python & Dash now. I'm not good at English. But I can understand becouse your exploration is very easy to grasp. Thank you so much.

[@CharmingData]

You are welcome @夢追人. I'm happy you like my tutorials. Thank you for watching.

[@brazilianoldschoolrap]

Thank you so much! You're giving me a massive help with my college projects, your explanations are SO clean, I can't describe in words how much you're being helpful to me. Cheers from Brazil

[@CharmingData]

You're welcome @Eduardo. I'm happy you're benefiting from my videos..good luck with your app. Greeting from New York City

[@shaheerzaman620]

Fantastic. You are probably one of the best programming teachers out there. Can you please make longer videos with real time data dashboards? I think a weather app would be great

[@CharmingData]

Hi @Shaheer, thank you for your suggestions. I actually have a weather app here: kzbin.info/www/bejne/hHawdal_isZ8bKM I'll try to make more real-time videos. If you'd like to support the creation of these tutorials, I'd be very thankful :) www.patreon.com/charmingdata

[@zubeenlapsiwala]

Thank you so much with such detailed video on dash plotly.

[@7lockwood7]

hi, love your videos! would love to see one on using `dropdown` to update `selectmode`, rather than the full graph. If you have a lot of datapoints then seeing them in context is better! you rock

[@CharmingData]

@@7lockwood7 good idea. If I understood correctly, when a drop-down changes, it will update to show newly selected data points on a graph?

[@camilogutierrez5491]

Your videos are outstanding!! Thank you

[@CharmingData]

Thanks Camilo

[@felipesimoes8]

Greatest channel i ever see in YT! Thankyou very much

[@prasannapalanivel7547]

Man!!! Thanks a ton. The way u explain is make things super easy

[@CharmingData]

Thank you I appreciate it.

[@omartarekelbehady8120]

Thanks a lot for your efforts in this channel man, the videos are to the point and really helped me learn a lot of concepts much more quickly than reading the docs. Subscribed :)

[@CharmingData]

I'm glad Omar. Good luck with building powerful dashboards. Let me know if you have any questions.

[@belderchin8652]

This was well-thought and thorough, Thank you Adam :)

[@CharmingData]

You're welcome @Belderchin. Thanks for watching this channel.

[@asharashrestha5089]

So thankful. You are a great and thoughtful teacher. I hope to build my dash app soon.

[@robertreeve8365]

great vid thank you! Alot in here very much worth it

[@ВалерияСмирнова-ц7л]

Thank you so much!! You are perfect teacher

[@CharmingData]

Thank you

[@ramon421]

Your videos are the best, I was trying to find a way to trigger a callback only the button was pressed, and this State (which I didn't know so far) worked perfectly!

[@KarimFawaz]

Great tutorial! Very helpful

[@luyang6876]

Thanks for the video, it helps me a lot!

[@mohankumar-cw5lw]

Super duper work you are doing !!

[@CharmingData]

Thank you Mohan. I appreciate it.

[@iqm901]

Thank you! your work and expertise is recognized and appreciated!

[@PatrickCrosman]

Excellent video. I keep coming back to this (and your Dash videos in general) and learning/understanding new things. Thank you for putting in all this work to help other people learn.

[@Neerajkumar-xl9kx]

thank you for this valuable instruction

[@choungyoungjae8271]

Thanks. It`s helpful to understand callback usage.

[@rosmerybetancourt4684]

Excellent!! This is all i needed, thanks!

[@CharmingData]

You're welcome Rosmery. Good luck with your dashboards 👍🏼

[@Qzbub]

This is great stuff brother. Thank You.

[@yasharrahimi973]

Great tutorial. Thank you so much. 😊👍

[@Prem19sept]

Great explanation indeed!! Thank you!

[@random_birch_forest]

Well done, Adam! Really clear explanations! It would be interesting to see a video on dash performance with somewhat large data samples, e.g. 400k rows by 30 columns and ways to speed up the dashboard performance if we use a number of filters/inputs for charts. Cheers!

[@CharmingData]

I know. A big data tutorial would be very good. I was trying to work on one with Vaex but it's still in its infancy, so I'm not sure about it yet. Maybe I'll use PySpark...

[@trojansrck123]

These are great! Better than Dash's official examples

[@siddharthvohra5102]

Thanks a lot, Charming Data was stuck on call backs for a long time, This video really helped. :) Please keep up the good work

[@CharmingData]

Thank you

[@Vimal739]

Helped me out a lot...explanation is killer ! Thanks a ton

[@longtruong9935]

excellent video, thanks for sharing Adam!

[@dude789d]

Great Video , Thank you :)

[@aealarco]

thanks, great video! looking forward for the advanced callbacks tutorial :)

[@CharmingData]

Don't forget to check out the dynamic callback tutorial that was posted several months ago.

[@caioviniciuseuzebio5119]

Thank you so much.

[@RomanGWatch]

Thank you very much

[@robertemery9348]

Big help for me in making my graphs interactive as I'm analyzing student data for some research I'm doing. Hopefully I'll continue learning enough about dash so that I can move away from using Google Data Studio for public facing dashboards as well. You've helped open new doors...

[@CharmingData]

Thanks for watching @Robert. I'm glad you're learning a lot.

[@asadrauf7111]

This is gold!

[@norfan123]

It's very helping me a lot, thanks so much,

[@samirahuseynli6956]

Thank you, man!! You helped me a lot!!! Great job, keep it up!!!

[@JoseLuis-to1iy]

Excelente 3:23, 4:50 inicia callbacks

[@Qtiezsmil3]

thank you very much for your kindness teaching the dash gonna cry T_T

[@SR-lf3ic]

hi, I am a bit confused about line 45 to 47 in your example. You said whatever returned in the function below the @call_back has to have the same properties as the output. The fig variable in the function update_my_graph is a px piechart, how is that a dictionary. I think I misunderstood your tutorial. Any further support in the reply will be truly appreciated.

[@enriquerecio1591]

Genius

[@wp4297]

Thank you, sir. A bit verbose, but very very useful

[@jimgrajek3142]

Great Video!

[@anuradhapani1918]

helped a lot! thanks

[@hc2716]

You are amazing !!

[@SolidBuildersInc]

Enjoyed your Callback tutorial. The structure of the code appears to have a nice pattern that is rather appealing. Great instruction. I also liked the video on loading to the Postgres DB. I have a APP idea and would like to see its implementation using DASH. Can we discuss?

[@CharmingData]

Hi Davis, I'm glad you found my tutorials useful, and thank you for watching. I actually offer video conference consultations to my Patreon Community, which is why it would be unfair to offer consultations to anyone. Here's a link to become a Patreon: www.patreon.com/charmingdata If that is not a possibility and you prefer sending me your idea, thoughts, or questions via email, I'll make sure to find the time to help you. Sincerely, Adam

[@Humam55560]

17:02 how did you commented out all the lines?

[@CharmingData]

Cntrl+? On an English keyboard

[@aliabbas-syed]

Just subscribed to you. Your explanations are the best among all other videos. Just wanted to say one thing that dash_core_components package and dash_html_components are deprecated and so that imports to be replaced by from dash import html, dcc, Input, Output. right?

[@XuanTran-ri1hn]

May I ask which button did you pressed to get chosen rows to have # before them? It is in minute 17:05. Thank you :)

[@CharmingData]

hi Xuan, thanks for watching. Yes, on my windows PC laptop I pressed Ctrl+?

[@choychoy3882]

Great video! Just wondering do you have videos about updating PostgreSQL database using datatables in dash ?

[@CharmingData]

no, but I'd like to make one

[@GeorgiosS-bo5oe]

Amazing tutorial. Is there a way to have callbacks for dynamically created dropdowns? Think of a table, where a user can add rows via a button that contains dropdowns. I would like to register each value of a dropdown individually.

[@Goomba99-r9t]

Fantastic job. I greatly appreciate your videos as I always learn something. Question for you: How to tie a callback to the inital get-data function? In all of your dashboards, you "hard code" a dataframe, meaning the data can't change. How could one use a input box/callback to reperform the initial API call? ex. API call import yfinance as yf ## Initialize Dash app = dash.Dash(__name__) ## Download & clean data def update_data(symbol): symbol='spy' per='1y' inter='2h' sym = yf.Ticker(text) data = sym.history(period=per, interval=inter) return data

[@Goomba99-r9t]

(yes i realize that the fx input is hardcoded into the function lol, just for reference.)

[@CharmingData]

Hi, I would create an interval component that activates the callback through the input. The callback function will connect to the API and pull new data. And the function will return the new dataframe to the data prop of a store component. You can then use that data throughput your app. See my latest video tutorial on sharing data between callbacks

[@bananakiu]

REALLY good video. Thanks! Do you have a video on having multiple callback functions by the way?

[@CharmingData]

Hi Leandre. I honestly can't remember if I made that video. I suggest reviewing my video lists to look for it

[@siddharthdhote4938]

Hey Adam, is there a space where we can share and discuss our dash plotly codes with you if we are stuck somewhere?

[@CharmingData]

Hi @Siddharth, i offer very low consultation price for my supporters on KZbin or Patreon. In case you're interested: www.patreon.com/charmingdata

[@karlavictoriatorres]

Do you know where can I found information about the options for the inputs component property??? Thanks 😁😁

[@CharmingData]

the options for the input component properties are any properties that exist for each component. For example, the radioitems component has many properties you can find here: dash.plotly.com/dash-core-components/radioitems#radioitems-properties

[@MohammedAhmed-cd4yx]

Is there anyway to push the button to the centre of the page? Also can you share documentation to add background image to the entire page. Thank you. Love your videos.

[@CharmingData]

Hi Mohammed, try watching my video on introduction to bootstrap or the recent one on introduce to layout. You'll see how to move things around.

[@MohammedAhmed-cd4yx]

@@CharmingData Thank you for replying.

[@albaisabel9667]

Amazing video!! Thanks a lot.i have a doubt/problem, is it possible to use a button inside a card to open a new tab?

[@CharmingData]

Hi @Alba, it's possible and it will be easier with Dash 2.1 or 2.2, as we are working on it right now.

[@albaisabel9667]

@@CharmingData Thank you! I am trying to do it but i don't know why the button opens another tab that i haven't create.

[@getabegaz]

This videos are cool. Is it possible to order the videos in stages from basics-----to advanced level? The current arrangement is in random order (sorry if I failed to observe this)

[@CharmingData]

Hi @Getachew. I'll try to make a course this year that has a clear progression of videos to watch from start to end to make easy to learn.

[@getabegaz]

@@CharmingData thanks for your help.

[@petermoore8811]

Really appreciate your help understand this! If only one Output can update a component, how do you implement a Status bar with Dash were several different buttons (i.e functions of the page) need to update one component. Also a calculator example. How does each number button update a display if the display can only be served by one of them?

[@CharmingData]

Great question Peter. Not everyone thinks of that challenge right after learning about the callback 👍. You can use the dash.callback_context . See here: dash.plotly.com/advanced-callbacks

[@sadafwaqas5972]

Can we populate the dropdown in the callback?

[@mitheshmascarenhas5528]

How to filter the dash table data using the dropdowns?

[@benjaminooi3830]

Hi Adam, Thank you for all the help you have given to the community so far. I created an application that runs heavy simulations and shares graphics. I dockerized the application, and run the container. The container memory usage increases for each new tab of my application. However, if I close the tab, the memory usage does not decrease. I have not found any resources about this issue. Does anyone know how to handle the tab/window closing event and how to cut the process?

[@CharmingData]

I'm not sure Benjamin. Sorry. If anybody knows, please share with Benjamin

[@roby1251]

What should I do if a callback isn't getting triggered and I have no idea why? Can this be debugged in a way?

[@MahadiHasan-qi1cb]

I was wondering is there any way you could show graphs or keep the visibility hidden unless you select input from the dropdown.

[@CharmingData]

Hi @Mahadi, Try to remove the dcc.Graph(id='graph-output', figure={}), from the latyout section. And include it in line 47 like this: dcc.Graph(id='graph-output', figure=fig),

[@idkwhatonamethiseriously]

I had a doubt regarding a code I made... I don't know where I am going wrong and would like to send the whole code. Where do I contact you.

[@CharmingData]

[e-mail]

[@vishnuvardhan2911]

Great video! I have a question though. what to do if there is more than 1 input? Thanks in advance.

[@CharmingData]

Hi Vishnu, Then, you just add multiple arguments to the callback function

[@Aravinda_Raj]

Hi I have a doubt on adding the label values in barchart and want to display on the top of the each bar . Thanks on Advance

[@CharmingData]

Hi Aravinda, this link might help you: plotly.com/python/text-and-annotations/ or this: plotly.com/python/bar-charts/#bar-chart-with-direct-labels

[@lalithakhetavath7573]

Hey hi, i really liked the way your teaching... I have one question can you help me... I need to create a submit button,reset button ,close with two inputs like name or anyother When i press submit then it should open a dialogue box with some msg When i press reset then the field should be clear When i press close then the page should close...

[@CharmingData]

Hi Lalitha, You should probably use Dash dynamic callbacks for that. See my tutorial here: kzbin.info/www/bejne/apinqH6PlqZprdk

[@lalithakhetavath7573]

@@CharmingData still i am not able to get it.... Can please provide aa code?? 1. If i click on reset button then my input fields should be clear.(previous value be cleared ) 2. If i click om close then the page should close .... It should not show any field and all

[@chriskeo392]

Can I get this to work in Spyder?

[@CharmingData]

Yes, @Chris. This should work on Spyder as well. There should be no issue there

[@mrdatapsycho6153]

Hi, These are fantastic tutorial. But that would be fantastic if you provide a playlist which will be easier to follow. Currently the playlist looks random.

[@CharmingData]

Hi, i recommend checking out my patreon membership for more info on your question. Also, my playlists are pretty specific. If you don't did then helpful, I'm open to suggestions.

[@kanishkmair2920]

How do you send list as an output?

[@CharmingData]

What do you mean @Kanishk? You can return anything you want as an Ouput. Just return [ ]

[@kanishkmair2920]

@@CharmingData Actually I wanted to send back some data. I found that in dcc.Store(), we can send the output of type "data" which can be used in other elements

[@CharmingData]

@@kanishkmair2920 good find. Yes, dcc.store is very useful. Have you built your app yet?

[@kanishkmair2920]

@@CharmingData not yet, it's in progress

[@CharmingData]

@@kanishkmair2920 good luck

[@snehabhatt2724]

I have been trying to return a bar graph developed on the selection of a transaction date in my dashboard.But the value 'figure' is not getting recognized.Could you please help me through

[@CharmingData]

hi Sneha. What do you mean the value figure is not recognized. What's the error message?

[@snehabhatt2724]

@@CharmingData resolved aftr including layout property in my bar chart section.Thank you so much.How to set the edit theme button on the dashboard

[@harshgawai1078]

How to get current data points of animation line graph using dbc.Graph id as input whenever a button is clicked?

[@CharmingData]

Hi @Harsh, try the "clickData" prop of dcc.Graph.

[@harshgawai1078]

@@CharmingData Thank you, that worked. Is there any way we can plot animated race line chart using go.Scatter but not with its "button" attribute which is in "updatemenu" but rather it should start plotting when we click button created using dbc.Button?

[@mohankumar8523]

In dash table when front end page is rendered User can do filtering . I want to let my program know when a user performs filtering . How can I do that ? Which property I should use? Note - derived_virtual_data may not work as it provides data even filter is not applied

[@samirahuseynli6956]

Could you pls advise why would a callback be triggered only once? btw I'm using the same element as output and input and calling callback in API call. Thanks in advance!

[@CharmingData]

Hi Samira , what do you mean? A callback triggers multiple times

[@LucianoPinheiro78]

Why do not use original df?

[@sawon_stories]

I am trying to create a dashboard where the datatable will be displayed based on the value of dropdown. Using callback I am trying to do that but somehow it's not displaying anything because the dataframe is not defined properly in the code. Can you help me to debug that?

[@CharmingData]

Hi @sawon, I saw someone on Plotly Forum answered your question. Good idea posting your question there. Good luck.

[@sawon_stories]

@@CharmingData yeah thanks actually I was bit of clueless so I did that.

[@addylawful]

dont know if people still see comments on this video now, will post a question here though: I have a plot of polygons (made with plotly). I wanted to add a feature such that when I click on a particular polygon, a new scatter plot is created (preferably in the same window). Is there a way to implement this feature in Dash ?

[@CharmingData]

Hi @additya. This is a very specific question. You'll probably have a better chance of finding an answer if you post this question on Plotly forum

[@EshwarNorthEast]

Hey, another great video! how to access the properties of components by id? can i do something like document.getElementById().someproperty="" kind of javascript in Dash?

[@CharmingData]

Hi Eshwar, can you give me an exmple of a property you'd like to access? If you want to access the style property of the dropdown, you can do that within the callback like this: @app.callback(Output('dropdown-id', 'style'))

[@abhinavshah138]

I'm finding it difficult to use the callback function to display my scraping code (BS4) in a Tabular format.

[@CharmingData]

Abhinav, you would need to use Dash DataTable to display your code in a Tabular format. But if you're new to Dash I would recommend you use regular html.Table() for that. Here's an example: github.com/Coding-with-Adam/Dash-by-Plotly/blob/master/Dash_More_Advanced_Shit/API/weather/weather_api.py This is from my weather API tutorial

[@absCT]

thanks for the video found the series really helpful however i was wondering if there was a video on multiple inputs/outputs along with a plotly graph, im struggling to get mine to work thank you in advance!

[@CharmingData]

Hi Abdul, I can't remember in which video I use multiple inputs/outputs, but look through this playlist. You should be able to find one. kzbin.info/aero/PLh3I780jNsiSDHCReNVtgPC1WkqduZA5R

[@NikiChJ1]

¿Is there any way to use PreventUpdate with jupyther_Dash?

[@CharmingData]

Hi Nicole, How are you? Yes. First, at the beginning of the code: from dash.exceptions import PreventUpdate Thank, inside the callback just do: raise PreventUpdate

[@NikiChJ1]

@@CharmingData thanks :)

[@fatalmokrane]

hi i have this in my layout: html.Div(style={'display':'flex'}, children=[ html.Button('Ajouter champ', id='add-fieldtest', className='button', style={'width':'250px'}), html.Button('Retirer champ', id='remove-fieldtest', className='button', style={'width':'250px'}), html.Button('Recherche', id='search-buttontest', className='button', style={'width':'250px'}) ]), and these two call backs: @app.callback( Output('new-form', 'children'), [Input('remove-fieldtest', 'n_clicks'), Input('add-fieldtest', 'n_clicks')], State('new-form', 'children') ) def add_removefield(rem_n_clicks, add_n_clicks, children): ctx = dash.callback_context if not ctx.triggered: return children else: btn_clicked = ctx.triggered[0]['prop_id'].split('.')[0] if btn_clicked == 'remove-fieldtest': del children[-1] return children else: return children + [replicable_div] @app.callback( Output('footer', 'children'), [Input('search-buttontest', 'n_clicks')], State('new-form', 'children') ) def searchtest(n_clicks, children): print(get_btn_clicked()) if n_clicks is not None: q = "" for i in range(1, len(children)): v = '' q = q + children[i]['props']['children'][1]['props']['value'] print(q) return html.Div() The callback searchtest is triggered even when i click on "remove-fieldtest" or "add-fieldtest" button, what is wrong ??

[@CharmingData]

That is weird. Given that you have your buttons in separate callbacks, the searchtest callback function should not be triggered when clicking on the other buttons. It might be triggered once when the app first starts but not again, until you click on the search-buttontest button.

[@fatalmokrane]

@@CharmingData Thank you for you answer, i finally figured it out. Do you see the add_removefield callback ? I has a children as an input, and returns the same children with new inputs field (or remove an input field). Well this output also contains a button which has a button, that's why it triggers another callback associated to the button in the children. It's a weird thing that callbacks are triggered when you return a button in a callback, i wish there was a way to prevent this.

[@CharmingData]

@@fatalmokrane nice catch 🙅

[@romanov0]

An excellent tutorial! Thank you!

[@ajayjohnson4147]

Phenomenal video! Learnt a lot. Thank you

[@CharmingData]

You're welcome, @Ajay. If you'd like to support me in creatimg more phenomenal video tutorials, it's just a couple of coffee cups a month 🤗 I'd love to have you be part of the charming data community. www.patreon.com/charmingdata Thank you, and I hope you enjoy the other tutorials as well.