Dash㊶（Intervalコンポーネント）

Intervalコンポーネント

Intervalコンポーネントを使うと、定期的にコールバックを実行することができます。

Intervalコンポーネントはinterval属性で更新間隔（ミリ秒）を設定します。

またn_intervals属性を参照し、実行回数を確認することができます。

Intervalクラスの設定値は次の通りです。

オプション データ型 内容
interval 数値 更新間隔をミリ秒単位で設定。
デフォルト値は1000。
disabled ブール型 Trueの場合、コンポーネントを更新しない。
n_intervals 数値 更新回数。
デフォルト値は0。
max_intervals 数値 更新回数の上限。指定回数で更新が止まる。
デフォルト値は-1で、無制限に更新される。

今回はIntervalコンポーネントを使って、乱数で生成したデータを1秒ごとにグラフに反映するアプリケーションを作成します。

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
import datetime
import numpy as np
import pandas as pd

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objects as go
from dash.dependencies import Input, Output

start = pd.Timestamp(datetime.datetime.now()).round("s") - datetime.timedelta(seconds=300)

df = pd.DataFrame(
    {'price':np.random.randn(1000).cumsum()},
    index=pd.date_range(start, freq='s', periods=1000)
)


app = dash.Dash(__name__)       # Dashインスタンスを生成

app.layout = html.Div(
    [
        html.H1(id='title1', style={'textAlign':'center'}),
        dcc.Graph(id='graph1'),
        dcc.Interval(id='interval1', interval=1000, max_intervals=100)
    ]
)

# コールバックの定義
@app.callback(
    Output('title1', 'children'),
    Output('graph1', 'figure'),
    Input('interval1', 'n_intervals')
)
def update(n_intervals):
    now = pd.Timestamp(datetime.datetime.now()).round('s')
    past = now - datetime.timedelta(seconds=120)
    plot_df = df.loc[past:now]
    return (
        'live-update-chart: {} / n_intervals: {}'.format(now, n_intervals),
        {'data': [go.Scatter(x=plot_df.index, y=plot_df['price'])]}
    )

if __name__ == '__main__':
    app.run_server(debug=True)      # アプリケーションを起動

コールバックの入力項目にn_interval属性を設定し、一定間隔でアプリケーションを更新しています。

[ブラウザで表示]

１秒ごとにグラフのデータが更新されていることを確認できます。