Black Lives Matter. Please consider donating to Black Girls Code today.

What is the way to do exception handling in a Graph object in plotly dash?

I am making a Dash app where I let the user choose a latitude, longitude, radius and location type to display a map. I want to add exception handling to the code - so that if, say, the user enters strings for latitude, then upon clicking the Submit button, it should return a text in the dcc.Graph area saying “Please enter a numeric value for latitude”, instead of the code breaking and throwing an error there. And likewise for the other inputs.

So I have the following lines in my code:

@app.callback(
	[Output('output_text', 'children'),
	Output('output_graph', 'figure')],
	[Input('submit_button', 'n_clicks')],
	state=[State('input_lat', 'value'),
	State('input_lon', 'value'),
	State('input_radius', 'value'),
	State('input_type', 'value'),
	State('input_key', 'value')])
def update_output(n_clicks, lat_, lon_, radius, loc_type, keyword):
	if n_clicks:
		if not isinstance(lat_, float):
			return "Please enter a numeric value for Latitude."
		if not isinstance(lon_, float):
			return "Please enter a numeric value for Longitude."
		if not isinstance(radius, float):
			return "Please enter a numeric value for radius."
		if not isinstance(loc_type, str):
			return "Please enter a string value for Location Type."

        ## rest of the code

But it does not have the desired output. For example, I entered the string “blah” in the input box for longitude, instead of a floating numeric value, and it still throws error instead of returning the text I intended for it to display in case of this error:

What is the way to do exception handling in Plotly Dash?

Your error message indicates that your callback has 2 outputs defined but you are only returning one.

If you don’t want the figure object to change, you can do the following:

return "Please enter a numeric value for Latitude.", dash.no_update

If you wanted to clear the figure object,

return "Please enter a numeric value for Latitude.", []

Regardless, all outputs of a callback need a return value.

1 Like

Got it. I have 4 outputs. Outputs 1 and 4 are divs, and outputs 2 and 3 are dcc.Graph. So, the following works without giving any error:

    try:
		assert float(lat_)>=-90 and float(lat_)<=90
	except:
		return "Please enter a numeric value for Latitude between -90 and 90.", {}, {}, []
	try:
		assert float(lon_)>=-180 and float(lon_)<=180
	except:
		return "Please enter a numeric value for Longitude between -180 and 180.", {}, {}, []
	try:
		assert float(radius)>=0 and float(radius)<=10000000
	except:
		return "Please enter a numeric value for radius (under 1 million).", {}, {}, []
	try:
		assert isinstance(loc_type, str)
	except:
		return "Please enter a string value for Location Type.", {}, {}, []

However, this means the outputs 2 and 3 appear with empty gridlines, which I don’t like. So, I thought defining a blank_figure would work. So, I tried the following:

	blank_fig = dcc.Graph(figure={
				  'data': [],
				  'layout': go.Layout(xaxis={'showgrid': False},
									  yaxis={'showgrid': False}
									 )
					}
				 )

	try:
		assert float(lat_)>=-90 and float(lat_)<=90
	except:
		return "Please enter a numeric value for Latitude between -90 and 90.", blank_fig, blank_fig, []
	try:
		assert float(lon_)>=-180 and float(lon_)<=180
	except:
		return "Please enter a numeric value for Longitude between -180 and 180.", blank_fig, blank_fig, []
	try:
		assert float(radius)>=0 and float(radius)<=10000000
	except:
		return "Please enter a numeric value for radius (under 1 million).", blank_fig, blank_fig, []
	try:
		assert isinstance(loc_type, str)
	except:
		return "Please enter a string value for Location Type.", blank_fig, blank_fig, []

But this gives the following error:

Failed component prop type: Invalid component prop figurekeyprops supplied to Graph.

I don’t understand why though.