I have a simple graph plot onto which I use the Shapes property in the layout to draw two vertical lines on the plot. I would like to update the positions of the the vertical line shapes based off a rangeslider without re-plotting all the data again. I’m unsure as to how to achieve this with a callback as I can’t figure out what Output the callback should be? If I just out put a figure with just layout like below then the data disappears.
app.layout = html.Div([
html.Div([
html.Div([
html.H4(children='AD8452 Readings'),
dcc.Graph(
id='AD8452Plot',
figure={
'data': [V_trace, I_trace],
'layout': go.Layout(
title='AD8452 Readings',
yaxis=dict(
title='Voltage/V',
range=[1.9, 2.6]
),
yaxis2=dict(
title='Current/A',
range=[0, .035],
titlefont=dict(
color='rgb(148, 103, 189)'
),
tickfont=dict(
color='rgb(148, 103, 189)'
),
overlaying='y',
side='right'
),
shapes=[{
'type': 'line',
'x0': query.times_array[0],
'y0': 0,
'x1': query.times_array[0],
'y1': 85,
'line': {
'color': 'black',
'width': 1,
}
},
{
'type': 'line',
'x0': query.times_array[-1],
'y0': 0,
'x1': query.times_array[-1],
'y1': 85,
'line': {
'color': 'black',
'width': 1,
}
}],
autosize=True,
)
})
], className="six columns"),
html.Div([
html.H4(children='Sensor Image'),
dcc.Graph(
id='mag_plot',
),
], className="six columns"),
], className="row"),
html.Label('Slider'),
dcc.RangeSlider(
id="time_slider",
value=[0, len(query.times_array) - 1],
min=0,
max=len(query.times_array)-1,
marks={i: '{}'.format(query.times_array[i].to_pydatetime()) for i in range(0, len(query.times_array), 100)},
updatemode='drag',
# value=5,
),
])
@app.callback(
Output('AD8452Plot', 'figure'),
[Input('time_slider', 'value')])
def update_time_markers(times):
return {
'layout': go.Layout(
shapes=[{
'type': 'line',
'x0': query.times_array[times[0]],
'y0': 0,
'x1': query.times_array[times[0]],
'y1': 85,
'line': {
'color': 'black',
'width': 1,
}
},
{
'type': 'line',
'x0': query.times_array[times[1]],
'y0': 0,
'x1': query.times_array[times[1]],
'y1': 85,
'line': {
'color': 'black',
'width': 1,
}
}],
autosize=True,
)
}
Any advice would be much appreciated