Introduction to Dash Plotly Dynamic Callbacks

[@CharmingData]

Hi friends, thanks for watching. Feel free to use the comments section below if you have any questions. Also, join the lovely community of Dash Plotly here. community.plotly.com/ 👉If you benefitted from these tutorials & would like to show your appreciation & support the existence of more tutorials: www.patreon.com/charmingdata Thank you 💛

[@naveenshetty2891]

Thanks for doing such a wonderful work. i was further trying to extend your work my applying a radioButton on top of Add- graph ( Monthly , Daily) sales data . i defined a call back to pass this selected variable M or D to your display_graphs callback , but the value does not seem to go thru. app.layout=dbc.Container(children=[ dbc.Row(children=[ dbc.Col(html.A(html.Span('x', className='myspanclass'),href='/MainMenu'),), dbc.Col(html.H6("Sales Analytics",className='text-center text-primary '),width=10), dbc.Col(html.A(html.Sup(today,className='myspanclass text-primary' ),),), ],), dbc.Row(children=[ dbc.Col(html.Div(children=[ html.Form( [dbc.RadioItems( options=[ {"label": "Day", "value": 'D'}, {"label": "Month", "value": 'M'}, ], value='D', id="radioitems-input", style={'display': 'flex'}, name='myradio', ),], ), html.Button('Add Chart', id='add-chart', n_clicks=0,title='',), ],),), ],), dbc.Row( dbc.Col(html.Div(id='container', children=[])), ), ],className="myclass",fluid=True) @app.callback( Output('radioitems-input', 'name'), [ Input('radioitems-input', 'value'), ], ) def set_options(chosen_month_daily): # print(chosen_month_daily) return chosen_month_daily @app.callback( Output('container', 'children'), [ Input('add-chart', 'n_clicks'), # Input('add-chart', 'title'), # Input('hold-value', 'value'), ], [State('container', 'children')], ) def display_graphs(n_clicks,div_children,): get_month_date_value=request.args.get('myradio') print(get_month_date_value) # print(myvalue) i tried all combinations , but it does not work , if required i can send you the full code basically i need a need a user input (Monthly or Daily) to be passed to the dataframe for filtering data accordingly. thanks and regards

[@CharmingData]

@@naveenshetty2891 Sure Naveen. I have a lot of pending questions to answer, but I'll try to get to yours soon. My email: [e-mail]

[@andrewalvaro1000]

sorry to be off topic but does any of you know a way to log back into an Instagram account? I stupidly lost the password. I would appreciate any help you can give me.

[@nathanquinn1959]

@Andrew Alvaro Instablaster =)

[@andrewalvaro1000]

@Nathan Quinn I really appreciate your reply. I got to the site thru google and Im waiting for the hacking stuff now. Takes quite some time so I will get back to you later when my account password hopefully is recovered.

[@abdelwahidbenzerrouk8271]

The Videos you are making should be on the official page of Dash-plotly, Awesome Work, Thank you.

[@filmelesar]

You should be hired by Dash-Plotly as official video maker! Awesome tutorial !

[@CharmingData]

Thank you Jaroslav

[@MultiAdity]

Been using these videos to get my basic right for my internship and this is honestly the best content I could have asked for. Thank you so much!

[@adityanjsg99]

Have studied all your videos, recently there was a client request which needed incorporation of all the features (Chained callbacks, dynamic callbacks, multipage etc). Did it with a bang!

[@CharmingData]

Thank you for watching Aditya

[@random_birch_forest]

Adam, your videos on Dash are great, please make more! Your explanations are very clear!

[@GordonShamway1984]

I simply love your videos! Just great. Please keep up the great work

[@CharmingData]

Thank you Stefan

[@shwetanarkhede2831]

Great tutorial !!! Thank you very much. Can you also tell me how to remove the added graph?

[@kn58657]

You are a great lecturer, Sir. Very pleasant and instructive tutorial!

[@CharmingData]

Thank you Edvard.

[@bankStanding]

currently learning dash/plotly. This was so helpful. Thanks, subbed

