How do I include a "play" button in a Dash by Plot.ly panel using python?

I currently have a dashboard with a scatter map that displays the movement of people across the network and uses multiple callbacks to update hoverdata based graphs, etc. The map chart uses a slider (dcc.Slider) to adjust the time that is currently displayed. I want to add a "play" button that will automate the process of clicking different timestamps on the slider.

I had success with the same dataset and parameters creating a play button in Plotly because there are no callbacks and the sliders are an item in the layout dictionary for the figure. However, I'm not sure where to place the callback for buttons in Dash, and not sure if I should use the animate method or the relay method.

Currently, I have just created a frame for each timestamp (separate from the traces included in the data).

+3


source to share


1 answer


When it comes to slider promotion, I haven't found a "good" / natural way to do it. However, I have a workaround with Interval .

import dash_core_components as dcc
import dash_html_components as html
import dash.dependencies
from dash.dependencies import Input, Output



app.layout = html.Div(children=[
dcc.Interval(id='auto-stepper',
            interval=1*1000, # in milliseconds
             n_intervals=0
),
dcc.Slider(
    id = "steper",
    min=1,
    max=step_num,
    value=1
)]

      

Then I have a callback:



@app.callback(
    dash.dependencies.Output('steper', 'value'),
    [dash.dependencies.Input('auto-stepper', 'n_intervals')])
def on_click(n_intervals):
    if n_intervals is None:
        return 0
    else:
        return (n_intervals+1)%step_num

      

The end result of this is to call a callback for my slider every second, advancing it. Pay attention to the module at the end so that it is not removed.

0


source







All Articles