Update Shapes position on callback without re-plotting the data

@roosta wrote:

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

Posts: 1

Participants: 1

Read full topic