[@CharmingData]

You're welcome @Spencer. Let me know if you have any questions in the future.

[@anandanand5884]

Excellent work and the teaching skills and knowledge is excellent. The way you deliver the content is great. One request though, Could you make a video about how to upload data on the fly on a plotly dashboard, read it and then display the graph on the dashboard itself. And, the previous data should be automatically discarded and it should use the new data that we uploaded.

Great videos, could you do a video on how to do a multipage dashboard. Thanks

[@k1awdttt]

Dude you saved me a lot of headache! Was just thinking about how to dynamically add more charts and how to allocate the IDs and layout... Now this made everything easier! Thank you so much!

[@Rajkumar-lu8ci]

Thanks your video is very useful… I tried this dynamic callback in multi page dash but when I switch between pages whatever I added using this add chart button gets refreshed to default only one chart. Can you help me to keep the plots added be there until the dash is reloaded ?

[@Jessica112197]

Your videos literally saved my life. Thanks for all your hard work! Is really cool learn with your content :D

[@CharmingData]

Hi Jessica, I'm glad the tutorials are helpful for you. I wanted to share that I'm trying to reach my goal of getting a microphone to improve the quality of my tutorials. If you'd like to support, I would be grateful: www.patreon.com/charmingdata Would love to see some code on how you use dynamic callbacks. No te inhibas en mandármelo :) Have a great week,

[@shaokangtong1983]

Definitely too much stuff to intake but you make it in a crisp way. Thanks

[@PB-ud5ux]

Thank you for the great video. I wondered to know how to remove the charts if we mistakenly added extra charts? Thanks

[@CharmingData]

hi PB, you would need to add the delete button similar to what they have here. dash.plotly.com/pattern-matching-callbacks#todo-app

[@abhilashchandran3126]

Thanks a lot and you saved a ton of my time. 😍Kudos to your simple explanation.

[@CharmingData]

You're welcome. Good luck with your dashboards. Let me know if you have any questions

[@abhilashchandran3126]

​@@CharmingData Thank you 😃 I already made a dashboard now for my thesis review. I did stumble upon an issue, how to pass data to the callback on click of a button. In case of a dropdown I could use value. But for a button only n_clicks is allowed. So I decided to pass the data through the id of the button and extract it from the context.triggered as shown in the documentation. 🤔😐

[@CharmingData]

@@abhilashchandran3126 can you please rephrase your question. I'm not sure I understand.

[@abhilashchandran3126]

@@CharmingData Sure, I will try 😅. In my case I have about 5 gcc graphs and 5 buttons registered respectively as output and input in a common app callback using the MATCH pattern as you described. For html button the only value we get is `n_clicks` when registered as input. So in the common call back I have no other information other than clicks to identify which button is clicked to perform dynamic time consuming operation based on the button pressed. I will put up a gist.. Thats easier I guess 😁.

[@CharmingData]

@@abhilashchandran3126 why can't you add the dropdown as s callback input and pull information from there?

[@longtruong9935]

Could you make a video for dash layour. config dash layout for inline run and port run. thanks

[@marc6487]

Nice tutorial, thanks a lot broo

[@enasmaged]

Hi Adam, I'd like to ask you a video tutorial explaining how to create a dashboard consisted of chained callback of more than two dropdown menus with a map read from either geojson or csv file and pie, line or bar chart such that with the selected item in each dropdown menu the map and chart respond accordingly. I appreciate your help.

[@willyrex16]

Hi Enas!! Did you find a solution? Tahnk you

[@mariiatrokoz]

thank you for your tutorials! I have a question. I am trying to execute your code, but all I see after loading the page is blank boxes and no graphs. Could you help me with that?

[@CharmingData]

Hi @Mariia what dash version are you using? Are you using the exact code that I provide on GitHub?

[@Eduhikethinker]

Sir,Is it possible to make a Drop-down based folium map plot with CSV file values in markers in Plotly dash??

[@ronaldfungss]

Thank you so much.

[@willyrex16]

