サブチャートの完成 - 相場史データベース〜歴史は繰り返さないが韻を踏む〜

サブチャートは以下の形

コードは

<!DOCTYPE html>
<html>
<head>
    <!-- Google Charts用のスクリプトを読み込む -->
    <script src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
    <!-- ダッシュボードのコンテナ -->
    <div id="chartRangeFilter_dashboard_div">
        <!-- チャートのコンテナ -->
        <div id="chartRangeFilter_chart_div" style="width: 100%; height: 500px;"></div>
        <!-- フィルターコントロールのコンテナ -->
        <div id="chartRangeFilter_control_div" style="width: 100%; height: 100px;"></div>
    </div>

    <script type="text/javascript">
        // Google Chartsのライブラリをロードし、ロードが完了したらdrawChartRangeFilter関数を呼び出す
        google.charts.load('current', { packages: ['corechart', 'table', 'gauge', 'controls'] });
        google.charts.setOnLoadCallback(drawChartRangeFilter);

        // グラフを描画するための関数
        function drawChartRangeFilter() {
            // ダッシュボードを作成
            var dashboard = new google.visualization.Dashboard(
                document.getElementById('chartRangeFilter_dashboard_div'));

            // フィルターコントロールを作成
            var control = new google.visualization.ControlWrapper({
                'controlType': 'ChartRangeFilter',
                'containerId': 'chartRangeFilter_control_div',
                'options': {
                    'filterColumnIndex': 0,
                    'ui': {
                        'chartType': 'LineChart',
                        'chartOptions': {
                            'hAxis': { 'baselineColor': 'none' }
                        },
                        'chartView': {
                            'columns': [0, 4]
                        },
                        'minRangeSize': 17280000
                    }
                },
                'state': { 'range': { 'start': new Date(2020, 2, 1), 'end': new Date(2020, 3, 31) } }
            });

            // チャートを作成
            var chart = new google.visualization.ChartWrapper({
                'chartType': 'CandlestickChart',
                'containerId': 'chartRangeFilter_chart_div',
                'options': {
                    'legend': { 'position': 'none' },
                    'series': {
                        0: { 'color': 'blue', 'fallingColor': { strokeWidth: 0, fill: '#FF0000' }, 'risingColor': { strokeWidth: 0, fill: '#00FF00' } }
                    }
                },
                'view': {
                    'columns': [
                        {
                            'calc': function (dataTable, rowIndex) {
                                return dataTable.getFormattedValue(rowIndex, 0);
                            },
                            'type': 'string'
                        },
                        3, 1, 4, 2
                    ]
                }
            });

            // Google スプレッドシートからデータをクエリする
            var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1L9bG7e-9NSIZnKYcsfE2fB440JOVghWL9XuXJj6fCXc/gviz/tq?range=A8993:E');
            
            query.send(function (response) {
                if (response.isError()) {
                    console.log('Error in query: ' + response.getMessage());
                    return;
                }
                
                var data = response.getDataTable();

                // オープンとクローズを交換する
                for (var row = 0; row < data.getNumberOfRows(); row++) {
                    var open = data.getValue(row, 1);
                    var close = data.getValue(row, 4);
                    data.setValue(row, 1, close);
                    data.setValue(row, 4, open);
                }

                // ダッシュボードにコントロールとチャートをバインドして描画
                dashboard.bind(control, chart);
                dashboard.draw(data);
            });
        }
    </script>
</body>
</html>