python-highcharts と pandas-highcharts を使って Jupyter Notebook にローソク足を表示してみました

広告

前回%%html%%javascript マジックコマンドを使って Highcharts のローソク足を表示してみました。 今回は、 python-highcharts と pandas-highcharts を使ってローソク足を表示してみました。

結果として、 python-highcharts でローソク足を表示することができましたが、 pandas-highcharts は candlestick をまだサポートしていないようで、表示することができませんでした。

環境

  • Python 3.5.2
  • numpy-1.14.3
  • pandas-0.22.0
  • jupyter 1.0.0
  • jupyter-core 4.4.0
  • python-highcharts 0.4.1
  • pandas-highcharts 0.5.2
  • requests 2.18.4

Jupyter Notebook はこの記事の通りインストールしておきました。 pandas もこの記事の通りインストールしておきました。 それから requests も pip install requests でインストールしておきました。

python-highcharts

python-highcharts から使ってみます。

Overview

python-highcharts is a simple translation layer between Python and Javascript for Highcharts projects (highcharts, highmaps, and highstocks).

In addition, python-highcharts integrates with Jupyter notebook, which enables you to render Highcharts, Highmaps, and Highstock visualizations directly in notebooks. See examples here.

The original framework was inspired by python-nvd3 and PyHighcharts.

kyper-data/python-highcharts: A simple translation layer between Python and Javascript for Highcharts projects (highcharts, highmaps, and highstocks).

Highchart 用の Python と JavaScript の間の単純な翻訳レイヤーのようです。

Jupyter Notebook と統合されていて、チャートを直接レンダリングすることができるようです。 Jupyter Notebook でしか使わないので、それ以外にどういう使い方をするのか見てみたら、チャートを表示するための、素の HTML を返してくれるようでした。 通常の pandas-highcharts の example では最後に H.htmlcontent と記述しているのに対して、 Jupyter Notebook 向けの pandas-highcharts の example では最後に H と記述していました。 (H は python-highcharts の Highcharts オブジェクト)

Installation

python-highcharts supports Python 2.73.4+ and is available on PyPI. To install:

pip install python-highcharts

kyper-data/python-highcharts: A simple translation layer between Python and Javascript for Highcharts projects (highcharts, highmaps, and highstocks).

pip で普通にインストールすればいいみたいです。

$ pip install python-highcharts
Collecting python-highcharts
  Downloading https://files.pythonhosted.org/packages/68/3e/35468ee90e1d444f53e207b9f51d1bb64b83c714aaa529bcf7892d8c59ad/python-highcharts-0.4.1.tar.gz (52kB)
    100% |████████████████████████████████| 61kB 1.0MB/s
Requirement already satisfied: Jinja2 in /path/to/dir/lib/python3.5/site-packages (from python-highcharts) (2.10)
Collecting future (from python-highcharts)
  Downloading https://files.pythonhosted.org/packages/00/2b/8d082ddfed935f3608cc61140df6dcbf0edea1bc3ab52fb6c29ae3e81e85/future-0.16.0.tar.gz (824kB)
    100% |████████████████████████████████| 829kB 1.3MB/s
Requirement already satisfied: MarkupSafe>=0.23 in /path/to/dir/lib/python3.5/site-packages (from Jinja2->python-highcharts) (1.0)
Building wheels for collected packages: python-highcharts, future
  Running setup.py bdist_wheel for python-highcharts ... done
  Stored in directory: /home/user/.cache/pip/wheels/1f/e2/78/f01d332a34554dbd90ba9f30529b3aeeb89ab41a8f7e374316
  Running setup.py bdist_wheel for future ... done
  Stored in directory: /home/user/.cache/pip/wheels/bf/c9/a3/c538d90ef17cf7823fa51fc701a7a7a910a80f6a405bf15b1a
Successfully built python-highcharts future
Installing collected packages: future, python-highcharts
Successfully installed future-0.16.0 python-highcharts-0.4.1

future と python-highcharts がインストールされたみたいです。

HighStock の candlestick (ローソク足)

できないかと思っていたのですが、 python-highcharts でローソク足を表示することができるようでした。 candlestick の example もありました。 Jupyter Notebook Viewer から example のローソク足のチャートが見られます。

