Animation in Dash

Dash Python
1

Hi,
I’m trying to draw a simple bar plot and highlight each bar until the bar with value given in Input box does comes.
I tried it with Frames, and it works perfectly but when using Frames the play button is shown.

I want to play animation as soon as value is changed in the Input box.

import plotly.express as px
import plotly.graph_objects as go
import numpy as np
from dash import Dash, dcc, html, Input, Output

y = np.random.choice(100, size = 10, replace = False)
x = [i for i in range(1, 11, 1)]

app = Dash(__name__)
fig = go.Figure(go.Bar(x = x, y = y , text = y, marker_color = '#3A0B61',
                       textposition='inside', textangle=0, textfont_size=10))
fig.update_layout(xaxis = {'visible': False}, yaxis = {'visible': False})
def show_bar_graph(num):
    flag = 0
    frames = []
    colors = ['#3A0B61'] * 10
    for i, v in enumerate(y):
        colors[i] = '#FF4949'
        if i > 0:
            colors[i - 1] = '#3A0B61'
            colors[i] = '#FF4949'
        if v == num:
            flag = 1
            colors[i] = '#13CE66'
        frames.append(
            go.Frame(data= [go.Bar(x = x, y = y, text = y , marker_color = colors)])
        )
        if flag == 1:
            break
    if flag == 0:
        frames.append(
            go.Frame(data= [go.Bar(x = x, y = y, text = y , marker_color = '#3A0B61')])
        )
    fig = go.Figure(data = [go.Bar(x = x, y = y,text = y, marker_color = '#3A0B61', textposition='inside', 
                                textangle=0, textfont_size=10)],
                    layout = go.Layout(title_text = 'Linear Search',
                                    yaxis = {'visible': False},
                                    xaxis = {'visible': False},
                                    template = 'plotly_white',
                                    updatemenus=[dict(type="buttons",
                                        buttons=[dict(label="Play",
                                            method="animate",
                                            args=[None])])]
                                    ),
                    frames = frames)
    return fig

app.layout = html.Div(children=[
    dcc.Graph(id = 'bar_graph', figure = fig),
    html.Br(),
    html.Div(children = [
        "Enter the number to Search:",
        dcc.Input(id = 'my-input', type = 'text')
    ], style = {'color': 'white'})
]
)
@app.callback(
    Output(component_id='bar_graph', component_property='figure'),
    Input(component_id='my-input', component_property='value')
)
def search_number(num):
    num = int(num)
    return show_bar_graph(num)
    
    
if __name__ == '__main__':
    app.run_server()

Thanks
ASHISH

2

Hi @ashishkrsoutlook Could you please format your code with the pre-formatted text option?