wivern ロゴ

サイバーセキュリティ研究所

サイバーセキュリティを中心に、軍事、防犯、サーバーの管理と監視、その他、最新技術を研究しています。


GoogleChartAPIでローソク足を描画する方法

GoogleChartAPIで株価チャートを描画する方法

はじめに
 「ホームページに株価チャートを描画する方法を調べて欲しい」という依頼(お仕事)があったので、自分への備忘録の意味も兼ねて、ここでレポートしたいと思います。
 正確には「データベースに蓄積された膨大な株価データを、いろいろな条件で抽出して、その結果をチャートにしてホームページに描画する方法」みたいな依頼だったのですが、これではボリュームがありすぎるのと、あまり万人向けな内容でもないので汎用性に欠けるという観点から、このレポートでは「ホームページに株価チャートを描画する方法」だけに焦点をあてて公開することにしました。

GoogleChartAPI と GoogleChartTools
 株価の推移を表すローソク足チャートを描画するには、GoogleChartAPI と GoogleChartTools があります。

簡単にこの両者の違いを説明すると、

 GoogleChartTools は、動的なチャートを描画するのに特化していて、JavaScript で描画します。ローソク足チャートを描画することに限定して言えば、ローソク足チャートと移動平均線や出来高等の種類の異なるチャートを同時に描画することはできません。

 GoogleChartAPI は、静的なチャートを描画するのに特化していて、HTML の img タグで描画します。ローソク足チャートを描画することに限定して言えば、ローソク足チャートと複数の移動平均線、ローソク足チャートと出来高の棒グラフといった2種類までのチャートであれば、同時に描画することができますが、ローソク足チャートと移動平均線と出来高の3種類を同時に描画することはできません。

 以上から、今回のローソク足チャートの描画には、GoogleChartAPI を採用することにしました。

 3種類以上のチャートを同時に描画する方法をご存知の方がおられましたらご教授ください。ネット系証券会社のホームページでは、この3種類を独自の API で描画しているように見受けられます。この API を公開してくれたら嬉しいんですけど、サーバー負荷を考えると難しいでしょうね。

 最近隆盛を極める JavaScript のオープンなライブラリを、GitHub とかで探せば見つかるかも知れませんが、それはまたの機会に。

GoogleChartAPI でローソク足チャートを描画する
それでは、ローソク足チャートを描画してみます。
任天堂(大証1部:7974)の2013年6月の日足チャートです。

ローソク足だけ
ローソク足だけ

ローソク足+出来高
※2つのチャートを離して見やすくするために、縦のスケールを変更しています。
ローソク足+出来高

ローソク足+5日移動平均
ローソク足+移動平均線

この3パターンのチャートそれぞれについて、描画方法を説明します。


チャートの描画方法(ローソク足だけ)
いずれのチャートも、全て img タグで描画しています。
これが「ローソク足だけ」のチャートを描画している img タグです。
<img src='http://chart.apis.google.com/chart?chs=500x300&cht=lc&chd=t0:0,9870,9700,9570,9230,9070,9360,9540,9270,9100,9550,9670,10270,10620,10810,10580,10730,10580,10770,10900,11180,0|0,10020,9850,10030,9500,9160,9500,9760,9500,9300,9630,9670,10350,10620,10860,10600,10960,10800,10840,11020,11200,0|0,9980,10030,9660,9230,9300,9940,9730,9500,9350,9550,10440,10500,11000,10940,10750,10950,10620,10980,10940,11700,0|0,10130,10030,10030,9710,9580,9940,9860,9510,9500,9840,10440,10500,11090,11020,11080,11030,10860,11180,11170,11730,0&chds=8900,12000&chxt=y,x&chxl=0:|8900|12000|1:|2013年6月3日|&chxs=0,666666,11,-1|1,666666,11,-1&chm=F,0044FF,0,,15' width='500' height='300' alt='ローソク足だけ'>
それでは、順にパラメータの意味を説明していきます。
最初に「おまじない」があって、
<img src='http://chart.apis.google.com/chart
後はこの「おまじない」に続けて、?で各パラメータをつないでいきます。

