Coordinating clickData and dropdownmenu in Dash

Dash Python
1

Hello plotly,

I’m having problem to read to inputs asynchronously from a dropdown menu and clickData. Initially when I select dropdown menu it works on the scatter graph and bar chart. But as I click on the bins to get specific outcomes and come back to dropdown menu, it simply stays on the clickData input and does not change to get the same dropdown results again.

Here is a working example of my work.

@app.callback(dash.dependencies.Output('TrxnPerLog', 'figure'),
   		[dash.dependencies.Input('col-dropdown', 'value'),
		dash.dependencies.Input('Bar-Graph', 'clickData')])    #hoverData #
   def update_Scattgraph(Category,click_data):


	df_rend= df[df.col==Category]
	l = 'markers'
	t = 'Transactions per hour for All' + ' {}'.format(Category)

	
	def label(t):
		return #df_rend['trxn']#[df_rend['env'] == i]

	if click_data is not None:
		CategoryValue = click_data['points'][0]['x']
		l = 'lines+markers'
		t = 'Transactions per hour for {}'.format(Category) + ' : {}'.format(CategoryValue)
		df_rend = df[df.col_val==CategoryValue]	

		if CategoryValue == "Others":
			dfAll = df[df.col==Category]
			dfOthers = (dfAll.groupby(dfAll.col_val).sum().loc[lambda df: df.trxn < df.trxn[:].mean()])
			L = dfOthers.index.tolist()

			def label(t):
				return df_rend[df_rend['env'] == i]['col_val']

			if len(dfOthers) > 0:
				df_rend = dfAll.loc[dfAll['col_val'].isin(L)]

				l = 'markers'	
'data': [go.Scatter(
							x = df_rend[df_rend['env'] == i]["log_hour"],
							y = df_rend[df_rend['env'] == i]['trxn'],
							text = label(t),
							mode=l,
							opacity=0.7,
							marker=dict(
										size= 15,
										line= dict(width= 0.5, color= 'white'),
										color= col(i)
								),
							name= name(i)
								)
			 			for i in ['prod','non_prod','dev']
			 			],
'layout': go.Layout(
							xaxis=dict(
										range=[log_min, log_max],
										title= 'Timestamp',
										titlefont=dict(family='Georgia, serif',
														size=17)),
							yaxis= dict(range=[0,df_rend['trxn'].max() + 5],
										title= 'Number of Transactions',
										titlefont=dict(family='Georgia, serif',
														size=17),
										showticklabels=True,					
										),
							margin={'l': 40, 'b': 40, 't': 10, 'r': 10},
							legend=dict(x=-.1,y=1.2),
							title= t,
							titlefont=dict(family='Georgia, serif',
											size=17),
							plot_bgcolor="#DDDDDD",
        					paper_bgcolor="#DDDDDD"
				
			   
			)
	}

I’m new to dash and a quick solution will be greatly appreciated. Thank you.

2

I am guessing it’s because you have if click_data is not None: in the code and maybe some process you want to run when the dropdown changes would not be triggered when click_data is not None.
It’s hard to read your code. Do you mind enclosing the code in ```?

3

I have updated my code. Thank you for the suggestion.
Also, if I do not use if “click_data is not None:” it gives me None Type error. Can you please suggest me a workaround for making dropdown menu trigger my scatter-plot graph after another callback for input is provided on clickData value from bar-graph.