I’m pretty new to Plotly and Dash, and I’m stuck trying to get some ‘customdata’ into a callback when clicking on my Surface plot. Right now the customdata field isn’t present in the clickData (but I have observed it being passed correctly as part of another plot on this page, a Histogram plot). I have seen reports of certain types of graphs having bugs where the customdata isn’t passed to the callback, so maybe Surface plots are also bugged? Not sure if it’s relevant, but I’ve also set up this Surface to be animated. Here’s what I have so far:
### 'date_list' is specified above, and used to construct each frame of the surface plot animation.
ground_plot = go.Figure(go.Surface(z=splines[0],
colorscale='Rainbow',
cmax=z_max,
cmin=z_min,
# Ideally I would just pass the date_list element itself, but I get warned that customdata
# must contain some type of collection
customdata=('date', date_list[0])),
layout=dict(
updatemenus=[dict(
type='buttons',
buttons=[dict(
label='Play',
method='animate',
args=[None])]
)
],
title='My animated surface plot',
scene_aspectmode='manual',
scene_aspectratio=dict(
x=width / 40,
y=length / 40,
z=1
),
scene=dict(
zaxis=dict(range=[z_min, z_max])
))
)
# Specify the frames for the Surface plot
ground_plot.frames = [
go.Frame(
data=[go.Surface(z=k,
cmax=z_max,
cmin=z_min,
# Again, I just need to get the correct date for a given frame into my callback function. I'm just using a tuple
# cos Plotly told me to :)
customdata=('date', date_list[i]),
)],
name=str(i)
) for i, k in enumerate(splines)]
app = Dash(__name__)
app.layout = html.Div([
html.Div(id='title', children='Please Work :)'),
dcc.Graph(id='ground', figure=ground_plot)
])
@callback(
Output('title', 'children'),
Input('ground', 'clickData'))
def example_callback(clickData):
if not clickData:
return dash.no_update
x, y = clickData['points'][0]['x'], clickData['points'][0]['y']
print(clickData)
return x
I intend for the ‘customdata’ to simply include the ‘date’ corresponding to the frame of the surface plot, meaning that, for a given frame, the customdata passed to the callback will always be the same value, no matter where I click. Maybe there’s a better solution for making my callback aware of this ‘date’? Anyway, I appreciate any help you can provide!
