Pythonのデータ可視化ツールである「Dash」を活用して、株価を時系列に表示するWebアプリケーションを作成します。
ここでは、「DatePickerRange」を導入して、カレンダーから日付を選択できる様にします。
以下の記事を前提として進めますので、まだの方はこちらを読んで下さい。
完成品(株価を時系列に表示するアプリ)
- 株価を時系列に表示するダッシュボードを作成します
- 株式シンボルと期間を選択するとグラフが表示されます
- 株式シンボルをクリックする事で非表示・表示を切り替えられます
pandas-datareaderでデータ取得し、Dashで表示
それでは、早速以下のコードをJupyter Notebookで実行してみましょう。
# 必要なモジュールのインポート
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import pandas_datareader.data as web
from datetime import datetime
# Dashアプリケーションを作成
app = dash.Dash()
# ヘッダー、ボックス、グラフを含むページを作成
app.layout = html.Div([
html.H1('Stock Ticker Dashboard'),
html.Div([
html.H3('Enter a stock symbol:'),
dcc.Input(
id ='my_ticker_symbol',
value='AAPL',# 初期値を設定
style={'fontSize':24, 'width':75} #スタイルを追加
)
],style={'display':'inline-block','verticalAlign':'top'}),
#DatePickerの追加
html.Div([
html.H3('Select a start and end data:'),
dcc.DatePickerRange(id='my_date_picker',
min_date_allowed = datetime(2015,1,1),
max_date_allowed = datetime.today(),
start_date = datetime(2019,1,1),
end_date= datetime.today()
)
],style={'display':'inline-block'}),
dcc.Graph(id='my_graph',
figure={
'data': [
{'x': [1,2], 'y': [3,1]}
]
}
)
])
# コールバック関数の追加
@app.callback(
Output('my_graph', 'figure'),
[Input('my_ticker_symbol', 'value'),
Input('my_date_picker', 'start_date'),
Input('my_date_picker', 'end_date')])
def update_graph(stock_ticker, start_date, end_date):
# スタート日とエンド日の定義
start = datetime.strptime(start_date[:10], '%Y-%m-%d')
end = datetime.strptime(end_date[:10], '%Y-%m-%d')
# DataReaderで接続し、Dataframeに格納(df)
df = web.DataReader(stock_ticker,'iex',start,end)
fig = {
'data': [
# dfをアウトプット
{'x': df.index, 'y': df.close}
],
'layout': {'title':stock_ticker}
}
return fig
# サーバーを起動
if __name__ == '__main__':
app.run_server()
実行結果
日付をカレンダーから選択すると、アップデートした期間で株価が表示されます。
なお、テキストボックスに銘柄（ティッカー）を入力すると、銘柄が変わる度にそれぞれの株価を取得する点は前回通りです。
解説
「Stock Symbol」入力ボックスのレイアウト追加
html.Div([
html.H3('Enter a stock symbol:'),
dcc.Input(
id ='my_ticker_symbol',
value='AAPL',# 初期値を設定
style={'fontSize':24, 'width':75} #スタイルを追加
)
],style={'display':'inline-block','verticalAlign':'top'}),
「Stock Symbol」の入力ボックスをdivタグで囲み、フォントサイズといったスタイルを追加しています。
DatePickerRangeの追加
#DatePickerの追加
html.Div([
html.H3('Select a start and end data:'),
dcc.DatePickerRange(id='my_date_picker',
min_date_allowed = datetime(2015,1,1),
max_date_allowed = datetime.today(),
start_date = datetime(2019,1,1),
end_date= datetime.today()
)
],style={'display':'inline-block'}),
日付をカレンダーから選択できる様に、「DatePickerRange」を追加しています。
「start_date」の初期値を「2019/1/1」とし、end_dateを「当日（datetime.today()）」に設定します。
例えば、「2019/6/3」にプログラムを実行すると、「2019/1/1-2019/6/3」の期間で日付が設定されます。
また、「min_date_allowed」と「max_date_allowed」を設定する事で受け付け可能な最小・最大の日付を設定する事が可能です。
いずれも、’YYYY-MM-DD’の「String型」でデータを受け付けるため、datetime関数を使用します。
詳細は、公式ページをご覧下さい。
コールバック関数に日付レンジを追加
# コールバック関数の追加
@app.callback(
Output('my_graph', 'figure'),
[Input('my_ticker_symbol', 'value'),
Input('my_date_picker', 'start_date'),
Input('my_date_picker', 'end_date')])
「DatePickerRange」で選択した日付をリアルタイムに反映させるため、「start_date」と「end_date」をコールバック関数のInputに追加します。
pandas-datareaderで接続し、Dataframeに格納
def update_graph(stock_ticker, start_date, end_date):
# スタート日とエンド日の定義
start = datetime.strptime(start_date[:10], '%Y-%m-%d')
end = datetime.strptime(end_date[:10], '%Y-%m-%d')
# DataReaderで接続し、Dataframeに格納(df)
df = web.DataReader(stock_ticker,'iex',start,end)
The Investors Exchange (IEX) のデータに接続し、「stock_ticker（テキストボックスに入力された値）」について、「start」から「end」の期間でDatafremeの形でデータを取得しています。
「strptime関数」は文字列から日付・時間へ変換する関数です。
例えば、以下のコードを実行してみましょう。
from datetime import datetime before = '2019-06-05' print(type(before)) print(before) after = datetime.strptime(before, '%Y-%m-%d') print(type(after)) print(after)
実行結果
<class 'str'> 2019-06-05 <class 'datetime.datetime'> 2019-06-05 00:00:00
「before」では「str」クラスでしたが、「strptime」メソッドの結果datetimeオブジェクトに変換されています。
「start_date」と「end_date」が文字列で渡されるため、「strptime」メソッドを使用して変換しています。