パラメータ 記述例 説明
chs       chs=500x300 チャートのサイズ(幅×高さ)。
width 属性と height 属性の値に一致させること。
cht cht=lc チャートの種類
lc:折れ線グラフ
chd chd=t0:0,9870,... データの指定(下記参照)
chds chds=8900,12000 スケール(最小値、最大値)
chxt chxt=y,x 表示する軸の指定
chxl chxl=0:|8900|12000|1:|2013年6月3日| 軸のキャプション(1軸につき2つずつ)
軸インデックス(0から):|最小側|最大側|で順に指定
chxs chxs=0,666666,11,-1|1,666666,11,-1 軸のラベルスタイル
軸インデックス(0から),ラベル色指定,フォントサイズ,アラインメント
chm chm=F,0044FF,0,,15 マーカー指定( F でローソク足)(下記参照)
パラメータとしてはここまでなので、ここまでを'で括って、続けて、width 属性、height 属性、alt 属性を記述します。

chd : 詳細説明
chd によるデータ指定が、ちょっとめんどくさいです。

まず、chd=t0:の部分。
このt0は、データの何番目からローソク足のデータが始まるかを指定します。
ローソク足だけのチャートであれば、ローソク足のデータしかないので、当然t0になります。
ここでの指定は、chmパラメータの3番目のパラメータと連動するので注意が必要です。(後述)

その後に、ローソク足のデータを指定します。
「安値|始値|終値|高値」という形式で、一日単位の指定ではないことに注意が必要です。
期間内の「安値」だけを続けて指定して、次に「始値」「終値」「高値」を順に指定します。
データの種類毎に、セパレータとして「|」を記入します。

chm : 詳細説明
ここでの指定がローソク足を描画する二つ目の要所になります。
上記のチャートでは、chm=F,0044FF,0,,15となっていて、空欄を含めて5つの値が設定されています。

1番目の値:F
マーカー指定で、ローソク足を指定しています。

2番目の値:0044FF
ローソク足の色を指定しています。

3番目の値:0
一連のデータの何番目からローソク足のデータが始まっているかを指定しています。
前述のchd=t0:の指定と同じ値を指定します。

4番目の値:(空欄)
ローソク足の対象とするデータの数を指定しています。デフォルトは全てなので空欄にしています。

5番目の値:15
ローソク足の幅を指定しています。


チャートの描画方法(ローソク足+出来高)
これが「ローソク足+出来高」のチャートを描画している img タグです。
<img src='http://chart.apis.google.com/chart?chs=500x300&cht=bvg&chd=t1:566400,496100,709100,709000,869200,678900,605000,695000,759600,663800,1212600,637200,1063700,737000,1074200,804200,844300,896600,780400,1268000,-1|9870,9700,9570,9230,9070,9360,9540,9270,9100,9550,9670,10270,10620,10810,10580,10730,10580,10770,10900,11180,0|10020,9850,10030,9500,9160,9500,9760,9500,9300,9630,9670,10350,10620,10860,10600,10960,10800,10840,11020,11200,0|9980,10030,9660,9230,9300,9940,9730,9500,9350,9550,10440,10500,11000,10940,10750,10950,10620,10980,10940,11700,0|10130,10030,10030,9710,9580,9940,9860,9510,9500,9840,10440,10500,11090,11020,11080,11030,10860,11180,11170,11730,0&chds=0,4000000,7500,12000&chxt=y,x&chxl=0:|7500|12000|1:|2013年6月3日&chxs=0,666666,11,-1|1,666666,11,-1&chm=F,0044FF,1,,15&chbh=20,0,2&chco=FF0000' width='500' height='300' alt='ローソク足+出来高'>
最初に「おまじない」があるのは同じで、
<img src='http://chart.apis.google.com/chart
この「おまじない」に続けて、?で各パラメータをつないでいきます。

