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

サンプルコードの解説

　今回のサンプルは、細かいエラー処理などを省略しているにもかかわらず、そこそこ分量がある。そのため今回は、ポイントをしぼって説明した後に、最後にサンプル全文を掲載するという形を取る。

　サンプルを動作させるには、データソースとなるドキュメントに対するアクセス権が必要となるため、単純に今回のソースをコピペして保存しても、皆さんの環境では思うように動作しないはずだ。サンプルドキュメントと同じような形のドキュメントをご自分で作っていただき、Googleアカウントにログインした状態のブラウザで、動作を確認してみてほしい。

データの取得

　スプレッドシートからデータを取得する部分は以下の通りだ。前回と違うのは、Queryコンストラクタの引数に与えるURLだけだ。

　前回もお伝えした通り、データソースとしてスプレッドシートを使用する場合、そのURLは「http://spreadsheets.google.com/tq?key=ドキュメントのキー」となる。皆さんがローカルで動かす際には、ご自分で作ったドキュメントのキーで置き換えていただきたい。

  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);
  }

　月ごとの合計金額をsummary変数に格納した後、renderChart()というメソッドを呼び出してグラフを作成することにした。

　前回説明していないポイントは、ドキュメント上で「日付」や「数値」として取り扱っているデータは、getData()メソッドの戻り値もDate型やNumber型になるということ。型変換を自分で行う必要がないので、非常に扱いやすい。