All about the Graph Component - Python Dash Plotly

[@CharmingData]

Hey everyone, make sure you use Dash 1.16 or higher to run this app successfully. Keep practicing 💪 No se den por vencidos. If you benefitted from these tutorials and would like to show your appreciation and support the existence of this channel 🙌: www.patreon.com/charmingdata

[@manalijain8362]

Charming Data Thank you so very much for uploading such amazing tutorial videos every week!! You made Plotly Dash so interesting!!

[@CharmingData]

@@manalijain8362 you're welcome @manali

[@hakanyuceturk5989]

looking for the plotly dash tutorials all over the web couldn't find anything really good, you re the lifesaver man.

[@wp4297]

Two videos a day. Two brilliant videos. Thus, you have a new subscriber

[@CharmingData]

Thanks for watching WP

[@manueldominguezbecerra5577]

Your contribution (not only this video) is a masterpiece tutorial. THANKS

[@CharmingData]

Thank you @Manuel

[@ptanisaro]

I'm going to start with dash and your video tutorial makes me feel at ease. Thank You, Adam!

[@CharmingData]

Thanks for watching, Pattreeya. Do you know how to code in python?

[@ptanisaro]

@@CharmingData Yes. :) I 'm going to employ dash and plotly to my project.

[@CharmingData]

@@ptanisaro great. Good luck

[@introspecticon]

Thanks for the great content. You are an excellent teacher.

[@brunoevione]

Thank you, Adam! I was trying to find in the plotly documentation a way to update a chart when the user "hover-off" and the solution is sooooo easy hahaha! As usual, great job!

[@CharmingData]

You're welcome @Bruno. I'd love to see some of your web apps that you build. 🤗

[@naliu3399]

Your video is really amazing! I learnt a lot from them. Now I have a much better understanding on building interactive dashboards. Thank you so much!

[@segad8479]

Very clear and accurate presentation. Great help and many thanks.

[@torinhodge]

Thank you for this incredibly helpful video. For others using Jupyter notebook and having trouble getting the Dash window to connect, I had to change the last line to app.run_server(debug=False). Cheers!

[@xXProtatoXx]

you are a hero

[@Wonderfull_Hasti]

very very interesting🤩

[@Saarkay]

Great Video! What if I want the hover action on both graphs and hovering on one changes the other?

[@wiztech2732]

How to pull a section of pie chart ?

[@CharmingData]

hi, You can try to go into the clickData of the pie chart and interact with that data: @app.callback( Output('dpdn2', 'style'), Input(component_id='pie-graph', component_property='clickData') ) def pie_chart_data(data): print(data) return {}

[@hongweizhouwei]

Look forwards to the Clientside Callbacks tutorial :)

[@CharmingData]

Did you already build your own app, Michael?

[@krutikkhillare3284]

can you please show how to put this graph in upload component.

[@LifeWithSeb99]

Would you please make a video on how to style graph legends? Not much info on that

[@its_me7363]

very informative video again from your side. How about a video of map using folium in Dash? Would love to see what we can do...with folium

[@himanshujoshi8109]

Hi, I need an help with displaying "No Data" for the states which are not having any data. I need these states to be grayed and other to follow the color sequence of "reds". Thanks!

[@ganeshlakshman2506]

Thank you so much, Adam. Effort that you have put is impressive. Is there a way to remove the plotly logo/menu that appears on hover?

[@CharmingData]

Hi @Ganesh, yes. You need to use the config prop of the dcc.graph(config={'displaylogo':False})

[@ismafoot11]

Hey do you give classes ? I'd be interested. Im working on several projects at the moment for Dash and I'd love your support

[@CharmingData]

Hi Isma, I provide consulting on Dash. Feel free to write me at [e-mail]

[@ehangroenewald5783]

Is it possible to 'Clear' or 'reset' clickdata, it seems like once you clicked something it forever stay in that mode and I cannot return to the overview graph again?

[@yuanyulim193]

Hi~Thanks for your share. Is that possible to get click data on a blank space (In the same graph)? I want to use it as a threshold point and change my graph appearance. Thank you!

[@jsap1063050]

Thank you so much for your videos, they have been so helpful for me. What should I do if I have a line chart where I want multi=True for inputs, but the line chart is connected to a pie chart with the hover data similar to your other examples?

[@CharmingData]

Hi Shannon, it's hard to say without initial code written out. I recommend writing out some code while you try to create the app you want, and when you get stuck or get an error, share that with Plotly Forum, where the members will try to answer you.

[@karimbouaziz9113]

