• Google visualization APIを使ってみる

    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

Comments are closed.