Hi Adam!! I'd like to ask you how can I make a callback inside another? You used n_click as index in dynamics callbacks, but how can I use a dorpdown value to refer it at the second callback?

[@CharmingData]

Hi @Gonzalo. It depends. How do you want to refer the dropdown value in the second callback. What exactly are you trying to do?

[@ignaciobarrazuazo1867]

Nice tutorial. Adam, is it possible to hover over the added graphics?

[@CharmingData]

I'm not sure why not. Did hover not work for the other graphics?

[@ignaciobarrazuazo1867]

@@CharmingData I haven't tried it yet, do you know how to do it?

[@CharmingData]

@@ignaciobarrazuazo1867 I'm not sure I understand your question. Are you asking if you can hover over a graph for what purpose? Are you trying to see a hover tooltip?

[@gustavo8433]

It is possible to filter the data by dynamic dropdown, and update the graph, like we do in Excel ?

[@CharmingData]

for sure Gustavo

[@randyone-p7h]

is it possible to change the index in this dictionary id via callback?

[@CharmingData]

yes, that should be possible. But try not to update the global variable

[@shanmukhaponnuri1172]

Hi, I am having 3 .py files, one .py file returns a html.div() and I need to pass some of the output to the callback present in another .py file. can you help me how to do this?

[@CharmingData]

Hi @Shanmukha, try to see how I write the code for this multipage app. github.com/Coding-with-Adam/Dash-by-Plotly/tree/master/Deploy_App_to_Web/Multipage_App If this doesn't help, you can also use dcc.Store() to store data from certain callbacks and import/use them in another python file.

[@ekwan16]

Great video! Thank you so much for explaining!

[@yanliu6202]

Can you please advise how to persist the data between different tabs(pages) in dash. I have watched your multiple page video. But still couldn’t make it work. I have an index.py which is main py file. And inside here. A callbacks will direct users to different tabs. Each tab can upload different kinds of input files. And in the third tab , should show a join result of previous two tabs. Hope you can help me. Thanks, in advance !!

[@CharmingData]

Hi Yan, did you watch my most recent video on multipage because I made a similar video a long time ago? If you watched it, I can share how I would share data between pages there. I would put the dcc.Store() in the main app.py file, and then I would use callbacks in the other pages to pull from the dcc.Store through the Input argument.

[@Winterbasse]

Would it be possible to have each added graph auto-update based on an interval? Lets say you have data streamed into your dashboard, which is converted to a pandas dataframe on site. Would it be possible to update each graph by appending the new data every interval?

[@CharmingData]

hi @Winterbass, Yes. You can probably append the data by using the extendData property of the dcc.Graph(). dash.plotly.com/dash-core-components/graph#graph-properties

[@mohankumar-cw5lw]

Could please make video on multiple pages(URLs) app ?

[@CharmingData]

I will. Thank you for the suggestion

[@saadkhan5606]

It is really helpful thank you. I have one question, How can I remove one of the graph, after added but I dont want it anymore

[@CharmingData]

Hi Saad, I answered you via email

[@jeanobrega]

I liked this video so much. How can i combine this code with dcc.Interval to update the graph data reading the csv file ciclically?

[@vonf123]

Can a fixed (non-pattern-matching) Output be tied to a dynamic input? It seems like not but I wonder why. It would be convenient if I had say 20 different buttons that all feed one output div. Without dynamic inputs, I would have to list all 20 input buttons. e.g. I couldn't get this to work, but should it? @app.callback( Output("output_div_id", "children"), Input({'type':"generic_btn", "index":MATCH}, 'n_clicks') # this would match any of several buttons. )

[@patryk9073]

Can it be applied in case I generate x dcc.Inputs (based on a value from Dropdown for example)? How can I write a callback with varying number of Inputs/States?

[@nicholaslepetit4158]

