東北電力使用状況のグラフ表示とガジェットにおけるタブ UI

まず、 mixi アプリとしても提供を始めました。 OpenSocial なので全く同じコードを使うことが出来るので、 Google にホストしている XML を参照しているだけなんですけどね。
朮は mixi のアカウント持っていないので、類聚揮洒の副管理人である casm 氏に代行してもらっています。

で、実物を見てもらったほうが早いですが、グラフを表示するようにして、ついでにタブで切り替えられるようにしました。タブ周りのドキュメントが解りにくいのでちょっくらメモ。

<Module>
  <ModulePrefs title="ガジェット名">
    <Require feature="tabs"/>
    <Require feature="setprefs"/>
  </ModulePrefs>
  <UserPref name="selectedTab" datatype="hidden"/>
<Content type="html"><![CDATA[
  略
<script type="text/javascript">
var tabs = new gadgets.TabSet(__MODULE_ID__);
gadgets.util.registerOnLoadHandler(function(){
  tabs.addTab("現在値", {contentContainer: document.getElementById("tab_main")});
  tabs.addTab("グラフ", {contentContainer: document.getElementById("tab_graph")});
});
</script>
<div id="tab_main" stle="display:none">
  <!-- 「現在値」タブ内のコンテンツ -->
</div>
<div id="tab_graph" stle="display:none">
  <!-- 「グラフ」タブ内のコンテンツ -->
</div>
]]></Content>
</Module> 

ドキュメントに言うところのテクニック 2を使っています。
まず ModulePrefs 内で tabs を読み込むように。また、ユーザーが現在のタブを記憶できるように、 setprefs の読み込みと selectedTab の UserPref も用意します（これだけで自動的にタブを記憶するみたいです）。
gadgets.TabSet を初期化。ただし、具体的なタブへの要素の追加はロード後(gadgets.util.registerOnLoadHandler( handler ); の handler 内) に行います。
tabs.addTab() は、第１引数にタブ名、第２引数はタブの内容に関するパラメーターを渡すんですが、内容になる Element だけで良いみたいです。

あとグラフの描画には HTML5.jp さんの 折れ線グラフライブラリを使わせていただきました。
なるべく１ファイルで済ませたかったので、埋め込める程度の大きさのグラフライブラリということで。ちなみに JavaScript の圧縮ツールも試してみたんですけど、何故か動作しなくなるので諦めました。
大きなライブラリも Google Libraries API を使えば自前でホストせずに使えるので良いかなと思ったんですが、 API key を取るのが面倒な気がしたのでパス。