ローソク足と表示範囲フィルターの組み合わせ - 相場史データベース〜歴史は繰り返さないが韻を踏む〜

とりあえず、出来事表示は諦めてローソク足と表示範囲フィルターの組み合わせを考えます

以下コードです

<!DOCTYPE html>
<html>
<head>
    <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.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]
                        },
          // 範囲の最小 : 10 日 = 10 * 24 * 60 * 60 * 1000 = 17,280,000 (msec.)
                        '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' }
                },
                'view': {
                    'columns': [
                        {
                            'calc': function (dataTable, rowIndex) {
                                return dataTable.getFormattedValue(rowIndex, 0);
                            },
                            'type': 'string'
                        },
                        3, 1, 4, 2
                    ]
                }
            });

            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();
                dashboard.bind(control, chart);
                dashboard.draw(data);
            });
        }
    </script>
</body>
</html>