Hi there! First of all, awesome videos! Very enlightening and good referenced content! Second of all, I’m working on a Dash app for my university and I’m having a problem you might know something about, if you could spare a few minutes it would be greatly appreciated! I’m using one dcc.Loading() component enclosing each dcc.Graph(), but when I change one of the inputs, I expected all components that fall under a call-back that involves that input to display the animation, instead I have a total of 2, out of 7 components, that display the animation, while the others work as expected but updating without an animation. It is worth noting that even a callback with two figures standing right next to each other, only one of them updates, and it’s always the same ones. I’m following the documentation and there is absolutely no difference between the coding of the elements that show the loading animation, from those that don’t... Have you ever encountered this before? Could this be due to an input method being connected to more than one callback? Thank you very much for your attention if you managed to spare the time to read this, and any input from you or any other Dash user that could contribute is greatly appreciated. Also, it’s for a good cause, which is to improve the availability of un-biased COVID related data and its evolution, on different regional levels, through the maintenance of this dashboard in the universities main website. Thanks again! Have a great one! Awesome videos!

[@CharmingData]

That is really weird. I've never experienced that, Nicholas. Maybe something is off with that output inside the callback... If you don't manage to solve it, I recommend trying to ask for help on Plotly Dash forum. There are many experienced people there that are helpful.

[@nicholaslepetit4158]

Thank you very much for your reply and advice! I will surely drop by the forums to search for a solution! When I manage to solve this, if its useful, I will drop another comment here with what I’ve found! Thanks again, and keep up the great content! Cheers!

[@CharmingData]

Nicholas, did you solve it?

[@miloniparekh5246]

Hey Adam, thank you for such amazing videos, learnt a lot from them. I am working on a similar dashboard where i want to add the containers one below the other, instead of next to each other as shown in this video, on adding a chart. Could you please help with that? Thanks.

[@CharmingData]

Hi Miloni, have you seen or worked with the layout in dash bootstrap components?

[@babylonian977]

Thank Adam, however I am getting "NameError: name 'State' is not defined"

[@mohnkummrsection4356]

Import States from dash.dependencies as -- from dash.dependencies import States

[@xcreame1991]

Hi thank you very much for this tutorial. I have one question, is there a way to save the layout of the app to local directory so that when user refresh the page the latest app layout along with the selection of the drop down, bullet selections loaded instead of starting fresh the initial layout?

[@xcreame1991]

Dear Sir, could u pls help to answer the abovr question ?

[@mikechellepernia5609]

Can you also create a tutorial for dash plotly for boxplot with face grid function, but the y-axis is dynamically changed once we added specific parameters or specific columns in CSV file. Thank you.

[@CharmingData]

Hi Mike. I'm a bit busy with a nice list of future tutorials, but I appreciate your suggestion. If you'd like an opportunity to discuss future tutorials on a more personal platform, feel free to check this out here: www.patreon.com/charmingdata

[@andreujove5356]

Your videos are awesome. I'm having problems to make a botton or an item of a checklist that clears all buttons of the checklist all and returns the figures. Any idea?? Thank you so much!!!

[@gandraswathi5002]

Nice tutorial with detailed explanation, Can you please do a tutorial on cross filtering as well... Thank you

[@hamzagorgulu3664]

Thank you it helps a lot! Do you guys have a problem with drawing the line plot in the code inside Github?

[@CharmingData]

Hi Hamza, Thanks for watching the tutorial. I'm not sure I understand your question.

[@hamzagorgulu3664]

@@CharmingData I run the code, the graph shows up well but the line plot radio button gives an error. AttributeError: 'list' object has no attribute 'sum'

[@BigAL-x7f]

would it be possible to cover a video where a user can upload a CSV file then manipulate the csv file and return new values in order to populate graphs. The process of saving a file and using that through out ones project hasn't been covered much in the Dash. would greatly appreciate that.

[@CharmingData]

HI @Alec, that's an interesting topic. I would love to talk to you more about this. Can you please write me at [e-mail] so we can connect?

[@wafaaabualrub6284]

Hi Adam, Thanks for this great video! I've applied the concepts of the Dynamic Callbacks on one of my projects, but when I refresh the browser, all added sections(Added charts) are removed! Can you please help me solve this?

[@CharmingData]

