Google visualization APIを使ってみる

 in Google / visualization API by

Google visualization API使うと何ができるのか

データの視覚化が非常に簡単にできます
データさえ用意できれば テーブル表示したり グラフ表示したり
なんかいろいろできちゃうみたいです

Google viaualization APIを使った簡単なサンプル

サンプルコード
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Google Visualization API サンプル01</title>
<script src="http://www.google.com/jsapi/"></script>
<script>
google.load('visualization','1',{'packages':['table']});
google.setOnLoadCallback(drawChart);

function drawChart(){
  var data = new google.visualization.DataTable();
  data.addColumn('string', '都道府県');
  data.addColumn('string', '首都');
  data.addColumn('number', '人口(2010年)');
  data.addRows([
	['東京都', '東京', 13161751],
	['大阪府', '大阪', 8862896],
	['愛知県', '名古屋', 7408499],
	['北海道', '札幌', 5507456],
	['福岡県', '福岡', 5072804]
  ]);
  data.addRow(['神奈川県','横浜', 9049500]);

  var formatter = new google.visualization.TableNumberFormat({
	suffix: '人',
	fractionDigits: '0'
  });
  formatter.format(data,2);

  var options = {
    width: 260
  };
  var panel = document.getElementById('table_panel');
  var chart = new google.visualization.Table(panel);
  chart.draw(data, options);
}
</script>
</head>

<body>
<h1 id="head">Google Visualization API サンプル01</h1>
<div id="table_panel"></div>
</body>
</html>
サンプルコード出力結果

※表の見出し(一番上の行)をクリックすると 並び替えをしてくれます

サンプルコードの解説

Google visualization APIを使う準備


<script src="http://www.google.com/jsapi/"></script>

Google Ajax APIを使うには まず「http://www.google.com/jsapi/」を読み込みます


google.load('visualization','1',{'packages':['table']});

「google.load」でライブラリを読み込みます
「visualization」ライブラリには 複数のパッケージがあるので
表を使うときは「{‘packages’:[‘table’]}」で「table」を指定します


  data.addColumn('string', '都道府県');
  data.addColumn('string', '首都');
  data.addColumn('number', '人口(2010年)');

表の見出しを指定します


  data.addRows([
	['東京都', '東京', 13161751],
	['大阪府', '大阪', 8862896],
	['愛知県', '名古屋', 7408499],
	['北海道', '札幌', 5507456],
	['福岡県', '福岡', 5072804]
  ]);

各項目のデータを配列で追加していきます


  data.addRow(['神奈川県','横浜', 9049500]);

「data.addRow([]);」で 後から1行ずつ追加することもできます


  var formatter = new google.visualization.TableNumberFormat({
	suffix: '人',
	fractionDigits: '0'
  });
  formatter.format(data,2);

値に 単位を付けたりといったことが 簡単に指定できます
詳細情報→Google Visualization API Reference formmater


  var options = {
    width: 260
  };

オプション設定で 表のサイズを指定できたりします


  var panel = document.getElementById('table_panel');
  var chart = new google.visualization.Table(panel);
  chart.draw(data, options);

表を出力する指定です

Google visualization APIを利用したサンプル紹介

Google Analytics APIとの連携

Analytics Data Export API Script(グーグルアナリティクス API)
Analytics Data Export API Script(グーグルアナリティクス API)その2
※円グラフや折れ線グラフも表示する

参考ページ

Google Chart Tools