取得したデータをグラフ化して表示しようと思って、グラフやチャート関連のjavascriptをさがしてました。
Google Chart APIを利用してみました。
サンプルやドキュメントがあるのでそれほど苦労することなく作成可能できます。基本的なグラフなら…。
利用するチャートは、下記のCandlestick Charts(キャンドルスティックチャート)です。日本語だとローソク足です。
■Candlestick Charts
https://developers.google.com/chart/interactive/docs/gallery/candlestickchart
HTMLはこのままコピペで表示することができるのでまずは、これをコピペして利用します。
変更する部分は主に、var dataとvar optionsの内容の部分です。
var dataの
['Mon', 20, 28, 38, 45],
['Tue', 31, 38, 55, 66],
['Wed', 50, 55, 77, 80],
はデータの順が「順番」「安値」「終値」「始値」「高値」です。
順番データは曜日以外にも数字や日付でもOKです。あくまで横軸として使用するデータです。
例:横軸が数字になるだけ。
['1', 20, 28, 38, 45],
['2', 31, 38, 55, 66],
['3', 50, 55, 77, 80],
すごく簡単にいろいろなグラフを作成することができますが、
ローソク足で複合グラフをするのは少しむつかしそうです。
jqplotのローソク足を試して比較してみようと思います。