Hi Adam, Thank you very much, Again a great video and an excellent explanation :) I have one question though, is it possible to disable the zoom function or any events that happen through the right click of the mouse? In the project which i'm working on, i have a plot with an inverted y-axis, when i zoom in with the right click and then double click to zoom out and have the primitive plot, the plot was inverted, this only happens when i use the right button of the mouse, everything is ok when using the left button Do you have a suggestion to solve this problem? Thank you in advance

[@abhishekmarkundi3061]

Hi, I got a error like attempting to connect a callback input item to component "vs_interval" but no components with that Id exist in the layout "help"

[@CharmingData]

Hi, are you using the exact same code from the video?

[@teklehaimanotaman3150]

Hi Adam, impressive lectures. I have one question in your plot (y-axis). Instead of showing k representing 1000, would it be possible to make a number instead ( instead of 5k, 5000)?

[@CharmingData]

Yes. I'm pretty sure that's possible with Plotly graph objects

[@divyangpatel8803]

Is there any provision in dash where we click on image and it pops out in full screen and click again to goto original size?

[@CharmingData]

not that I know of. I haven't heard of that exist.

[@divyangpatel8803]

Okay. Thanks.

[@mauliknaik9520]

Hey Adam, thanks for putting across videos on Dash they are super useful. Can you guide on how we can use the clickData information to annotate the graph. In figure.add_annotions i have tried to use clicktoshow='onoff', so i can select multiple points to annotate. The points are getting selected with clicktoshow option, however, not getting any text or information related to the point. Can you help?

[@CharmingData]

Hi @Maulik, it's hard to say without seeing the code. Feel free to send me your code and data. I'll try to take a look later this week, I should have a few minutes free. [e-mail]

[@syedumairhassankazmi6830]

Hi, first and foremost thanks for the great content. Saw several of your videos. They were well defined and taught. Thanks. I made a dashboard with 4 charts and wanted all of them to filter each other. I easily used 1 chart to filter the rest but if i want all of them to filter each other, I need to use multiple for loops. For example, if hover_data1 and hover_data2 and hoverdata3 is None: then something, elif hov1 and hov2 none then this, elif hov1 and hov3 none, elif hov2 and hove3 none, elif hov1 none, elif hov2 none, elif hove3 none and finally else: . Is this the way to do it or is their a more efficient way? Hope i was able to explain my question. Thanks

[@CharmingData]

hi Syed Umair Hassan, What if you do: if hover_data1: my_pie = px.pie(......) elif hover_data2: my_pie = px.pie(......) elif hover_data3: my_pie = px.pie(......) return my_pie Can you do something like that?

[@syedumairhassankazmi6830]

@@CharmingData I think this will throw an exception when i hover over one graph and then hover over another because now the condition will change to if hover 1 and hover 2 then:

[@syedumairhassankazmi6830]

What I had to do was like this. I made 3 graphs, bar , pie and map filter each other plus all the other charts. This is a code snippet of how these 3 graphs are effecting 4 cards def update_graph(clk_data_bar, clk_data_map, clk_data_pie, start_date, end_date): if ((clk_data_bar is None) & (clk_data_map is None) & (clk_data_pie is None)): mask = MASK( start_date, end_date) total_complaints, timely_formated , dispute_formated, deliever_formatted = cards(mask) return total_complaints, timely_formated , dispute_formated, deliever_formatted elif ((clk_data_bar is None) & (clk_data_map is None)): clp = clk_data_pie['points'][0]['label'] mask = MASK( start_date, end_date, cdp = clp) total_complaints, timely_formated , dispute_formated, deliever_formatted = cards(mask) return total_complaints, timely_formated , dispute_formated, deliever_formatted elif ((clk_data_map is None) & (clk_data_pie is None)): clb = clk_data_bar['points'][0]['y'] mask = MASK( start_date, end_date, cdb = clb) total_complaints, timely_formated , dispute_formated, deliever_formatted = cards(mask) return total_complaints, timely_formated , dispute_formated, deliever_formatted elif ((clk_data_pie is None) & (clk_data_bar is None)): clm = clk_data_map['points'][0]['location'] mask = MASK( start_date, end_date, cdm = clm) total_complaints, timely_formated , dispute_formated, deliever_formatted = cards(mask) return total_complaints, timely_formated , dispute_formated, deliever_formatted elif clk_data_bar is None: clm = clk_data_map['points'][0]['location'] clp = clk_data_pie['points'][0]['label'] mask = MASK( start_date, end_date, cdm = clm, cdp = clp) total_complaints, timely_formated , dispute_formated, deliever_formatted = cards(mask) return total_complaints, timely_formated , dispute_formated, deliever_formatted elif clk_data_map is None: clb = clk_data_bar['points'][0]['y'] clp = clk_data_pie['points'][0]['label'] mask = MASK( start_date, end_date, cdb = clb, cdp = clp) total_complaints, timely_formated , dispute_formated, deliever_formatted = cards(mask) return total_complaints, timely_formated , dispute_formated, deliever_formatted elif clk_data_pie is None: clm = clk_data_map['points'][0]['location'] clb = clk_data_bar['points'][0]['y'] mask = MASK( start_date, end_date, cdb = clb, cdm = clm) total_complaints, timely_formated , dispute_formated, deliever_formatted = cards(mask) return total_complaints, timely_formated , dispute_formated, deliever_formatted else: clb = clk_data_bar['points'][0]['y'] clm = clk_data_map['points'][0]['location'] clp = clk_data_pie['points'][0]['label'] mask = MASK( start_date, end_date, cdb = clb, cdm = clm, cdp = clp) total_complaints, timely_formated , dispute_formated, deliever_formatted = cards(mask) return total_complaints, timely_formated , dispute_formated Code is a bit hard to read because of the functions I made plus youtube isn't letting me post my github repository, the comments gets deleted -_-. Btw thanks for the reply and these videos. Also, what should I do if want to highlight the point i have clicked or hovered on? Because if it doesn't get highlighted like it does in tableau/ power bi then users tends to forget which points are selected.

