四本値ローソク足に挑戦

NK225チャート

ローソク足の記述がある以下サイトを参考にします
気をつけたいのはデータ形式です

ろうそく立てチャート  |  Charts  |  Google for Developers
  • 列 0: X 軸にグループラベルとして使用される文字列(非連続)。X 軸に値として使用する数値、日付、日時、または時刻(連続)
  • 列 1: このマーカーの下限値または最小値を指定する数値。 キャンドルの中心線の土台です。列ラベルは凡例の系列ラベルとして使用されます(他の列のラベルは無視されます)。
  • 列 2: このマーカーの開始値または初期値を指定する数値。 ローソク足のボックスの片方の端となります。列 3 の値未満の場合、キャンドルは塗りつぶされます。それ以外の場合、白丸になります。
  • 列 3: このマーカーの終値または終値を指定する数値。キャンドルの 2 番目の垂直の枠線です。列 2 の値より小さい場合、キャンドルは中が空欄になり、塗りつぶされます。
  • 列 4: このマーカーの最大値または最大値を指定する数値。ローソク足の中央線の上端となります。
  • 列 5 [省略可]: キャンドルのツールチップまたはスタイルの列。

データ列は、date、 open、 high、 low、 close、 incident_1、 incident_2の順番で並んでいるので、セレクト関数で

query.setQuery(‘SELECT A, D, B, E, C, G’);

と並べ替えます(今回、incident_1は使いません)

色々と試したのですが、注釈( incident_2)が表示されません

どうやらGooglechartでローソク足(Candlestick)はannotationをサポートしていないらしい

とりあえず以下はローソク足だけのコード

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawFilteringChart);

      function drawFilteringChart() {
        var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1L9bG7e-9NSIZnKYcsfE2fB440JOVghWL9XuXJj6fCXc/gviz/tq?range=A18550:E');
        query.setQuery('SELECT A, D, B, E, C');
        query.send(handleQueryResponse);
      }

      function handleQueryResponse(response) {
        var data = response.getDataTable();
        data.setColumnLabel(0, 'Date'); // 列のラベルを設定

        // データ型を指定
        data.setColumnProperty(0, 'type', 'date');
        for (var i = 1; i < data.getNumberOfColumns(); i++) {
          data.setColumnProperty(i, 'type', 'number');
        }

        var options = {
          legend: 'none'
        };

        var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 100%; height: 500px;"></div>
  </body>
</html>

ローソク足に、表示範囲フィルター(ChartRangeFilter)と出来事を表示したかったのですが、さてどうしましょう

コメント

タイトルとURLをコピーしました