Google Visualization APIでGoogleスプレッドシートをガジェットにしてみた

動作確認

　以上で修正は完了だ。このソースコードをインターネットで公開したら、次の手順でスプレッドシートに表示することができる。

　まず、「編集」ツールバー内にある「挿入→ガジェット」をクリックして、以下のようなダイアログが表示されたら、「カスタム」メニューをクリックする。そこで表示されるテキストフィールドに、ガジェットのURLを入力する。

カスタムガジェットをスプレッドシート内に追加

　そうして追加されたガジェットをiGoogleに追加したり、広く公開することも可能だ。それには、カスタムガジェットの右上をクリックしてメニューを表示する。

サンプルコード全文

　では最後に、今回のサンプルを試してみたい方のために、以下にサンプル全文を掲載する。

<?xml version="1.0" encoding="UTF-8"?>
<Module>
  <ModulePrefs title="サンプルVisualizationガジェット" scrolling="true">
<Require feature="idi"/>
<Require feature="locked-domain"/>
  </ModulePrefs>
  <UserPref name="_table_query_url" display_name="データソースURL" required="true"/>
  <UserPref name="_table_query_refresh_interval" display_name="更新間隔(分)" default_value="0" datatype="enum" required="false">
<EnumValue value="0" display_value="なし"/>
<EnumValue value="60" display_value="1"/>
<EnumValue value="3000" display_value="5"/>
<EnumValue value="1800" display_value="30"/>
  </UserPref>
  <Content type="html">
  <![CDATA[
<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 prefs = new _IG_Prefs();
    gadgetHelper = new google.visualization.GadgetHelper();
    var query = gadgetHelper.createQueryFromPrefs(prefs);
    // クエリ送信。結果は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...
  ]]>
  </Content>
</Module>