Plotly: кнопка Dash с живым графиком не работает - PullRequest
Новая
       5

Plotly: кнопка Dash с живым графиком не работает

0 голосов
/ 31 августа 2018

Я разработал приложение для мониторинга на основе Python. как часть проекта, я хочу отобразить график в реальном времени и изменить значение графика в зависимости от ввода пользователя. я застрял в этой части. Живой график обновляется, когда я начинаю печатать в поле ввода (например, temp), график продолжает обновляться для каждой буквы, такой как t, te, tem, temp. поэтому я создал кнопку для ввода входного значения. по-прежнему график обновления для каждой буквы.

код для того же: 

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
    ),
]
)

функция обратного вызова, как показано ниже 

@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)])}

Примечание: если я удалил интервал, кнопка начинает работать. Но я хочу быть в режиме реального времени, а также кнопка

Ответы [ 2 ]

0 голосов
/ 02 сентября 2018

Вы можете использовать промежуточный компонент, такой как div, чтобы сохранить ввод из текстового поля и обновить этот div только при нажатии кнопки. Таким образом, вы бы 

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
    ),
])

Теперь вы обновляете div только при нажатии кнопки: 

@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

И График всегда использует содержимое div для запроса вашей базы данных (либо при срабатывании интервала, либо при изменении div): 

@app.callback(Output('live-graph', 'figure'),
              [Input('graph-update', 'interval'),
               Input('input-div', 'children')])
def update_graph_scatter(n, input_value):
    ...
0 голосов
/ 02 сентября 2018

Вы уверены, что обновления на каждой букве происходят из-за ввода? Похоже, интервал обновляет график с вводом, который вы не завершили.

P.S .: Я полагаю, у вас есть несоответствие имени между вашим входом и идентификатором состояния.

...