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

出来事をF列：大分類（incident1）とG列：小分類（incident2）に分けて上部チャートには小分類、下部フィルターチャートには大分類にしたかった

試したコードはこんな感じ

<!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を読み込んだ後に実行されるコード
    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:G');
      query.setQuery('SELECT A, E, F, G'); // A列、E列、F列、G列のデータを取得
      query.send(handleQueryResponse);
    }

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

      // F列とG列のアノテーションを設定
      data.setColumnProperties(2, {
        type: 'string',
        role: 'annotation'
      });
      data.setColumnProperties(3, {
        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': {
              'annotations': {
                'textStyle': {
                  'fontSize': 12,
                }
              },
              'hAxis': {'baselineColor': 'none'}
            },
            'minRangeSize': 17280000000
          },

        'view': {
          'columns': [
            {
              'calc': function(dataTable, rowIndex) {
                return dataTable.getFormattedValue(rowIndex, 0);
              },
              'type': 'string'
            }, 1] // 1はE列、2はF列（annotation）、3はG列（annotation）
        }



        },
        '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'},
          'vAxis': {
            'format': 'decimal' // Y軸の目盛りを数値として表示
          }
        },
        'view': {
          'columns': [
            {
              'calc': function(dataTable, rowIndex) {
                return dataTable.getFormattedValue(rowIndex, 0);
              },
              'type': 'string'
            }, 1, 3] // 1はE列、2はF列（annotation）、3はG列（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>

試してみると

下部フィルターチャートに出来事が被ってしまう

仕方ないので、メインチャートは出来事をF列：大分類（incident1）だけで仕上げ