Trigerring Plotly GO Graph animation to auto-play on Page Load

Dash Python
1

Hey there,

Dash newbie here. I managed to create a couple of radar plot using Plotly GO on my Dash dashboard in one of the tabs. I managed to create a smooth expanding radar plot animation by passing 20 frames and have a button to play it, as per the examples, and setting the frame and transition duration to have it execute within about a second.

frames=[]

for i in range(len(df_animate)):

    attributes_values_self_radar_input = df_animate.iloc[i].to_list()
    attributes_values_self_radar_input.append(df_animate.iloc[i].to_list()[0])

    frames.append(go.Frame(
        data=go.Scatterpolar(
            r=attributes_values_self_radar_input,
            theta=attributes_radar_input,
            fill='toself'
        ))
    )


self_radar_plot = go.Figure(data=go.Scatterpolar(
  r=attributes_values_self_radar_input,
  theta=attributes_radar_input,
  fill='toself'
),
layout=go.Layout(
        xaxis=dict(range=[0, 10], autorange=False),
        yaxis=dict(range=[0, 10], autorange=False),
        updatemenus=[dict(
            type="buttons",
            buttons=[dict(label="Play",
                          method="animate",
                          args=[None, {"frame": {"duration": 30},
                                    "fromcurrent": True, 
                                    "transition": {"duration": 1}}]
                                    )])]
),
frames=frames)

self_radar_plot.update_layout(
  polar=dict(
    radialaxis=dict(
      visible=True,
      range=[0, 10]
    ),
  ),
  showlegend=False,
  transition = {'duration': 10}
)

I would love if the animation could auto-play on content load once, either by setting the button’s visible=False and somehow triggering the on_click event or triggering the animation directly. To that end, I tried many things, such as using on-page load callbacks to alter the button’s state and javascript to use the button’s assigned class in order to trigger it, which I tried both including in the /assets folder and importing using grasia_dash_components, such as:

$('.updatemenu-button').each(function(i, obj) {
    obj.trigger("click");
});

I believe I’ve seen all available resources on the subject, most being considerably outdated, and I wanted to know if this is at all possible with the current state of Dash, with or without a hack.

For example, an auto_play argument has been made available, but I am not able to find it in the documentation:

People have suggested dcc.Interval (Live Updates | Dash for Python Documentation | Plotly), such as in here:
Animated chart with python plotly without “play” button
but I’m not sure how to trigger the animation (or the corresponding button on-click event, which has no id) from such a callback. Can dcc.Interval be used to fire the animation once without repeating?

Finally, it would be nice to know if it’s impossible and I’m wasting my time, if that’s the case. :slight_smile:

Thanks in advance!

2

I’m also wondering the same thing. Did you ever figure it out?

3

Hi there,

I just searched lots of similar question, and found no answer, but I figured out one, try this:

    app.layout = html.Div([dcc.Graph(id='graph', figure=fig, style={'width': '190vh', 'height': '90vh'}),
                           dcc.Store(id='store', data=0),
                           dcc.Interval(id="interval", interval=gobj.dcc_update_intv),
                           dcc.Interval(id="client_interval", interval=1000)])
    app.clientside_callback(
        """
        function (n_intervals) {
            const btn = document.querySelector("#graph > div.js-plotly-plot > div > div > svg:nth-child(3) > g.menulayer > g > g.updatemenu-header-group > g:nth-child(1)");
            console.log("btn", btn);
            btn.dispatchEvent(new Event('click'));
            return []
        }
        """,
        [Output('store', 'data')],
        [Input('client_interval', 'n_intervals')]
    )

add a clientside_callback with javascript and locate the button element by selector, and dispatch a click event to it, since I have another periodically update function to update the px bar animation frames (frame grows), hence I click the button periodically

1 Like