Hi wafaa. That's the way Dash works. It's meant to be used by many people at the same time. So if one user changes something, the app stays the same for everyone else. If you want to build an app that you can permanently change, you need to save the new information in a database and make the app refresh from the database data. I show how to do that in my video on dash with live mongodb

[@wafaaabualrub6284]

@@CharmingData Makes a lot of sense!! Thanks so much, Adam.

[@wafaaabualrub6284]

Hey Adam :) Another question. Can we use the chained callbacks with combination with the dynamic callbacks here?

[@gardnmi]

Thanks again, these tutorials are awesome! Any ideas why ALLSMALLER exists? It's pretty simple to select indexes in a list. Why not create other options such as ALLLARGER, ALLBETWEEN, etc.

[@CharmingData]

That's a good question, Mike. It's been asked by a few other people as well. You are right that you can just index the dataframe instead of ALLSMALLER. The creators of Dash dynamic callbacks said that they created ALLSMALLER because they think it would be used a lot. I guess if it doesn't get much usage, it might be taken away in future versions.

[@akhmadsyakhlani2314]

Kereen .. Sangat membantu. Thank you for your explanation

[@pietroandrade805]

Hi, I've been working on Dash for all this year, even though you can create dynamic components indexed, you just can list a callback that you know its type. For it, itsn't easy to create dynamic components wich you don't have a type for it. In other words, you need to attach the call to a name. Would What happen if you wanted create the dynamic component in one callback and in another use its values? I reckon it is not possible

[@CharmingData]

hi Pietro, I don't think it's possible.

[@teklehaimanotaman3150]

Hi Adam, thank you for your impressive lectures. One thing which is not clear for me is to understand the return figure as a dictionary. Could you please explain? Thank you.

[@CharmingData]

Hi. We'll... The figure prop of the dcc graph component accepts data like this: figure is a dict with keys: data (list of dicts; optional) frames (list of dicts; optional) layout (dict; optional) That's why it can read either a graph objects figure or a Plotly express figure

[@alfredocastaneda9892]

Thank you, your video helped me a lot.

[@CharmingData]

Lovely. I hope you build beautiful dashboards 🙅

[@ronoved7695]

Hi :) Thank you for the video. A small question which online I found mostly negative answers. Can we create a dynamic web page through dash from a folder instead of uploading it as an app to Github, Heroku, etc? As it works in JS, HTML, and CSS, can it works the same way here, and the person I am sharing with won't need an IDE to run the code?

[@purvishjariwala8772]

@Charming Data This is a very helpful video. Thank you. I just want to ask that Is it possible to preserve dynamically generated components after refreshing the dashboard?

[@CharmingData]

Hi @Purvish, I don't think so, not unless you save the generated component as data inside a database, and then, based on a username or password you can reload those components into the original layout.

[@purvishjariwala8772]

@@CharmingData Thank you for your reply.

[@Kirnale]

Holy crap that's insane xD

[@momodoubjallow2585]

Great resources. I have one request though. Can make an overview of how to create a hospital dashboard. Start from how store the data and link it to the dashboard for auto updates

[@CharmingData]

Thanks for watching Momodou. I'll add it to my todo list

[@sawon_stories]

I am developing a multi-page dash plotly app in python. I have followed all the guidelines for windows to deploy the app in herokuapp but after several attempts in the end everytime it's giving application error. How should I deploy my app.

[@CharmingData]

What's the error message that it is giving you?

[@marcohatt4803]

@@CharmingData I think I am having a similar problem. My app with pattern matching callbacks works fine as a standalone app (app = dash.Dash), but when I use app= DjangoDash(...) the pattern matching callbacks don't work (TypeError: list indices must be integers or slices, not str). Any ideas?

[@CharmingData]

@@marcohatt4803 That weird, Marco. I'm not sure why DjangoDash is giving you problems. Did you try to print the object that is giving you this error? try to print type(xxx) Maybe that can give you a clew

[@marcohatt4803]

