GoogleChartsのTimelinesでタイムラインチャートを作成した際に
横軸が長くなりすぎて見難かったので、動的に表示範囲を変える方法を探したのですが、
ピンポイントでちょうどいいサンプルが見つからなかったので、お試しで作成したものをまとめました。
GoogleCharts公式 の Controls and Dashboardsページを参考にしながら作成してみました。
出力イメージ
- タイムラインチャートの上に配置されているDateRangeFilter で表示するデータのを絞り込めます。
- 今回の例では、開始日時が指定した期間範囲のもののみ表示となります。
該当コード
<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]