【JS】 Google Charts [4] ～ タイムライン編 ～

Webグラフ / 地図作成ツール

■ はじめに

https://blogs.yahoo.co.jp/dk521123/37572608.html
https://blogs.yahoo.co.jp/dk521123/37572794.html
https://blogs.yahoo.co.jp/dk521123/37572930.html
の続き。
今度は、タイムラインを作成する

公式サイトのサンプルを活用しながらやるといいかも
https://developers.google.com/chart/interactive/docs/gallery/timeline#a-simple-example
 また、以下の関連記事が長くなったので、Google Chartsについては、分割して書く。
https://blogs.yahoo.co.jp/dk521123/37562002.html

■ サンプル

<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="utf-8">
<title>Demo for Google Charts</title>
</head>
<body>
<div id="targetChart">

</div>
<!--Load the AJAX API-->
<script type="text/javascript" src="">https://www.gstatic.com/charts/loader.js">
<script type="text/javascript">
(function() {
  'use strict';
  
  // Load the Visualization API and the corechart package.
  google.charts.load('current', {'packages':['timeline']});
  // Set a callback to run when the Google Visualization API is loaded.
  google.charts.setOnLoadCallback(drawChart);
  
  // Callback that creates and populates a data table,
  // instantiates the pie chart, passes in the data and draws it.
  function drawChart() {
    // Set chart options
    var options = {
      'title': 'Demo for Pie Chart',
      'width': 400,
      'height':300,
      timeline: { colorByRowLabel: true }
    };
    
    // Create the data table.
    var data = new google.visualization.DataTable();
    data.addColumn({ type: 'string', id: 'Term' });
    data.addColumn({ type: 'string', id: 'Name' });
    data.addColumn({ type: 'date', id: 'Start' });
    data.addColumn({ type: 'date', id: 'End' });
    data.addRows([
      [ '1', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ '2', 'John Adams',        new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
      [ '3', 'Thomas Jefferson',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]]);
    
    // Instantiate and draw our chart, passing in some options.
    var target = document.getElementById('targetChart');
    var chart = new google.visualization.Timeline(target);
    chart.draw(data, options);
  }
})();
</script>
</body>
</html>

関連記事

【JS】 Google Charts [1] ～ 円グラフ編 ～

https://blogs.yahoo.co.jp/dk521123/37572608.html

【JS】 Google Charts [2] ～ 棒グラフ編 ～

https://blogs.yahoo.co.jp/dk521123/37572794.html

【JS】 Google Charts [3] ～ 折れ線グラフ編 ～

https://blogs.yahoo.co.jp/dk521123/37572930.html

【HTML】タイムライン を表示するには...

https://blogs.yahoo.co.jp/dk521123/37562002.html