Google Visualization APIを早速使ってみた

白石俊平(あゆた)
2008-03-21 23:00:00
  • このエントリーをはてなブックマークに追加

Visualization APIを用いたプログラミング

 では、Visualization APIを用いてプログラミングを行ってみよう。次のサンプルは、前ページで使った二番目のサンプル(香川県の郵便番号・住所一覧)からデータを取得し、リスト表示するものだ。

サンプル

 ソースコードは以下のようになる。このコードは、コピー&ペーストして保存し、Webブラウザで見ていただければ、読者諸兄の環境でも簡単に動かせるはずだ。

<html>
  <body>
<!-- (1) Google APIの読み込み -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  // (2) Visualization APIの読み込み
  google.load("visualization", "1");

  function init() {
    // (3) データ取得用クエリを作成して送信
    var query = new google.visualization.Query(
      "http://spreadsheets.google.com/tq?key=pH0SDrXYNnF7WaedZSIMtbQ");
    // (4) シート1から郵便番号と住所を取得し、郵便番号の照準で並び替え
    query.setQuery("select C, J from `Sheet 1` order by C");
    // (5) クエリ送信
    query.send(handleQueryResponse);
  }
  // (6) body.onload時にinitを呼び出す
  google.setOnLoadCallback(init);

  function handleQueryResponse(response) {
    // (7) 取得したデータをリスト表示
    var data = response.getDataTable();
    var list = document.getElementById("list");
    list.options.length = 0;
    // 一行ずつループ処理
    for (var row = 0; row < data.getNumberOfRows(); row++) {
      var option = new Option("", "");
      list.options[list.options.length] = option;
      // 列をループし、表示する文字列の作成
      for (var col = 0, n = data.getNumberOfColumns(); col < n; col++) {
    option.text += data.getFormattedValue(row, col);
    if (col < n - 1) option.text += "|";
      }
    }
  }
</script>
<select size="10" id="list"></select>
  </body>
</html>

次ページでポイントを説明する。

  • コメント(1件)
#1 kouki   2011-12-29 12:07:55
はじめまして。
API関連で、こちらのサイトをよく参考にさせて頂いております。
このページに記載されたソースですが、
現在ローカルにコピーした場合ブラウザで表示できません。

原因などおわかりでしたら、ご教示頂ければと思います。

宜しくお願い致します。
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]