Google Chartsでタイムラインチャートを使ってみる

くまごろうです。

最近、Google Chartsにハマっています。

ちょっと前までd3.jsでガリガリとプログラムする必要あったことが、
ほぼノープログラミングでできます。

このうえなく、便利です。

さて、一般的なグラフはさておいて、今回はタイムラインチャートをとりあげます。

説明よりも見たほうが早いので、早速サンプルです。

2000年以降の総理大臣でタイムラインチャート

こうしてみてみると、小泉さん、長かったんだなあと感じますね。
そして、多くのかたが、きれいに1年ほどで終わってますねぇ。
いっそのこと、首相の任期を1年にしたほうがいいじゃないかしら、と思ってしまうくらいに。

そんなことはさておき、今回もプログラムの中身をご紹介します。

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['timeline']}]}"></script>
<script type="text/javascript">

google.setOnLoadCallback(drawChart);
function drawChart() {
  var container = document.getElementById('primiministars');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();

  dataTable.addColumn({ type: 'string', id: '代' });
  dataTable.addColumn({ type: 'string', id: '名前' });
  dataTable.addColumn({ type: 'date', id: '任期開始' });
  dataTable.addColumn({ type: 'date', id: '任期終了' });
  dataTable.addRows([
['第84代','小渕恵三',new Date(1998,07,30),new Date(2000,04,05)],
['第85代','森喜朗',new Date(2000,04,05),new Date(2000,07,04)],
['第86代','森喜朗',new Date(2000,07,04),new Date(2001,04,26)],
['第87代','小泉純一郎',new Date(2001,04,26),new Date(2003,11,19)],
['第88代','小泉純一郎',new Date(2003,11,19),new Date(2005,09,21)],
['第89代','小泉純一郎',new Date(2005,09,21),new Date(2006,09,26)],
['第90代','安倍晋三',new Date(2006,09,26),new Date(2007,09,26)],
['第91代','福田康夫',new Date(2007,09,26),new Date(2008,09,24)],
['第92代','麻生太郎',new Date(2008,09,24),new Date(2009,09,16)],
['第93代','鳩山由紀夫',new Date(2009,09,16),new Date(2010,06,08)],
['第94代','菅直人',new Date(2010,06,08),new Date(2011,09,02)],
['第95代','野田佳彦',new Date(2011,09,02),new Date(2012,12,26)],
['第96代','安倍晋三',new Date(2012,12,26),new Date(2014,3,31)]]);

var options = {
    timeline: { groupByRowLabel: false }
  };

  chart.draw(dataTable, options);
}
</script>
<div id="primiministars" style="height: 600px;"></div>

以前にご紹介した地図と同様に、宣言をして、そして表示するデータを作っていく、という流れは同じです。

GoogleChartsのいいところは、１つ使い方を覚えたら、
あとはその応用でいろんなグラフが書けるところですね。

今回の例ではここが宣言しているところです。

  var container = document.getElementById('primiministars');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();

  dataTable.addColumn({ type: 'string', id: '代' });
  dataTable.addColumn({ type: 'string', id: '名前' });
  dataTable.addColumn({ type: 'date', id: '任期開始' });
  dataTable.addColumn({ type: 'date', id: '任期終了' });

2行目の".Timeline"で1行目の場所にタイムラインチャートを書くよー、と。
3行目でデータを乗せる箱を作ってます。

そして".addColumn"はExcelっぽくいえば、列の名前とデータの型を宣言です。

そしてデータはここです。

['第84代','小渕恵三',new Date(1998,07,30),new Date(2000,04,05)],

データ型の宣言に沿って、ひたすら書いていきます。

宣言とデータを書き換えれば、時間軸でいろんな表現ができます。

たとえば時間軸で並べて情報を比較してみます。

主要国首脳の任期をタイムラインチャート

小泉さんの任期、長いなあと感じましたが、
諸外国首脳の任期と比較すると普通なんですよね。

こうみると、いかに日本の首脳の任期が短いことか。。。

ドイツのメルケルさんが首相になってから、日本は8回も首相がかわっています。

自分の在任期間中に取引先の社長が8回も交代されたら、
「この会社、大丈夫？」って思われますよね。

きっと日本の政治はそう思われているのかもしれない。

なんてことにタイムラインチャートを見ると気づけたりします。

他にも期間の比較や、移り変わりの比較を観るときに、
タイムラインチャートは便利です。

dataTableのところさえ書き換えれば、いろいろと応用が効くし、
簡単に使えますので、ぜひ一度お試しを。

では！