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

ろうそく立てチャート | 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)と出来事を表示したかったのですが、さてどうしましょう
コメント