WebAPIを駆使して東京電力使用状況メーターを作る！(Titanium Mobile版)

勉強も飽きてきたので、たまにはまともに動くものを書いてみました。
いろいろな言語/環境で書かれてる処理があるので参考にさせていただきました。
(というよりまるっきりまねしている箇所が多々あります)
先人の方々に感謝いたします。

参考

元ネタ

Web API
- 震災関連情報:電力使用状況API - Yahoo!デベロッパーネットワーク
- Google Chart Tools — Google Developers

Titanium Mobileの知識

Titanium Mobileでの実現方法

実装方法は2パターンあります。

WebViewを使う場合

ブラウザ表示するTitanium.UI.WebViewからはhtmlファイルを呼び出すことができます。
ここで使っているHTMLは[を] WebAPIを駆使して東京電力使用状況メーターを作る！（Perl版とJavaScript版）をそのまま使っています。

var win1 = Titanium.UI.currentWindow;

var web1 = Titanium.UI.createWebView({
    url: "static/html/stdn.html"
});

win1.add(web1);

ImageVewを使う場合

画像表示するTitanium.UI.ImageViewからURLで呼び出すことができます。
※AndroidではExceptionが出て動きません。現在調査中。

var appid = 'Your App ID';
var xhr = Titanium.Network.createHTTPClient();
xhr.open('GET', 
	 'http://setsuden.yahooapis.jp/v1/Setsuden/latestPowerUsage?output=json&appid='+appid);

xhr.onload = function(){
  // for debug
  //Titanium.API.info(this.responseText);

  var json = JSON.parse(this.responseText);

  var usage = json.ElectricPowerUsage.Usage.$;
  var capacity = json.ElectricPowerUsage.Capacity.$;
  var hour = json.ElectricPowerUsage.Hour;
  var rate = Math.ceil(usage / capacity * 100);

  var image_url = 
    'http://chart.apis.google.com/chart?chxt=x&chbh=a,4,5&chs=225x69' +
    '&cht=bhs&chco=FFCC33,FF0000&chd=t:' + rate  + '|' + (100 - rate) +
    '&chtt=東京電力使用状況' + hour + '時台&chts=676767,14.5';

  var imageView = Titanium.UI.createImageView({
    image:image_url,
    width:225,
    height:69,
    top:100
  });

  win2.add(imageView);

};