H.add_data_set(ohlc, 'candlestick', 'AAPL', dataGrouping = {
                    'units': groupingUnits
                }
)

# …略…

H.set_dict_options(options)

Highstock Demos | Jupyter Notebook Viewer

H.add_data_set でデータを設定して、 H.set_dict_options でオプションを設定してあげればよさそうです。 やってることは (Highstock のデモ)と同じように見えました。

モジュールを読み込む

pandas でデータを扱いたいので pandas を読み込みました。 requests はみんかぶ FX からレートを取ってくるために読み込みました。 ローソク足を表示するために Highstock を読み込みました。

import pandas as pd
import requests
from highcharts import Highstock

データを取ってくる

以前、みんかぶ FX のチャートのレートを取得してみましたでやったのと同じようにデータを取ってきました。

headers = { 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/17.17134' }
r = requests.get('https://fx.minkabu.jp/api/v2/bar/USDJPY/daily.json?count=240', headers=headers)
r.raise_for_status()
r.json()[:10]

結果です。

[[1497474000000, '109.554', '110.979', '109.258', '110.911'],
 [1497560400000, '110.925', '111.415', '110.637', '110.89'],
 [1497819600000, '110.841', '111.601', '110.704', '111.526'],
 [1497906000000, '111.514', '111.782', '111.306', '111.454'],
 [1497992400000, '111.434', '111.738', '111.035', '111.375'],
 [1498078800000, '111.337', '111.446', '110.93', '111.319'],
 [1498165200000, '111.32', '111.427', '111.142', '111.226'],
 [1498424400000, '111.157', '111.939', '111.101', '111.86'],
 [1498510800000, '111.82', '112.464', '111.459', '112.337'],
 [1498597200000, '112.337', '112.416', '111.829', '112.28']]

2 次元配列の形式になっていること、日時は Unix エポックであること、 OHLC が '109.554' のようにシングルクォーテーションで囲まれているところがポイントだと思いました。

pandas の DataFrame にする

DataFrame にしました。

df = pd.DataFrame(data=r.json(), columns=['time', 'open', 'high', 'low', 'close'])
df.head()

結果です。

	time 	open 	high 	low 	close
0 	1497474000000 	109.554 	110.979 	109.258 	110.911
1 	1497560400000 	110.925 	111.415 	110.637 	110.89
2 	1497819600000 	110.841 	111.601 	110.704 	111.526
3 	1497906000000 	111.514 	111.782 	111.306 	111.454
4 	1497992400000 	111.434 	111.738 	111.035 	111.375

時刻を EEST にする

以前、時刻を EEST にしたことがあったのですが、同じように EEST にしました。 でも、 python-highcharts の example を見ると Unix エポックでデータを渡していたので datetime 型から int64 型に戻しています。

String value sent to series.data, expected Number

Highcharts Error #14

それから、 OHLC が str 型になってしまっていて、このまま Highstock に渡してもエラーになってしまうので、 float64 型にしました。

# [From Timestamps to Epoch](https://pandas.pydata.org/pandas-docs/stable/timeseries.html#from-timestamps-to-epoch)
utc = pd.to_datetime(df['time'], unit='ms')
utc3 = utc + pd.DateOffset(hours=3)
epoch = (utc3 - pd.Timestamp("1970-01-01")) / pd.Timedelta('1ms')
data1 = { 'time': epoch.astype('int64').values, 'open': df['open'].astype('float64').values, 'high': df['high'].astype('float64').values, 'low': df['low'].astype('float64').values, 'close': df['close'].astype('float64').values}
columns1 = ['time', 'open', 'high', 'low', 'close']
df2 = pd.DataFrame(data=data1, columns=columns1)
df2.head()

結果です。

time 	open 	high 	low 	close
0 	1497484800000 	109.554 	110.979 	109.258 	110.911
1 	1497571200000 	110.925 	111.415 	110.637 	110.890
2 	1497830400000 	110.841 	111.601 	110.704 	111.526
3 	1497916800000 	111.514 	111.782 	111.306 	111.454
4 	1498003200000 	111.434 	111.738 	111.035 	111.375

df.head() で表示してしまったので、型が把握しづらいですが、 df.dtypes で float64 になっていることを確認しました。

ローソク足のチャートを表示する

example をもとに H.add_data_setH.set_dict_options を記述しました。

H.add_data_set の方は、 Highstock を使ったときと同じデータの形式を渡しているようなので、 df2.values.tolist() のように日時と OHLC を持つ 2 次元配列の形式で渡しました。

H.set_dict_options の方は、最低限のオプションを指定して渡しました。

H = Highstock()
H.add_data_set(df2.values.tolist(), 'candlestick', '米ドル/円')

options = {
    'rangeSelector': {
        'selected': 1
    },
    'title': {
        'text': '米ドル/円 daily'
    }
}
H.set_dict_options(options)

H

Gist のソース

Gist にアップしました。 Jupyter Notebook Viewer から見ることができます。

pandas-highcharts

pandas-highcharts is a Python package which allows you to easily build Highcharts plots with pandas.DataFrame objects.

What is it

pandas の DataFrame を Highcharts のチャートに表示してくれるようです。

Installation

Install the package using pip

pip install pandas-highcharts

Installation

pip でインストールすればいいみたいです。

$ pip install pandas-highcharts
Collecting pandas-highcharts
  Downloading https://files.pythonhosted.org/packages/1a/70/fe7201bb6750e26dbf662d5b0f12fe6d41a4e3edf5e49314597913026bd1/pandas-highcharts-0.5.2.tar.gz
Requirement already satisfied: pandas in /path/to/dir/lib/python3.5/site-packages (from pandas-highcharts) (0.22.0)
Requirement already satisfied: ipython in /path/to/dir/lib/python3.5/site-packages (from pandas-highcharts) (6.3.1)
Collecting coverage (from pandas-highcharts)
  Downloading https://files.pythonhosted.org/packages/2c/c0/8047b7cbbcdbd7d21f8d68126196b7915da892c5af3d1a99dba082d33ec0/coverage-4.5.1-cp35-cp35m-manylinux1_x86_64.whl (202kB)
    100% |████████████████████████████████| 204kB 649kB/s
Requirement already satisfied: python-dateutil>=2 in /path/to/dir/lib/python3.5/site-packages (from pandas->pandas-highcharts) (2.7.2)
Requirement already satisfied: pytz>=2011k in /path/to/dir/lib/python3.5/site-packages (from pandas->pandas-highcharts) (2018.4)
Requirement already satisfied: numpy>=1.9.0 in /path/to/dir/lib/python3.5/site-packages (from pandas->pandas-highcharts) (1.14.3)
Requirement already satisfied: simplegeneric>0.8 in /path/to/dir/lib/python3.5/site-packages (from ipython->pandas-highcharts) (0.8.1)
Requirement already satisfied: setuptools>=18.5 in /path/to/dir/lib/python3.5/site-packages (from ipython->pandas-highcharts) (39.1.0)
Requirement already satisfied: backcall in /path/to/dir/lib/python3.5/site-packages (from ipython->pandas-highcharts) (0.1.0)
Requirement already satisfied: jedi>=0.10 in /path/to/dir/lib/python3.5/site-packages (from ipython->pandas-highcharts) (0.12.0)
Requirement already satisfied: pickleshare in /path/to/dir/lib/python3.5/site-packages (from ipython->pandas-highcharts) (0.7.4)
Requirement already satisfied: pexpect; sys_platform != "win32" in /path/to/dir/lib/python3.5/site-packages (from ipython->pandas-highcharts) (4.5.0)
Requirement already satisfied: prompt-toolkit<2.0.0,>=1.0.15 in /path/to/dir/lib/python3.5/site-packages (from ipython->pandas-highcharts) (1.0.15)
Requirement already satisfied: traitlets>=4.2 in /path/to/dir/lib/python3.5/site-packages (from ipython->pandas-highcharts) (4.3.2)
Requirement already satisfied: decorator in /path/to/dir/lib/python3.5/site-packages (from ipython->pandas-highcharts) (4.3.0)
Requirement already satisfied: pygments in /path/to/dir/lib/python3.5/site-packages (from ipython->pandas-highcharts) (2.2.0)
Requirement already satisfied: six>=1.5 in /path/to/dir/lib/python3.5/site-packages (from python-dateutil>=2->pandas->pandas-highcharts) (1.11.0)
Requirement already satisfied: parso>=0.2.0 in /path/to/dir/lib/python3.5/site-packages (from jedi>=0.10->ipython->pandas-highcharts) (0.2.0)
Requirement already satisfied: ptyprocess>=0.5 in /path/to/dir/lib/python3.5/site-packages (from pexpect; sys_platform != "win32"->ipython->pandas-highcharts) (0.5.2)
Requirement already satisfied: wcwidth in /path/to/dir/lib/python3.5/site-packages (from prompt-toolkit<2.0.0,>=1.0.15->ipython->pandas-highcharts) (0.1.7)
Requirement already satisfied: ipython-genutils in /path/to/dir/lib/python3.5/site-packages (from traitlets>=4.2->ipython->pandas-highcharts) (0.2.0)
Building wheels for collected packages: pandas-highcharts
  Running setup.py bdist_wheel for pandas-highcharts ... done
  Stored in directory: /home/user/.cache/pip/wheels/80/19/70/4d06e20e74ccdca862e7bcb5b1a9da97b3da45dbf1c7d26416
Successfully built pandas-highcharts
Installing collected packages: coverage, pandas-highcharts
Successfully installed coverage-4.5.1 pandas-highcharts-0.5.2

インストールできました。 coverage と pandas-highcharts がインストールされたようです。

DataFrame を作るまで

データを取ってきて、 pandas の DataFrame を作るところまでは上の python-highcharts と同様に進めました。

ローソク足のチャートを表示する

ローソク足じゃないのですが、 Jupyter Notebook に表示するための example があったので、これを参考にしました。

ローソク足を表示しようと、 chart = display_charts(df2, render_to="my-chart", title="My Chart", kind="candlestick") のような指定 kind="candlestick" (ローソク足)をしました。 すると、 # ValueError: candlestick plots are not yet supported のようなメッセージが Out に表示されました。 pandas-highcharts はローソク足に対応していないようでした。

仕方ないので line chart を表示して終わりにしました。

Gist のソース

Gist にアップしました。 Jupyter Notebook Viewer から見ることができます。

Highcharts is not defined

pandas-highcharts の問題があって、 .ipynb ファイルを閉じて、開き直すと、 ReferenceError: Highcharts is not defined のエラーが表示されます。 Highcharts のモジュールを読み込む前にチャートを表示する処理が動いてしまっているようです。

前回、 %%html%%javascript を使って無理やり実装したときは、読み込みが終わるのを待つような考慮をしました。

でも、 Jupyter Notebook Viewer で pandas-highcharts の example を見ると、このようなエラーは表示されません。 ローカルで動かしているときにだけ起きるエラーなのかな。

気になって Jupyter Notebook Viewer のページのソースを見たら次のようになっていました。

<div class="output_html rendered_html output_subarea ">

<script src="//code.highcharts.com/stock/highstock.js"></script>
<script src="//code.highcharts.com/highcharts-more.js"></script>
<script src="//code.highcharts.com/modules/exporting.js"></script>

</div>

from pandas_highcharts.display import display_charts したセルの Out のところで <script> が記述されていました。

ローカルで動かす Jupyter Notebook はセルを編集するので <script> を jQuery で動的に埋め込むようでした。 動的に埋め込まれた <script> タグは DOMContentLoadedload イベントと同期的に読み込まれないようです。

Jupyter Notebook Viewer はセルを編集する必要がないので <script> をページのソースとして静的に記述しているようでした。 結果、 Jupyter Notebook Viewer の方は上から順番にモジュールが読み込まれることでエラーになっていないようでした。

終わり

python-highcharts はローソク足が表示できるところがよかったです。

pandas-highcharts はローソク足は表示できませんでしたが、 pandas と合わせて使いやすい API になっているところがよかったです。 DataFrame の index が勝手に X 軸になってくれたり、日時は Unix エポックじゃなくて DateTimeIndex のまま渡すことができたり、扱いやすい印象です。

広告
広告