TODAY learn how to bring Drag & Drop to Dash with Dashboard Engine. 🌠 Sign up for the live event!

Animated chart with python plotly without “play” button

Hello! I’m new to python and dash and trying to make an animated chart. I have a graph object scatter and it is animated. It works by clicking on the “play” button as shown in many examples. But is there a way to start animation without a button, e.g. some autoplay property? Here is example:


import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.express as px
import plotly.graph_objs as go

df = pd.DataFrame(index=range(0,49),columns=['x','y'])
df['x']=['00:00', '00:30', '01:00', '01:30', '02:00', '02:30', '03:00', '03:30', '04:00', '04:30', '05:00', '05:30', '06:00', '06:30', '07:00', '07:30', '08:00', '08:30','09:00', '09:30',
                                          '10:00', '10:30', '11:00', '11:30', '12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30', '17:00', '17:30', '18:00', '18:30','19:00', '19:30',
                                          '20:00', '20:30', '21:00', '21:30', '22:00', '22:30', '23:00', '23:30', '24:00']
df['y']=[396, 365, 317, 415, 495, 353, 493, 413, 472, 335, 305, 465, 425, 401, 466, 476, 400, 473, 365, 406, 345, 439, 325, 367, 445, 478, 406, 469, 384, 468, 370, 328, 445, 376, 355, 377, 
                                          361, 324, 426, 413, 454, 479, 324, 498, 386, 438, 330, 309, 424]

fig1Slide1 = go.Figure(data=[go.Scatter(x=df['x'][:0], 
                                       y=df['y'][:0],
                                       mode='lines',
                                       line = dict(color='rgb(214,40,40)',width=1),
                                       fill='tozeroy',
                                       fillcolor='rgba(236,156,156,0.5)')])
fig1Slide1.update(frames=[go.Frame(data=[
            go.Scatter(x=df['x'][:k], 
                       y=df['y'][:k])])for k in range(0,49)])
fig1Slide1.update_layout(updatemenus=[dict(type="buttons", buttons=[dict(label="Play",method="animate",args=[None, {"frame": {"duration": 30}}])])] )

app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Graph(figure=fig1Slide1)
    ])

if __name__ == '__main__':
    app.run_server(debug=True)

Hi Rezer,

I hope this link could help:

Thanks for suggestion! I come to dcc.Interval too. I just wonder why there is no way to animate graph througt frames without button. I understand why it need, but for some cool looking dashboard it would be nice feature.