Plotly: Dash button with live graph not working

Question

i developed python dash based application for monitoring. as a part of the project i want to display live graph and change the live graph value based on user input. i am stuck in this part. the live graph getting update when i start typing in input box (eg:temp) the graph keep on updating for each letter like t,te,tem,temp. so i created a button to submit the input value. still the graph updating for each letter.

the code for the same:

app = dash.Dash(__name__)
app.layout = html.Div(
    [ 
    dcc.Input(id='input-value', value='example', type='text'),
    html.Button('Submit', id="submit-button"),
    dcc.Graph(id='live-graph', animate=False),
    dcc.Interval(
        id='graph-update',
        interval=1*1000
    ),
]
)

call back function is like below

@app.callback(Output('live-graph', 'figure'),
          [Input('submit-button','n_clicks')],
          state=[State(component_id='sentiment_term', component_property='value')],
          events=[Event('graph-update', 'interval')])

def update_graph_scatter(n_clicks, input_value):
    conn = sqlite3.connect('database.db')
    c = conn.cursor()
    df = pd.read_sql("SELECT * FROM table WHERE colume LIKE ? ORDER BY unix DESC LIMIT 1000", conn ,params=('%' + input_value+ '%',))
    df.sort_values('unix', inplace=True)

    df['date'] = pd.to_datetime(df['unix'],unit='ms')
    df.set_index('date', inplace=True)

    X = df.index
    Y = df.column

    data = plotly.graph_objs.Scatter(
            x=X,
            y=Y,
            name='Scatter',
            mode= 'lines+markers'
           )

    return {'data': [data],'layout' : go.Layout(xaxis=dict(range=   [min(X),max(X)]),
                                            yaxis=dict(range=[min(Y),max(Y)])}

Note: If i removed the interval the button start working.but i want to be live update as well as button

phifre phifre · Accepted Answer · 2018-09-02T14:05:41

You could use an intermediate component like a div to save the input from the text field and update that div only on button click. So you would have

app = dash.Dash(__name__)
app.layout = html.Div([ 
    dcc.Input(id='input-value', value='example', type='text'),
    html.Div(['example'], id='input-div', style={'display': 'none'}),
    html.Button('Submit', id="submit-button"),
    dcc.Graph(id='live-graph', animate=False),
    dcc.Interval(
        id='graph-update',
        interval=1*1000
    ),
])

Now you update the div only on button click:

@app.callback(Output('input-div', 'children'),
              [Input('submit-button', 'n_clicks')],
              state=[State(component_id='input-value', component_property='value')])
def update_div(n_clicks, input_value):
    return input_value

And the Graph always uses the the div content to query your database (either when the interval triggers or the div changes):

@app.callback(Output('live-graph', 'figure'),
              [Input('graph-update', 'interval'),
               Input('input-div', 'children')])
def update_graph_scatter(n, input_value):
    ...

Plotly: Dash button with live graph not working

2 Answers