GoogleChartsのTimelinesの表示範囲を動的に指定する

GoogleChartsのTimelinesでタイムラインチャートを作成した際に
横軸が長くなりすぎて見難かったので、動的に表示範囲を変える方法を探したのですが、
ピンポイントでちょうどいいサンプルが見つからなかったので、お試しで作成したものをまとめました。

[GoogleCharts公式](https://developers.google.com/chart) の [Controls and Dashboards](https://developers.google.com/chart/interactive/docs/gallery/controls)ページを参考にしながら作成してみました。

## 出力イメージ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538393/b9c5ba74-c1d8-0ad9-fc50-1d6cb0f1ce74.png)

* タイムラインチャートの上に配置されているDateRangeFilter で表示するデータのを絞り込めます。
* 今回の例では、開始日時が指定した期間範囲のもののみ表示となります。

## 該当コード

```HTML
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['controls', 'timeline']});
google.charts.setOnLoadCallback(onDraw);

function onDraw() {
	// タイムラインチャートで表示するデータ作成
	var dataTable = new google.visualization.DataTable();
	dataTable.addColumn({ type: 'string', id: 'ProjectName' });
	dataTable.addColumn({ type: 'string', id: 'Phase' });
	dataTable.addColumn({ type: 'date', id: 'Start' });
	dataTable.addColumn({ type: 'date', id: 'End' });
	dataTable.addRows([
		["ProjectA",  "要求定義"  , new Date(2020, 4, 1), new Date(2020, 5, 1)],
		["ProjectA",  "基本設計"  , new Date(2020, 5, 1), new Date(2020, 6, 1)],
		["ProjectA",  "詳細設計"  , new Date(2020, 6, 1), new Date(2020, 7,15)],
		["ProjectA",  "実装"      , new Date(2020, 7,15), new Date(2020, 9, 1)],
		["ProjectA",  "単体試験"  , new Date(2020, 9, 1), new Date(2020,10, 1)],
		["ProjectA",  "結合試験"  , new Date(2020,10, 1), new Date(2020,11, 1)],
		["ProjectA",  "総合試験"  , new Date(2020,11, 1), new Date(2021, 2, 1)],
		["ProjectA",  "製造"      , new Date(2021, 3, 1), new Date(2021, 4, 2)],
		["ProjectA",  "αリリース", new Date(2020,12, 1), new Date(2020,12, 1)],
		["ProjectA",  "βリリース", new Date(2021, 1, 1), new Date(2021, 1, 1)],
		["ProjectA",  "検証完了"  , new Date(2021, 2, 1), new Date(2021, 2, 1)],
		["ProjectA",  "出荷"      , new Date(2021, 4, 1), new Date(2021, 4, 1)],
		["ProjectB",  "要求定義"  , new Date(2020, 7,15), new Date(2020, 8,15)],
		["ProjectB",  "基本設計"  , new Date(2020, 8,15), new Date(2020, 9,15)],
		["ProjectB",  "詳細設計"  , new Date(2020, 9,15), new Date(2020,10,15)],
		["ProjectB",  "実装"      , new Date(2020,10,15), new Date(2020,11,15)],
		["ProjectB",  "単体試験"  , new Date(2020,11,15), new Date(2020,12,15)],
		["ProjectB",  "結合試験"  , new Date(2020,12,15), new Date(2021, 1,15)],
		["ProjectB",  "総合試験"  , new Date(2021, 1,15), new Date(2021, 3,15)],
		["ProjectB",  "製造"      , new Date(2021, 4,15), new Date(2021, 5,15)],
		["ProjectB",  "αリリース", new Date(2021, 2, 1), new Date(2021, 2, 1)],
		["ProjectB",  "βリリース", new Date(2021, 3, 1), new Date(2021, 3, 1)],
		["ProjectB",  "検証完了"  , new Date(2021, 3,15), new Date(2021, 3,15)],
		["ProjectB",  "出荷"      , new Date(2021, 5,14), new Date(2021, 5,14)],
	]);

	// 表示フィルタ条件を決めるコントロール作成
	var projectRange = new google.visualization.ControlWrapper({
		controlType: 'DateRangeFilter',
		containerId: 'project_range',
	    options: {
			filterColumnIndex: 3,				// 3列目の要素'Start'でフィルタ
			ui: {
				showRangeValues: true,			// 選択範囲のラベル表示
				format: { pattern: "YYYY/MM" }	// 表示フォーマット
			}
		}
	});
	
	// タイムラインチャート作成
	var projectTimechart = new google.visualization.ChartWrapper({
		'chartType': 'Timeline',
		'containerId': 'project_timechart',
	});

	// ダッシュボード作成
	var dashboard = new google.visualization.Dashboard(document.getElementById('project_dashboard'));
	dashboard.bind(projectRange, projectTimechart);	// ダッシュボードにコントロールとチャートを登録
	dashboard.draw(dataTable);  	// ダッシュボードにデータを入れて描画
}

</script>
<div id="project_dashboard">
	<div id="project_range"></div>
	<div id="project_timechart"></div>
</div>
```

## 参考元

* Charts | Google Developers の [Controls and Dashboards]
    * https://developers.google.com/chart/interactive/docs/gallery/controls