titanium/グラフを表示するのバックアップソース(No.1)

[[FrontPage]]

#contents

2011/07/31からのアクセス回数 &counter;

** Titanium mobileの弱点 [#hdb75254]
今回は、ものまねではなく、オリジナルの記事です。

Titanium mobileの弱点に
- お絵かきができない

があります。

そこで、
[[jQueryでグラフを書く>http://rd.uniba.jp/blog/2011/05/06/jqueryでグラフを書く/]]を参考に
[[flot>http://code.google.com/p/flot/]]
を使って体重をグラフに表示してみます。

*** flotのダウンロード [#z5d3e492]
[[flotのホームページ>http://code.google.com/p/flot/]]
から
[[flot-0.7.zip>http://code.google.com/p/flot/downloads/detail?name=flot-0.7.zip]]
をダウンロードします。

- jquery.flot.js
- jquery.js

をプロジェクトにコピーします。

** flotのテスト [#n383cfac]
flotのテスト用にplot_window.jsを以下のように作成します。

plot_window.js
#pre{{
var win = Ti.UI.currentWindow;

var webView = Ti.UI.createWebView({
	url: 'plot.html'
}
);
win.add(webView);
}}

また、WebViewから表示するplot.htmlを以下のように作成します。

plot.html
#pre{{
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Flot Examples</title>
    <link href="layout.css" rel="stylesheet" type="text/css">
    <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
    <script language="javascript" type="text/javascript" src="jquery.js"></script>
    <script language="javascript" type="text/javascript" src="jquery.flot.js"></script>
 </head>
    <body>
    <h1>Data Graph</h1>

    <div id="graph" style="width:310px;height:240px;"></div>

	<script type="text/javascript">
	var weights = [[1301270400000,0],[1301875200000,8.25],[1302480000000,22],[1303084800000,29],[1303689600000,36.5]];
	var ticks = [1301270400000,1301875200000,1302480000000,1303084800000,1303689600000];
	var setting = {
	        series: {
	            lines: { show:true},
	            points: { show:true}
	        },
	        xaxis: {
	            mode:"time",
	            timeformat:"%m/%d",
	            tickSize: [7,"day"],
	            ticks: ticks
	        },
	        yaxis: {
	            ticks: 10,
	            min: 0,
	        },
	        grid: {
	            backgroundColor: { colors: ["#fff","#eee"] },
	        }
	   };
	$.plot($("#graph"),[{data: weights, color: 2}], setting);
	</script>

 </body>
</html>
}}

win2のurlをplot_window.jsに変えて、動かしてみます。

** コメント [#bd394c0d]
#vote(おもしろかった,そうでもない,わかりずらい)

皆様のご意見、ご希望をお待ちしております。
#comment_kcaptcha
titanium/グラフを表示する のバックアップソース(No.1)

titanium/グラフを表示するのバックアップソース(No.1)