パラメータ 記述例 説明
chs           chs=500x300 チャートのサイズ(幅×高さ)。
width 属性と height 属性の値に一致させること。
cht cht=bvg チャートの種類
bvg:棒グラフ
chd chd=t1:566400,... データの指定(下記参照)
chds chds=0,4000000,7500,12000 スケール(最小値、最大値)
ローソク足と出来高等を表示する場合は、出来高のスケール(最小値、最大値)とローソク足のスケール(最小値、最大値)の4つの値を指定します。
chxt chxt=y,x 表示する軸の指定
chxl chxl=0:|7500|12000|1:|2013年6月3日| 軸のキャプション(1軸につき2つずつ)
軸インデックス(0から):|最小側|最大側|で順に指定
chxs chxs=0,666666,11,-1|1,666666,11,-1 軸のラベルスタイル
軸インデックス(0から),ラベル色指定,フォントサイズ,アラインメント
chm chm=F,0044FF,1,,15 マーカー指定( F でローソク足)(下記参照)
chbh chbh=20,0,2 棒グラフの幅とスペーシングの指定。
棒グラフの幅、棒グラフ同士の間隔、系統ごとの棒グラフの間隔、の順に指定。
chco chco=FF0000 チャート(棒グラフ)の色の指定。
パラメータとしてはここまでなので、ここまでを'で括って、
続けて、width 属性、height 属性、alt 属性を記述します。

chd : 詳細説明
「ローソク足だけ」の場合との違いは、chd=t1:の部分です。
このt1は、この後に続くデータの何番目からローソク足のデータが始まるかを指定します。
ローソク足だけのチャートであれば、ローソク足のデータしかないので、t0になりますが、
今回は「ローソク足+出来高」で、データの最初に出来高の値が来るので、ローソク足の
データは0番目ではなくて1番目、つまり、t1になります。
ここでの指定は、chmパラメータの3番目のパラメータと連動するので注意が必要です。(後述)

その後に、データを指定します。
まず、期間内の出来高の値を続けて指定して、その後、期間内の「安値」だけを続けて指定して、
同様に「始値」「終値」「高値」を順に指定します。
データの種類毎に、セパレータとして「|」を記入します。

chm : 詳細説明
上記のチャートでは、chm=F,0044FF,1,,15となっていて、空欄を含めて5つの値が設定されています。
「ローソク足だけ」の場合との違いは、3番目の値だけです。

3番目の値:1
一連のデータの何番目からローソク足のデータが始まっているかを指定しています。
前述のchd=t1:の指定と同じ値を指定します。


チャートの描画方法(ローソク足+5日移動平均)
これが「ローソク足+5日移動平均」のチャートを描画している img タグです。
<img src='http://chart.apis.google.com/chart?chs=500x300&cht=lc&chd=t1:-1,10126,10086,9972,9794,9640,9632,9572,9540,9564,9614,9714,9868,10168,10486,10726,10828,10852,10848,10848,11038,-1|0,9870,9700,9570,9230,9070,9360,9540,9270,9100,9550,9670,10270,10620,10810,10580,10730,10580,10770,10900,11180,0|0,10020,9850,10030,9500,9160,9500,9760,9500,9300,9630,9670,10350,10620,10860,10600,10960,10800,10840,11020,11200,0|0,9980,10030,9660,9230,9300,9940,9730,9500,9350,9550,10440,10500,11000,10940,10750,10950,10620,10980,10940,11700,0|0,10130,10030,10030,9710,9580,9940,9860,9510,9500,9840,10440,10500,11090,11020,11080,11030,10860,11180,11170,11730,0&chco=FF0000&chds=8900,12000&chxt=y,x&chxl=0:|8900|12000|1:|2013年6月3日|&chxs=0,666666,11,-1|1,666666,11,-1&chm=F,0044FF,1,,15,-1' width='500' height='300' alt='ローソク足+移動平均線'>
基本的な考え方は、「ローソク足+出来高」と同じで、違うところはcht=lcと、
チャートの種類の指定が「折れ線グラフ」になっているぐらいです。

移動平均のグラフを2本以上にすることも可能です。
その場合は、chd=t2:として、ローソク足のデータが2番目から始まることを指定して、
1本目の移動平均の値|2本目の移動平均の値|安値|始値|終値|高値、と記述します。
chm=F,0044FF,2,,15の3番目の値も、同様です。


参考リンク

このレポートを書くために、以下のサイトを参考にさせていただきました。
Google Chart APIでローソク足を表示する
GoogleChartAPI : List of Chart Parameters( パラメータの説明:英語 )


編集後記

Google Chart API をいろいろ調べてたら、Google Chart API を使えばホームページに数式が書けることがわかって、ちょっと興奮しています。
また、機会を設けて公開できればと思います。


記述に際しては、細心の注意をしたつもりですが、間違いやご指摘がありましたら、こちらからお知らせいただけると幸いです。


→「Google Analyticsで自分のアクセスを除外する方法」


« 戻る