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

トップページのメインチャートは以下の形

コードは

<!DOCTYPE html>
<html>
  <head>
    <!-- Google Charts用のスクリプトを読み込む -->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      // Google Chartsのライブラリをロードし、ロードが完了したらdrawFilteringChart関数を呼び出す
      google.charts.load('current', {'packages':['controls']});
      google.charts.setOnLoadCallback(drawFilteringChart);

      // グラフを描画するための関数
      function drawFilteringChart() {
        // Google スプレッドシートからデータをクエリする
        var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1L9bG7e-9NSIZnKYcsfE2fB440JOVghWL9XuXJj6fCXc/gviz/tq?range=A2:F');
        query.setQuery('SELECT A, E, F'); // クエリを設定
        query.send(handleQueryResponse); // クエリを送信し、結果を処理する関数を指定
      }

      // クエリの応答を処理する関数
      function handleQueryResponse(response) {
        var data = response.getDataTable(); // 応答からデータテーブルを取得

        // F列のデータ型をテキストに設定
        data.setColumnLabel(2, 'F'); // 列のラベルを設定
        data.setColumnProperties(2, {
          type: 'string',
          role: 'annotation'
        });

        // ダッシュボードを作成
        var dashboard = new google.visualization.Dashboard(
          document.getElementById('chart_range_filter_dashboard_div')
        );

        // レンジフィルターを作成
        var control = new google.visualization.ControlWrapper({
          'controlType': 'ChartRangeFilter',
          'containerId': 'chart_range_filter_control_div',
          'options': {
            'filterColumnIndex': 0,
            'ui': {
              'chartType': 'LineChart',
              'chartOptions': {
'backgroundColor': 'transparent',
                'annotations': {
                  'textStyle': {
                    'fontSize': 12,
                  }
                },
                'hAxis': {'baselineColor': 'none'}
              },
              'minRangeSize': 17280000000
            },
          },
          'state': {'range': {'start': new Date(2020, 1, 4), 'end': new Date()}}
        });

        // チャートを作成
        var chart = new google.visualization.ChartWrapper({
          'chartType': 'LineChart',
          'containerId': 'chart_range_filter_chart_div',
          'options': {
            'legend': {'position': 'none'},
'backgroundColor': 'transparent',
                'annotations': {
                  'textStyle': {
                    'fontSize': 12,
                    'color': "red",
                  }
},
            'vAxis': {
              'format': 'decimal' // Y軸の目盛りを数値として表示
            }
          },
          'view': {
            'columns': [
              {
                'calc': function(dataTable, rowIndex) {
                  return dataTable.getFormattedValue(rowIndex, 0);
                },
                'type': 'string'
              }, 1, 2] // 1はE列、2はF列（annotation）
          }
        });

        // ダッシュボードにコントロールとチャートをバインドして描画
        dashboard.bind(control, chart);
        dashboard.draw(data);
      }
    </script>
  </head>
  <body>
    <div id="chart_range_filter_dashboard_div">
      <div id="chart_range_filter_chart_div" style="width:100%; height: 500px;"></div>
      <div id="chart_range_filter_control_div" style="width:100%; height: 300px;"></div>
    </div>
  </body>
</html>