@@CharmingData The problem is with the callback. If I do this I get the error @app.callback(Output("graph", "figure"), [Input({'type': 'filter-dropdown', 'dimension': ALL}, 'value'), Input({'type': 'filter-dropdown', 'dimension': ALL}, 'id')]) def make_figure(values, names): ... but if I replace ALL with one of the individual options I don't get the error. And as I said before, there is no problem with app = dash.Dash, just with DjangoDash

[@marcohatt4803]

@@CharmingData I have posted more details on the problem here community.plotly.com/t/typeerror-unhashable-type-dict-in-dash-app-with-pattern-matching-callbacks/44243 I haven't had any replies yet

[@karenbold9429]

Hi - are you able to answer private messages on specific questions? I have an assignment question I am really struggling on and need some help, but don't want to bore everyone here. thanks

[@CharmingData]

I can try Karen. Write me at [e-mail]

[@anndee5426]

Hello! Is it possible to create cards using this method? :)

[@CharmingData]

Hello. Yes it is.

[@mikechellepernia5609]

Aawesome tutorial!!!! i love it

[@AllAbouTheUniverse]

Thanks a lot Adam!

[@rohailqamar8930]

Sir. Make a video of pattern matching with dcc.upload

[@RahulKumar-ey9xl]

Great video man. I was curious about deletion of added graphs. I have been trying it out but no success yet

[@CharmingData]

Hi Rahul, please email me at [e-mail] I'll give you the code for that

[@MICHAELZ50]

@@CharmingData Can I please have the code too? Thanks.

[@faycalbenaissa4009]

thank u a lot

[@Aarabstrait]

Bro breathe ! Great content

[@CharmingData]

Thanks @Saïd.

[@smprather]

I wish I would've watched this before I spent 12 hours last weekend figuring out how dynamic layouts work. My app has even more complex callback chaining between top level elements and dynamic elements. It was totally exploding my brain.

[@mack_raymond]

thank you

[@paulinaklimczyk1652]

thanks a lot ! :)

[@johnanih56]

I would like to support your page. Please can you send me a link to support your page. Thanks

[@CharmingData]

Hi John, thank you for your interest in supporting me. Here's the link: www.patreon.com/charmingdata

[@wahyubram1343]

can you answer the question i explain in this link? stackoverflow.com/questions/63678461/dash-plotly-how-to-make-the-callback-from-multi-dropdown-that-represented-an-in just a simple question, but more complex because of the connected nested data

[@iWomens]

Perfect video thank you ... (mydashenv) C:\Users\user\Learning\ML\General_Utils>python Python 3.6.10 |Anaconda, Inc.| (default, Mar 23 2020, 17:58:33) [MSC v.1916 64 bit (AMD64)] on win32 Type "help", "copyright", "credits" or "license" for more information. >>> import dash # version 1.13.1 >>> import dash_core_components as dcc >>> import dash_html_components as html >>> from dash.dependencies import Input, Output, ALL, State, MATCH, ALLSMALLER Traceback (most recent call last): File "", line 1, in ImportError: cannot import name 'ALL' >>> import plotly.express as px >>> I am not sure why this is erroring out can you please help me

[@CharmingData]

Check the Dash version you have installed. The dynamic callbacks is a pretty recent addition. I think you need dash 1.13 or above.

[@amir_forooghi]

like

[@CharmingData]

Thanks Amir. Very much to the point :)

[@VinodGouda]

Lots of Love from India ❤️. I'm looking for 1 to 1 consultation to fix one of the most difficult problem I'm facing in Dash. Let me know how I can reach you.

[@CharmingData]

Hi @Vinodagouda, thanks for watching and for your interest. Please see here for a consultation opportunity for all-access members. www.patreon.com/charmingdata

[@ricardokullock2535]

Calling a .csv an "excel sheet" triggers me hahaha You could use a smaller amount of graphs and menus to make things simpler I'm more interested in how to make a selection in one chart and have it reflect on another. Specifically, I would like to display a table with only the selection from a histogram..... you have videos on something like this?

[@CharmingData]

Thanks for the feedback, Ricardo. I don't have that kind of video yet. Sorry.