[@dianaamiri9520]

hi, thanks a lot for your videos, very helpful. However I am a bit confused, if I want to learn to build a dashboard with dash plotly which playlist I should start with?

[@CharmingData]

Hi @Diana I recommend the playlist Connecting Graphs to Components: kzbin.info/aero/PLh3I780jNsiSDHCReNVtgPC1WkqduZA5R

[@dianaamiri9520]

@@CharmingData thank you

[@jboch98]

Hi Adam, thank you for the interesting video. Can you tell me something about choosing a column from the legend that belongs to the graph. Example: I have multiple columns and I want the title of my y-Axes to change if selecting another column from the legend. Thanks in advance!

[@CharmingData]

Hi Julian, Try to use the restyleData parameter that belongs to the dcc.Graph(). This will allow to read the legend item that is being clicked on. Then, you can use that in the callback to return a title of the y-axis in the Output. For example: @app.callback( Output(component_id='anothergraph', component_property='figure'), Input(component_id='my-graph', component_property='restyleData'), ) def update_side_graph(data): print(data) fig = px.line(df, x=..., y=...) fig.update_layout(yaxis=dict(title=data)) return fig The last part "yaxis=dict(title=data)" you will have to customize and change a little because the data has to be filtered.

[@richardtarrillo1597]

Hello Adam. country color There are times when the line graph legend does not coincide with the pie graph legend. thanks from Peru.

[@richardtarrillo1597]

px.pie(data_frame=dff2,values='pop',names='country',color='country',...

[@CharmingData]

@@richardtarrillo1597 hi there, what do you mean they do not coincide?

[@skywankeryoupi]

Thank you so much for all your great tutorials it helped a lot! I'm trying to integrate a shap waterfall graph that would update with a callback into my dash application, but it seems impossible to do it. Does anyone know how to do that? Thanks a lot!

[@ayacine9496]

Thank you verry much!! but i think there is a problem in the code, it seems that the display remains on the last value selected and not on the starting value. How to do if nothing is selected to return to the start value

[@CharmingData]

Hi @Ayacine, what do you mean the display remains on the last value selected? Are you referring to the dropdown, the pie, or the line chart? And what is the starting value?

[@ayacine9496]

@@CharmingData at the bigining the pie chart popoulation is for 1952. When you hover data in the line chart this value change but when you stop hover data the value don't come back to 1952 but still stay at the last value hovered at the line chart. I have a similar problem in my dashboard when i stop hover, the graphics of my dashboard still stay filtered at the last value hovered and want my graphics to be no longer filtered when i stop hover.

[@CharmingData]

@@ayacine9496 Hi Ayacine, Add the clear-on-hover parameter to your dcc.graph, like this: dcc.Graph(id='my-graph', clear_on_unhover=True) Let me know if it worked for you.

[@ayacine9496]

​Hi@@CharmingData, it works very fine for me, Thank you very much for your help

[@ziyancheng8903]

Hi Adam. thanks for posting your videos! I learned a lot. I saw you have parsed hov_year using hov_data['points'][0]['x'].... I have a question, currently I am using plotly express timeline to create a figure of gannt chart. by px.timeline(df, x_start=timestamp, x_end=timestamp...), when i parse the fig.data, i print the trace, the 'x': array changed into-->([208900...68400)].... do you know why? any suggestion please? I really need it as the datetime data type, this way I can pass this data into a subplot. thanks in advance!

[@CharmingData]

Hi Ziyan, it's really hard to say without seeing the code. Can you please send me your code (or an excerpt of it if it's very long) with the data, so I can try to run on my computer and see what you see? You can send it here: [e-mail]

