前の記事ファイナンス分野で時系列データベースinfluxDBを使うで時系列データベースinfluxDBにyahoo financeから取得した株価を投入する所までやりました。
本記事では、可視化のためのオープンソースのwebアプリケーションであるGrafanaを使い、influxDBに登録した株価のグラフ（ローソク足）を表示させたいと思います。
Grafana設定
ここではdocker-composeを使います。influxdbとgrafanaをまとめてdocker-composeで起動する設定とします。
フォルダ構成
.
├─ docker-compose.yml
├─ influxDB ─ influxdb2 ─ …
├─ ssl
│ ├─ influxdb-selfsigned.crt
│ └─ influxdb-selfsigned.key
└─ grafana ─ grafana ─ …
docker-compose.yml内容
version: '3'
services:
influxdb:
container_name: influxdb
image: influxdb:latest
volumes:
- ./influxDB/influxdb2:/var/lib/influxdb2:rw
ports:
- "8086:8086"
grafana:
image: grafana/grafana:latest
container_name: grafana
#hostname: grafana
ports:
- 3000:3000
volumes:
- ./grafana/grafana:/var/lib/grafana
volumes:
influxdb2:
起動
docker-compose up -d
で起動します。
ブラウザからlocalhost:3000でアクセスし、user nameとpasswordを両方adminと入力するとログイン出来ます。
データソースの追加(influxDBとの連携設定)
GrafanaのConfigurationメニュー→"Data sources"→"Add data source"をクリック。
下記項目を入力して"Save & test"をクリック。
- "Query Language" : "Flux"を選択
- "URL" : http://influxdb:8086
- "Basic Auth Details"のUserとPassword : influxDBのユーザー名とパスワード
- "Organization" : influxDBで登録しているorganization名
- "Token" : influxDBのAPI Tokenをコピペ
Dashboard作成
画面左側のメニューからDashboards→New dashboard→Add a new panelを順に辿る。
query入力部分にFlux（influxDBのクエリ言語）で例えば下記を入力（Fordの株価の場合）:
from(bucket: "influxdb_stock_prices")
|> range(start: v.timeRangeStart, stop: v.timeRangeStop)
|> filter(fn: (r) => r["_measurement"] == "stock prices")
|> filter(fn: (r) => r["NAME"] == "ford")
|> filter(fn: (r) => r["SYMBOL"] == "F")
画面上部の時計マークの所をクリックしてFromをnow-2M、ToをnowにしてApply Time Rangeをクリック。
右上のパネルのタイプとして"Time series"が選ばれている所のドロップダウンメニューから"Candlestick"を選択。
右上のApplyをクリック。するとローソク足で株価が表示されます。
見た目微調整
あとは出来たパネルタイトルの横のドロップダウンリストから"Edit"を選んで見た目を色々と変更できます。
Bollinger Band等の表示
以下はinfluxdbの_fieldにOHLCV以外の"Upper Bollinger Band"、"Lower Bollinger Band"が入っていることを前提としています。
- "Additional fields"で"Include"を選択
- "Point size"を1に変更（これはお好みで）
ここまででとりあえずOHLCV以外の線が表示されます。
- 線の下を不透明にする
- "+ Add field override"をクリック
- "Fields with name"を選択
- "Upper Bollinger Band(base field name)"を選択
- "+ Add override property"で"Graph styles > Fill Opacity"を選択して20程度に設定
- "+ Add override property"で"Standard options > Color scheme"を選択して"Single color"を選択、右端のカラーパレット（default黒になってて見にくいです）で好みの色を選択
同様のことをLower Bollinger Bandに対しても繰り返します。
Legendテキストの変更
デフォールトではLegendに使われるテキストラベルが長たらしいので下記で変更できます。
- パネルのEdit画面で"Overrides"タブを開く。
- Add field overrideをクリック
- Fields with nameを選択
- 変更したい変数を選択
- Add override propertyで"Standard options > Display name"を選択
- 新しいテキストラベルを入力
パネルの複製
パネルタイトルをクリックしてduplicateを選ぶとパネルを複製できるので、他の株の表示用にポチポチ変更できます。
はまり・未解決ポイント
-
Candlestickパネルはまだベータ版ということで贅沢は言えませんが（そもそも無料…）、現状ではfield名が"open"、"high"、"low"、"close"、"volume"の様に頭文字が小文字になっていないとでフォールトで認識してくれない様です。
(Flux言語の方で名前のマッピングなど出来るのかもしれませんが、分かりませんでした。) -
"Graph styles > Fill below to"という設定で上下のBollinger Bandの間だけ色を塗ることが出来るはずなのですが、うまく行きませんでした。謎です。