前回、 %%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.
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.7/3.4+ and is available on PyPI. To install:
pip install python-highcharts
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)
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
それから、 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_set と H.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.
pandas の DataFrame を Highcharts のチャートに表示してくれるようです。
Installation
Install the package using pip
pip install pandas-highcharts
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> タグは DOMContentLoaded や load イベントと同期的に読み込まれないようです。
Jupyter Notebook Viewer はセルを編集する必要がないので <script> をページのソースとして静的に記述しているようでした。
結果、 Jupyter Notebook Viewer の方は上から順番にモジュールが読み込まれることでエラーになっていないようでした。
終わり
python-highcharts はローソク足が表示できるところがよかったです。
pandas-highcharts はローソク足は表示できませんでしたが、 pandas と合わせて使いやすい API になっているところがよかったです。 DataFrame の index が勝手に X 軸になってくれたり、日時は Unix エポックじゃなくて DateTimeIndex のまま渡すことができたり、扱いやすい印象です。