[@ziyancheng8903]

@@CharmingData Much appreciated your reply, I am sending it now.

[@1Revolucion1]

Hello, thanks for your videos, I have a problem, I don't know how to have two or more rows and columns, to have a more professional interface, I always have one graphic below the other, not like in your video that you see the pie graphic next to the table, will you help me please? thanks .. greetings from Colombia

[@CharmingData]

Cómo estás David? Trata de ver este video sobre Dash Bootstrap. Es la mejor manera de lograr lo que tú buscas hacer. kzbin.info/www/bejne/rKK5qKOCacd6gbs

[@geodancer7281]

Thank you for this tutorial and The Book of Dash. I think I am seeing the same problem @richardtarrillo1597 wrote about: On the right line plot, red is Germany and blue is Brazil. However, when I mouse over the two points on the left in the line plot (1952 and 1957) on either line, the left pie chart and its legend flip: red is Brazil and blue is Germany for both the legend and the information in the pie. I think I saw the same thing happen in your tutorial. I welcome your thoughts.

[@CharmingData]

hi @geodancer7281 Are you using the exact same code as in the video?

[@geodancer7281]

@@CharmingData - Yes, same script. Look at your video 14 seconds in. As you wave your pointer around, watch the pie chart legend.

[@CharmingData]

@@geodancer7281 Now I see, thank you. One way to solve this is to hard code the colors per country with the color_discrete_map attribute of px.pie. You can do this inside the callback. colors = ['red','blue','green','orange', 'purple'] n_colors = colors[:len(country_chosen)] fig2 = px.pie(data_frame=dff2, values='pop', names='country', title=f'Population for: {hov_year}', color='country', color_discrete_map={country:color for color, country in zip(n_colors, country_chosen)} )

[@geodancer7281]

@@CharmingData - Thank you for the code, but it seems to have created a different effect. I will work on this, let you know what I get.

[@ayoubyoussoufi1623]

Hello ! I am using dash with python 2.7 the line print(f'hover data: {hov_data}') is the formating with python 3. Can you tell me how should I print in python 2.7 "hov_data" ? I did this but it did not work : print('hover data: {hov_data}').format(hov_data)

[@CharmingData]

Hi @Ayoub, I'm not sure how to do that in Python 2.7 but it shouldn't be very different than python 3 and I'm sure you would quickly find an answer on stackoverflow. I did print(f'hover data: {hov_data}') because I wanted to see a print-out of the hover data info. The hov_data is the argument inside the callack function def update_side_graph

[@ayoubyoussoufi1623]

@@CharmingData thank you. I found it ☺ I like the videos you made. It helps me to understand deeply dash. Thank you 😊

[@lambdabld6658]

Please, it would be better if you explained what Div does actually and breakdown in more details, still didn't understand the whole thing

[@CharmingData]

Ok. Good idea. I'll try to do that for the next video on layout

[@suryabanerjee4071]

Hi. Thanks for the video, it's extremely informative and helpful. Can you help me with a persistent issue that I am currently facing? Whenever I am trying to import dash_core_components or dash_html_components or dash_bootstrap_components in jupyter , it's throwing an import error, stating cannot import _explicitize_args , has anyone faced this issue here? Please help. Can elaborate more if someone wants. Thanks in advance! P.s I am using dash 1.20.0 , which I believe is the latest. Version

[@CharmingData]

Hi @Surya. I've never seen this error. Hopefully, other people in the community know this error and can help you out.

[@felixkuria1250]

Hi .. this is a great video for a student of data analysis but am getting this error ⛑️ ID not found in layout 10:10:23 AM Attempting to connect a callback Output item to component: "my=graph" but no components with that id exist in the layout. If you are assigning callbacks to components that are generated by other callbacks (and therefore not in the initial layout), you can suppress this exception by setting `suppress_callback_exceptions=True`. This ID was used in the callback(s) for Output(s): my=graph.figure

[@felixkuria1250]

Someone me to solve this

[@CharmingData]

@@felixkuria1250 HI Felix, do you know how to use `suppress_callback_exceptions=True`?

[@felixkuria1250]

@@CharmingData not really

[@CharmingData]

@@felixkuria1250 try to do this: app = Dash(__name__, suppress_callback_exceptions=True)

[@felixkuria1250]

@@CharmingData Thanks for this