Getting data values from Animated plot

Dash Python
1

I have plotted animated race line chart using graphing object in dash. When I click start button the race line chart starts. I want that if I click another button say “Show” then it should print the current data values of race line chart. How should I get the values?

x_axis = list(range(df.shape[0]))
y_axis = list(df['4. close'])
frames = []
for frame in range(1, len(x_axis)+1):

    x_frame = np.arange(frame)
    y_frame = list(df.iloc[:frame-1, 4])
    #y_frame = [y_frame]
    curr_frame = go.Frame(data = [go.Scatter(x = x_frame, y = y_frame, mode = 'lines')])
    frames.append(curr_frame)

title1 = "Stock Simulation of " + str(list(comp_name)[0])
figure = go.Figure(data=[go.Scatter(x = np.array([1]), y = np.array([60.10]), mode='lines')],
                   layout={'title':title1,
                           "updatemenus":[{"type":"buttons",
                                           "pad":{'l':80, "t":200},
                                           "x":0.4,
                                           "y":0.6,
                                           "xanchor":"left",
                                           "yanchor":"top",
                                           "showactive":True,
                                          "buttons":[{
                                              "label":"Start",
                                              "method":"animate",
                                              "args":[None, {"frame": {"duration":10,
                                                                       "redraw":False},
                                                             "fromcurrent": True,
                                                             "transition": {"duration":0}
                                                             }
                                                      ]
                                                    }],
                                           }],
                           "xaxis":{"range":[0, df.shape[0]]},
                           "yaxis":{"range":[0, max(y_axis)]}
                           },
                   frames=frames
                    )

dash_app = dash.Dash(server=flask_app, name="Dashbar", url_base_pathname="/dash/")
    dash_app.layout = html.Div(
        children=[
            html.H1(children="Welcome"),
            #html.Div(children="""  """),
            dcc.Graph(id="example-graph", figure=figure),
            dbc.Button('Show', id='example-button', color='primary',
                       style={'margin-bottom': '1em', 'margin-left': '46%'}),
            html.Div(id='para')

        ]
    )

    @dash_app.callback(
        Output('para', 'children'),
        Input('example-button', 'n_clicks')
    )
    def show_data(n_clicks):
        if n_clicks is None:
            raise PreventUpdate
        else:
            return "What to add here?"
2

Not sure if this will help but if you want to get data from the graph you can refer to this https://dash.plotly.com/interactive-graphing it shows how to access the value of data points by events such as hovering or clicking them.

3

Thanks @atharvakatre, I think it might be helpful, do you know how to apply that on animation graph?

4

It doesn’t matter if the graph is animated or not.

I have made this minimal example with an animated plot.
Check this out:

import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output
import plotly.express as px

df = px.data.gapminder()
animations = {
    'Scatter': px.scatter(
        df, x="gdpPercap", y="lifeExp", animation_frame="year",
        animation_group="country", size="pop", color="continent",
        hover_name="country", log_x=True, size_max=55,
        range_x=[100,100000], range_y=[25,90]),
    'Bar': px.bar(
        df, x="continent", y="pop", color="continent",
        animation_frame="year", animation_group="country",
        range_y=[0,4000000000]),
}

app = dash.Dash(__name__)

app.layout = dbc.Container([
    html.P("Select an animation:"),
    dcc.RadioItems(
        id='selection',
        options=[{'label': x, 'value': x} for x in animations],
        value='Scatter'
    ),
    dcc.Graph(id="graph"),
    html.Div(id='info')
])

@app.callback(
    Output("graph", "figure"),
    [Input("selection", "value")])
def display_animated_graph(s):
    return animations[s]

@app.callback(
    Output("info", "children"),
    [Input("graph", "clickData"),
     Input('graph', 'hoverData')])
def display_animated_graph(clickdata, hoverdata):
    x1 = y1 = x2 = y2 = 'None'
    if clickdata is not None:
        x1 = clickdata['points'][0]['x']
        y1 = clickdata['points'][0]['y']
    if hoverdata is not None:
        x2 = hoverdata['points'][0]['x']
        y2 = hoverdata['points'][0]['y']
    content = dbc.Row([
            dbc.Col([
                html.H3('Clicked Data'),
                html.H5('x : ' + str(x1)),
                html.H5('y : ' + str(y1)),
            ],width=6),
            dbc.Col([
                html.H3('Hover Data'),
                html.H5('x : ' + str(x2)),
                html.H5('y : ' + str(y2)),
            ],width=6),
        ])
    return content

app.run_server(debug=True)
1 Like
5

I will look into it…Thank you @atharvakatre

1 Like