Hey folks,
I’m struggling with client side callbacks. I don’t have any JavaScript experience but i believe that my callback is basically working. I notice the desired change in the figure dictionary when viewing the contents in Google Chrome webinspector. The only thing is, that the affected component is not updating automatically. When i hit the little house button (reset axes) then the component updates as expected.
Unfortunately i cannot share my complete code, but i try to describe as good as possible what i try to achieve.
I have a scattermapbox plot with a gps track and a scattergl plot with some time series data. I added a vertical line via add_vline to the time series plot on the first x index.
The desired callback should work like this:
when moving the mouse over the track on the map, the vertical line shall move to the related x position in the time series plot.
This is my client side callback code:
app.clientside_callback(
"""
function(hoverData, fig) {
console.log(hoverData)
console.log(fig)
fig['layout']['shapes'] = [{line: {color: "white", width: 3}, name: "moving bar", type: "line", x0: hoverData['points'][0]['customdata'], x1: hoverData['points'][0]['customdata'], xref: "x", y0: 0, y1: 1, yref: "y domain"}]
return fig;
}
""",
Output('ride_timeseries', 'figure'),
Input('ride_map', 'hoverData'),
Input('ride_timeseries','figure')
)
This is how it looks at the beginning:
Please note the vertical white line on the left of the time series plot.
This is how it looks when i hovered over a specific point of the track on the map AND hit the “reset axes” button on the time series plot afterwards:
My question is: how can i force the update of the time series plot so that the white bar moves flawless when hovering over the track?
I hope the provided information is sufficient and someone has the hint i’m looking for! Thanks a lot in advance!
Cheers
Tobi
2 posts - 2 participants
