ホーム > カテゴリ > HTML5・JavaScript >

[Google Charts]タイムラインを作成する

Google Chartsでタイムラインを作成するサンプルです。タイムラインは各項目を時系列で表示したグラフです。主にスケジュール管理などに使用されます。

サンプル

タイムラインのサンプルです。

サンプルコード

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

  // ライブラリのロード
  // name:visualization(可視化),version:バージョン(1),packages:パッケージ(timeline)
  google.load('visualization', '1', {'packages':['timeline']});     
         
  // グラフを描画する為のコールバック関数を指定
  google.setOnLoadCallback(drawChart);

  // グラフの描画   
  function drawChart() {         

    // メソッドからデータの生成
    var data = new google.visualization.DataTable();
    data.addColumn({ type: 'string', id: 'Position' });
    data.addColumn({ type: 'string', id: 'Name' });
    data.addColumn({ type: 'date', id: 'Start' });
    data.addColumn({ type: 'date', id: 'End' });
    data.addRows([
      [ '正社員',   '管理業務 兼 別案件作業',    new Date('2000/1/1'),   new Date('2000/3/31')],
      [ '契約社員', '要件定義',       new Date('2000/1/1'),   new Date('2000/1/20')],
      [ '契約社員', '基本設計',       new Date('2000/1/21'),  new Date('2000/2/4')],      
      [ '契約社員', '詳細設計',       new Date('2000/2/5'),   new Date('2000/2/15')],
      [ '契約社員', 'PG設計',         new Date('2000/2/16'),  new Date('2000/2/29')],
      [ '契約社員', 'テスト',         new Date('2000/3/23'),  new Date('2000/3/31')],      
      [ '派遣社員', 'プログラミング', new Date('2000/3/1'),   new Date('2000/3/22')],
      [ '派遣社員', 'テスト',         new Date('2000/3/23'),  new Date('2000/3/31')]
    ]);
                
    // 指定されたIDの要素にタイムラインを作成
    var chart = new google.visualization.Timeline(document.getElementById('chart_div'));    
          
    // グラフの描画
    chart.draw(data, null);
  }
  
</script>
</head>
<body>
  
  <!--  グラフの描画エリア -->
  <div id="chart_div" style="width: 100%; height: 350px"></div>
  
</body>
</html>

サンプルの解説(Javascript)

1. google.load()でライブラリをロードします。
2. google.setOnLoadCallback(drawChart)でコールバックを設定します。
3. コールバック先のdrawChart()でグラフを描画します。

<データの生成>
サンプルの書式を参考に改変すれば、データを増減できます。データを生成する方法はarrayToDataTable()とDataTable()の2種類あります。共に見出し部分は「'(シングルクォーテーション)」または「"(ダブルクォーテーション)」で括る必要があります。

サンプルの解説(HTML)

Javascript側で指定した「id=chart_div」の要素を使用して

<div id="chart_div" style="width: 100%; height: 350px"></div>

でグラフの描画エリアを指定します。widthやheightなどは自由に変更できます。

グラフ関連記事の目次

Google Chartsの使い方とまとめ

出典

ここで公開されているサンプルはGoogle Charts(英語)で公開されているコードにコメントなどを付加してます。





関連記事


前の記事：[Google Charts]ローソク足チャートを作成する
次の記事：[Google Charts]グラフのサイズを動的に変更する

公開日：2015年04月01日
記事NO：00624