In the left plot I have a figure with scatterplot as data and the red bar defined on layout.
Also in this figure I have many frames with different positions for the red bar.
I want to, when the bar position changes, update the heatmap on the right side.
This red bar in the left plot is defined on figure layout so if I move it with my mouse I can trigger a callback using “relayoutData” property but I wanna know if there is a way to trigger a callback when the bar is beeing moved by the plotly animate.
Basically the heatmap data must depend on scatter layout bar position.
Hey @vinicvaz welcome to the Plotly forums!
I’m not sure if a callback can be triggered by an animation event but I think you’ll have an easier time using dcc.Interval to update the figure (https://dash.plotly.com/dash-core-components/interval). You can use the n_intervals property to compute the line position, and the heatmap you want to show. Say in the following example you’ve made a dcc.Graph(id='graph').
#...the trace representing the sinusoid...
#...describe the heatmap, probably it has to be computed from n_intervals
If you want to update the figure, I think you can do
# .... update the figure using fig.update_layout and the like ...
You’ll just need to initialize the figure keyword when you create dcc.Graph in the initial layout.
You are right about sending from backend to frontend. Will it hurt performance? That depends on how much data you want to send, maybe if the heatmap you want to send has many points this will cause some lag. To implement Play/Pause you probably need a couple a dcc.Store components: one to hold the play/pause state, and the other to keep track of the frame you were on. In this case, you wouldn’t use the n_interval value but rather just increment the value in a store (by passing it in as a State variable and also having it as one of the outputs). The play/pause state store could be updated with a button or something and the frame number store only update if its contents are non-zero.
I agree if animations could trigger relayout callbacks, that would be the easiest solution!
I tried to used that code but I’m getting this error:
TypeError: Cannot read property '_guiEditing' of undefined
The element with id=‘tester’ is a dcc.Graph created in python code.
I can make it works creating a new plot for each iteration, but if I just try to get the graph element by the id and relayout it I get the above error.