Google Visualization APIとChart APIを組み合わせてみた

白石俊平

2008/04/02 15:30

Google Visualization APIを使って取得したデータを、Google Chart APIを使ってさくっとグラフで表示してみた。

サンプルコード解説（続き）

グラフ表示はGoogle Chart APIで！

　グラフ表示を行う部分は、URLさえ指定すれば簡単にグラフ画像を作成することのできる「Google Chart API」を使用している（例えば、「http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World」にアクセスしてみてほしい）。

　Chart APIに関する説明は、公式のドキュメントや、日本語の解説記事も多く出ているので、そちらを参照していただきたい。このサンプルでは、renderChart()メソッド内でURLを（必死に）組み立てている。サンプル内のコメントが参考になるだろう。

サンプル全文

　以下にサンプル全文を掲載する。データソースのURLさえご自分が作成したドキュメントのものに置き換えれば動作するはずなので、ぜひともお試しいただきたい。

<html>
  <head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"></meta>
  </head>
  <body>
    <!-- Google APIの読み込み -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  // Visualization APIの読み込み
  google.load("visualization", "1");
  // グラフの縦軸に表示するラベル。
  // Chart APIは現在のところ日本語表示に不備があるので、英語を使用
  var monthLabels = ["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"];

  function init() {
    // データ取得用クエリを作成して投げる
    var query = new google.visualization.Query(
      "http://spreadsheets.google.com/tq?key=pH0SDrXYNnF4enlSHpVHDSQ");
    // B列は掲載日、C列は原稿料
    query.setQuery("select B, C order by B");
    // クエリ送信。結果はhandleQueryResponse()で受け取る
    query.send(handleQueryResponse);
  }
  // body.onload時にinitを呼び出す
  google.setOnLoadCallback(init);
  // クエリの結果を処理するメソッド
  function handleQueryResponse(response) {
    // 二次元データの取得
    var table = response.getDataTable();
    // このオブジェクト内に、「月:合計金額」という形でデータを一時保存する
    var summary = {};
    for (var row = 0; row < table.getNumberOfRows(); row++) {
      var date = table.getValue(row, 0);    // 結果の1列目が日付。Date型
      var amount = table.getValue(row, 1);  // 結果の2列目が金額
      var month = date.getMonth();
      if (!summary[month]) {
    summary[month] = 0;
      }
      summary[month] += amount;
    }
    // グラフを作成
    renderChart(summary);
  }
  // グラフの表示
  function renderChart(summary) {
    // Chart APIのURL
    var chartAPIUrl = "http://chart.apis.google.com/chart";
    var amounts = []; // 1-12月の金額を格納する配列
    for (var i = 0, n = monthLabels.length; i < n; i++) {
      amounts.push(summary[i] || 0);
    }
    // Y軸のラベル
    var chartLabelParam = encodeURIComponent("0:|" + monthLabels.reverse().join("|"));
    // 表示する値
    var chartValueParam = "chd=" + encodeURIComponent("t:" + amounts.join(","));
    // グラフの値にオーバーレイする文字列（合計金額）
    var shapeMarkerParam = "";
    for (var i = 0, n = amounts.length; i < n; i++) {
      shapeMarkerParam += ("t" + amounts[i] + ",000000,0," + i + ",13");
      if (i < n - 1) shapeMarkerParam += "|";
    }
    shapeMarkerParam = "chm=" + encodeURIComponent(shapeMarkerParam);
    var chartParams =
      ["chs=300x300",
       "chbh=14",
       "cht=bhg",
       "chds=0,1000000",
       "chxt=y",
       "chxl=" +
       chartLabelParam, chartValueParam, shapeMarkerParam].join("&");
    var chartUrl = chartAPIUrl + "?" + chartParams;
    // 作成したURLをimg.srcに指定
    var chart = new Image();
    chart.src = chartUrl;
    document.body.innerHTML = ""; // 画面を一旦消去
    document.body.appendChild(chart);
  }
</script>
Loading...
  </body>
</html>