サイバーセキュリティ＆人工知能研究所

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

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

2013/07/04 : TechReports

はじめに

　「ホームページに株価チャートを描画する方法を調べて欲しい」という依頼(お仕事)があったので、自分への備忘録の意味も兼ねて、ここでレポートしたいと思います。

---

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

GoogleChartAPI と GoogleChartTools

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

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

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

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

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

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

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

GoogleChartAPI でローソク足チャートを描画する

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

ローソク足だけ


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


ローソク足＋５日移動平均


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

チャートの描画方法(ローソク足だけ)

いずれのチャートも、全て 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

後はこの「おまじない」に続けて、?で各パラメータをつないでいきます。

パラメータとしてはここまでなので、ここまでを'で括って、続けて、width 属性、height 属性、alt 属性を記述します。

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

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

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

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

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

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

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

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

５番目の値：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

この「おまじない」に続けて、?で各パラメータをつないでいきます。

パラメータとしてはここまでなので、ここまでを'で括って、
続けて、width 属性、height 属性、alt 属性を記述します。

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

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

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

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

チャートの描画方法(ローソク足＋５日移動平均)

これが「ローソク足＋５日移動平均」のチャートを描画している 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と、
チャートの種類の指定が「折れ線グラフ」になっているぐらいです。

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

参考リンク

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

編集後記

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

---

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

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


«　戻る