takaiwa.net

Android、Java、Web系、Linux、マラソン等の備忘録

2011/12/29

jQueryのプラグインjqPlotでタスクマネージャのような動的なグラフを作ってみ る

0 件のコメント

前回jqPlotでとりあえずグラフを表示させてみたので、今回は動くグラフを作成してみたいと思います。WS000334 作成するイメージは右図のような感じですが、そこまで細かく表示させるのは割愛します。

あと、実際にCPU使用率を取得したり等のデータは、jQuery外の話になるので擬似的に表示を行うために、タイマーと値を上下させる乱数で実装してみます。

 

サンプルソース

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jqPlottest</title>
<meta name="author" content="prog" />
<!-- Date: 2011-12-26 -->
<link rel="stylesheet" type="text/css" href="./css/jquery.jqplot.css">
<script type="text/javascript" src="./lib/jquery.min.js"></script>
<script type="text/javascript" src="./lib/jquery.jqplot.min.js"></script>
</head>
<script type="text/javascript">
var widthSize=50; // 50刻みで表示
var gbls1 = new Array(); // グラフの値を格納
var gbleCnt = 0;
// 初期化処理
$(document).ready(function() {
// グラフデータを格納する配列を初期化
for(idx=0;idx<widthSize-1;idx++) {
gbls1.push(null);
}
// タスクマネージャのCPU使用率ように0スタートのため最後に0を格納
gbls1.push(0);
setTimeout("display()",1000);
});

function display() {
// 0~99までのランダムな数字を取得
var randnum = Math.floor( Math.random() * 100 );
gbls1.push(randnum);

if( gbls1.length > widthSize) {
// 古いデータを削除
gbls1.shift();
}

// グラフを描画
$.jqplot('graf', [ gbls1 ],{
title:'Random value',
seriesDefaults: {
color: '#22de41', // グラフの色
lineWidth: 1.5, // グラフの線の太さ
showMarker:false  // 値の点を非表示
},
axes: {
yaxis:{ // Y軸の設定
min:0,
max:100
},
xaxis:{ // X軸の設定
min:1,
max:widthSize,
showTicks:false // X軸の値を非表示
}
},
grid: {
gridLineColor: '#149262', // 格子の色
background: '#000000', // 背景の色
borderColor: '#149262' // 枠の色
}
}).replot();
gbleCnt++;
setTimeout("display()",1000);
}

</script>
<body>
<div id="graf" style="width:600px;height:300px"></div>
</body>
</html>


だいたい、ソース内のコメントにある通りですが、display()を繰り返し実行することで、乱数を生成しその値でグラフを描画し直しています。繰り返しの処理は1000msのタイマーで呼んでいます。



Demo Page




気になった所だけ以下に。



初期化処理



前回のソースにあるように、配列に値を入れるだけのグラフのためfor文で配列を初期化しています。分解すると、



gbls1 = [null, null, null, ・・・・(中略)・・・null, 0]



という初期化をしています。タスクマネージャのように、右からグラフが流れてくるのを演出するためです。あとはsetTimeoutでdisplay()メソッドを1000msで呼んでいます。



 



displayメソッド



大きくわけると、




  1. 乱数を生成し配列へ格納


  2. グラフを再描画


  3. 1秒後にdisplayメソッドを呼ぶタイマーをセット


といった所ですかね。1番目は乱数を生成して配列gbls1に追加しています。表示領域以上のデータ数だと古いデータを削除します。



グラフの描画は、replot()している所がアニメーションのポイントです。これをしないと重ねて表示されます。また、グラフ描画でやってることは、ほとんどが背景色やグラフの色などの設定です。なので、これを何度も何度もreplot()させるのは無駄な処理をさせているような気もします。が、ソースをシンプルにするために敢えてこうしました。



詳しい設定等は、ドキュメントや公式サンプルで。


・jqPlot Usage

http://www.jqplot.com/docs/files/usage-txt.html


・Examples | jqPlot

http://www.jqplot.com/tests/



websocketなどで連携させると面白いかもしれませんね。

jQueryのプラグインjqPlotでグラフを描画してみる

0 件のコメント

環境を作る

WS000333グラフ描画に特化したjqPlotというjQueryプラグインで遊んでみたいと思います。まずは、環境作りから。プラグインは以下から入手できます。

・cleonello / jqplot / downloads — Bitbucket
https://bitbucket.org/cleonello/jqplot/downloads/

現時点で最新版と思しき、

  • jquery.jqplot.1.0.0b2_r1012.zip

をダウンロードして解凍します。

WS000332

distディレクトリ内にたくさんファイルが入ってますが、この中で今回使うのは以下のファイルです。

  • jquery.jqplot.min.css
  • excanvas.min.js
  • jquery.jqplot.min.js
  • jquery.min.js
  • pluginsディレクトリ

 

簡単なグラフを表示させてみる

適当にHTMLファイルを作成して、先ほどのファイルから必要なスタイルシートとJavaScriptを読み込ませます。以下の3ファイルです。

<link rel="stylesheet" type="text/css" href="./css/jquery.jqplot.css">
<script type="text/javascript" src="./lib/jquery.min.js"></script>
<script type="text/javascript" src="./lib/jquery.jqplot.min.js"></script>


次に<body>タグ内にグラフを表示させるスペースを<div>タグで設置してやります。



<div id="graf" style="width:600px;height:300px"></div>


JavaScriptの配列を使ってグラフを描画します。



$(document).ready(function() {
var s1 = [ 5, 7, 6, 8, 7 ];
var s2 = [ 7, 5, 7, 6, 9 ];
$.jqplot('graf', [ s1, s2 ]);
});


すごくシンプル。。



上記のようなJavaScriptの場合、配列に格納されてる値はy値で、格納した順番とx値が対応しています。



 



Demo page



 



サンプルブログラム



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>hellojqPlot</title>
<meta name="author" content="takaiwa.net" />
<link rel="stylesheet" type="text/css" href="./css/jquery.jqplot.css">
<script type="text/javascript" src="./lib/jquery.min.js"></script>
<script type="text/javascript" src="./lib/jquery.jqplot.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function() {
var s1 = [ 5, 7, 6, 8, 7 ];
var s2 = [ 7, 5, 7, 6, 9 ];
$.jqplot('graf', [ s1, s2 ]);
});
</script>
<body>
<div id="graf" style="width:600px;height:300px"></div>

</body>
</html>

2011/12/07

【未解決】SpringSource公式サンプルのmvc-ajaxの実行でException発生

0 件のコメント

環境

  • SpringSource Toole Suite :2.8.1.RELEASE
  • JDK:1.6.0_29

サンプルソース

・Samples | SpringSource.org
http://www.springsource.org/samples

上記リンクのSpring Core Samples –> mvc-ajax

Screenshot_1

動かし方は前回記事を参考に

・SpringSourceの公式サンプルをSTS上のサーバで実行する | とびこみ日記
http://takaiwa.net/archives/1029

まぁそもそもこの実行方法が合ってるとも言い難い気もしますが…

現象

Create Account画面でデフォルト値のまま、Nameに適当な名前を入れて、Createボタンを押下するとExceptionが発生する

WS000375

コンソールに出力されるエラー内容

致命的: Servlet.service() for servlet [Spring MVC Dispatcher Servlet] in context with path [/mvc-ajax] threw exception [Request processing failed; nested exception is org.springframework.core.convert.ConversionFailedException: Unable to convert value "¥1,000.00" from type 'java.lang.String' to type 'java.math.BigDecimal'; nested exception is java.lang.IllegalArgumentException: Unable to parse '¥1,000.00'] with root cause
java.text.ParseException: ¥1,000.00
at org.springframework.format.number.AbstractNumberFormatter.parse(AbstractNumberFormatter.java:56)
at org.springframework.format.number.CurrencyFormatter.parse(CurrencyFormatter.java:79)
at org.springframework.format.number.CurrencyFormatter.parse(CurrencyFormatter.java:1)
at org.springframework.format.number.AbstractNumberFormatter.parse(AbstractNumberFormatter.java:1)
at org.springframework.format.support.FormattingConversionService$ParserConverter.convert(FormattingConversionService.java:236)
at org.springframework.format.support.FormattingConversionService$2.convert(FormattingConversionService.java:127)
at org.springframework.core.convert.support.ConversionUtils.invokeConverter(ConversionUtils.java:36)
at org.springframework.core.convert.support.GenericConversionService.convert(GenericConversionService.java:184)
at org.springframework.samples.mvc.ajax.json.ConvertingDeserializer.deserialize(ConvertingDeserializer.java:29)
at org.codehaus.jackson.map.deser.SettableBeanProperty.deserialize(SettableBeanProperty.java:149)
at org.codehaus.jackson.map.deser.SettableBeanProperty$MethodProperty.deserializeAndSet(SettableBeanProperty.java:237)
at org.codehaus.jackson.map.deser.BeanDeserializer.deserializeFromObject(BeanDeserializer.java:496)
at org.codehaus.jackson.map.deser.BeanDeserializer.deserialize(BeanDeserializer.java:350)
at org.codehaus.jackson.map.ObjectMapper._readMapAndClose(ObjectMapper.java:1980)
at org.codehaus.jackson.map.ObjectMapper.readValue(ObjectMapper.java:1331)
at org.springframework.http.converter.json.MappingJacksonHttpMessageConverter.readInternal(MappingJacksonHttpMessageConverter.java:135)
at org.springframework.http.converter.AbstractHttpMessageConverter.read(AbstractHttpMessageConverter.java:154)
at org.springframework.web.bind.annotation.support.HandlerMethodInvoker.readWithMessageConverters(HandlerMethodInvoker.java:633)
at org.springframework.web.bind.annotation.support.HandlerMethodInvoker.resolveRequestBody(HandlerMethodInvoker.java:597)
at org.springframework.web.bind.annotation.support.HandlerMethodInvoker.resolveHandlerArguments(HandlerMethodInvoker.java:346)
at org.springframework.web.bind.annotation.support.HandlerMethodInvoker.invokeHandlerMethod(HandlerMethodInvoker.java:171)
at org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter.invokeHandlerMethod(AnnotationMethodHandlerAdapter.java:426)
at org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter.handle(AnnotationMethodHandlerAdapter.java:414)
at org.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet.java:790)
at org.springframework.web.servlet.DispatcherServlet.doService(DispatcherServlet.java:719)
at org.springframework.web.servlet.FrameworkServlet.processRequest(FrameworkServlet.java:644)
at org.springframework.web.servlet.FrameworkServlet.doPost(FrameworkServlet.java:560)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:641)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:722)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:304)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:210)
at org.springframework.web.filter.CharacterEncodingFilter.doFilterInternal(CharacterEncodingFilter.java:88)
at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:76)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:243)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:210)
at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:224)
at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:169)
at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:472)
at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:168)
at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:100)
at org.apache.catalina.valves.AccessLogValve.invoke(AccessLogValve.java:929)
at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:118)
at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:405)
at org.apache.coyote.http11.AbstractHttp11Processor.process(AbstractHttp11Processor.java:964)
at org.apache.coyote.AbstractProtocol$AbstractConnectionHandler.process(AbstractProtocol.java:515)
at org.apache.tomcat.util.net.JIoEndpoint$SocketProcessor.run(JIoEndpoint.java:302)
at java.util.concurrent.ThreadPoolExecutor$Worker.runTask(ThreadPoolExecutor.java:886)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:908)
at java.lang.Thread.run(Thread.java:662)


Balanceの「¥1,000.00」という値がString→BigDecimalにコンバートしようとしてExceptionが発生している模様。mvc-basicの方では出なかったのに(´ヘ`;)。

mvc-ajaxの方はorg.springframework.samples.mvc.ajax.jsonというパッケージがあり、ブラウザからの入力値をJSONで受け取り、コンバートしてAccount.javaへ格納しているようであるが、何故Exceptionになるのか不明。適当に100とか数値を入れてみても、結果は変らず。




とりあえず動かしてみる対策







コンバートさせないで、そのままStringとして受け取ればExceptionは発生しない。Account.javaの balanceを





    @NotNull
@NumberFormat(style = Style.CURRENCY)
private BigDecimal balance = new BigDecimal("1000");











    @NotNull
@NumberFormat(style = Style.CURRENCY)
private String balance = "1000";


のようにString型へ変更してやれば良い。もちろん、ここの型を変更したらセッター/ゲッターの型も変更。



保存して実行すると、ポップアップが表示されます。




  WS000377



同じように、Equity Allocationの所もString → BigDecimalへコンバートしているのに、ここは問題なし。

Balanceの所だけ(・ω・;)ハテ・・



あまり、BalanceのコンバートのExceptionだけに構ってられないので、ブログに掲載してペンディングということで…

2011/12/01

SpringSourceの公式サンプルをSTS上のサーバで実行する

0 件のコメント

win7前回Springsource Tool Suite(以下STS)を入れてみたわけですが、Eclipse IDE for Java Developersと一緒に 起動させると、HDDがガリガリ鳴るのでタスクマネージャを開いてみたら余裕でメモリを超えてる始末。別に、このEclipse系IDEが無くても、ブラウザ類やTwitterクライアント類や地デジ録画を動かすと2GBのメモリだとそろそろ大変だと言うことで増やす事に。でも、WindowsXP 32bitだったので、仕様上の制限もあり、4GBを超えられない!ということで、メモリ増設のために今更Windows 7も購入しました。

Windows 7を入れて、64bitの恩恵とメモリを8GBにアップさせたのでサクサク動くようになりました。まぁメモリはオーバースペックですね。でも、安かったので。

まぁWin 7 にした事が仇となるわけですが….

今回は、SpringSource.org 公式のサンプルをSTS上で動かしてみるをテーマにしてみました。前回はITProのSpring FrameworkのHelloworld的なサンプルを実行してみましたが、日本語で分かりやすかったのですが、せっかくSTSなるものがあるわけですから、公式が用意しくれてるサンプルを実行してみたいわけです。

※STSのバージョン

サンプルソースを取ってくる

有り難い事に公式にサンプルソースがたくさん公開されています。 

・Samples | SpringSource.org
http://www.springsource.org/samples


Screenshot_3

ここのSpring Core Samplesを利用してみたいと思うのですが、

Screenshot_2

おい、SVNかよ!と….STSにはCVSクライアントとGitクライアントは入ってますが、SVNクライアントはデフォルトで入っていません。SVNで公開するなら入れとけよwってツッコミたくなるのですが、SVNクライアント簡単に入手できるということで。以下の動画がとても参考になります。

Subversion en SpringSource Tool Suite from Jose Diaz on Vimeo.

英語じゃなくておそらくフランス語じゃないかと思われますが、まぁ動画見れてれば何も悩む必要はありません。

と言いながらエラーが出てプラグインをインストールできませんでした。まぁWin 7入れ立てほやほやだったので、このOSの標準アカウントと管理者アカウントが何者なのかよく理解していなかったので、そこから勉強しなおせって話でした(;-∀-)

要はSTSを「管理者として実行」で起動すれば、何事も無かったようにプラグインは入りました…以降もちょいちょい、標準アカウントによる(おそらく権限なしの)エラーで悩まされます(´ヘ`;)

プラグインが入ったら、SVNリポジトリエクスプローラを表示させて、
右クリック→新規→リポジトリー・ロケーション、とたどります。

svnexplorer

先ほどのURLを入力

https://src.springframework.org/svn/spring-samples/

image

Finishボタンを押下すると読み込みます。

WS000343

その中から今回はmvc-basicを動かしてみたいと思います。mvc-basic上で右クリックをしてエクスポートを選択。任意のディレクトリへエクスポートさせます。

WS000344

今度はPackage Explorerに戻って、右クリックImportを選択し、Mavenプロジェクトとしてインポートします。
 
image 

先ほどエクスポートしたディレクトリを選択。

image 

Finishボタンを押下すると読み込まれ、インポート完了です。

WS000349

 

サーバを用意する(デフォルトのVMware vFabric tc Server Developer Editionの場合)

これまた「管理者として実行」としてSTSを起動しておきます。
メニューのwindow→Serversでviewを開きます。

servers

viewの上で右クリックNew → Serverを選択します。

WS000352

VMware vFabric tc Server v2.5,v2.6が選択されている事を確認してNextを押下、

WS000353

Create new instanceのままでNextを押下、

WS000354

Nameに適当な名前を入れます。Templatesがまだ何者かイマイチよくわかってませんが、とりあえずbaseを選択して、Nextを押下。

WS000355

先ほどインポートしたmvc-basicを選択して、中央のAddボタンを押下して右に移します。Finishボタンを押下します。

サーバを用意する(お手持ちのTomcatの場合)

メニューのwindow→Serversでviewを開きます。上記同様viewの上で右クリックNew → Serverを選択します。

Select the server type内の上の方にApacheとあるので、

  WS000370
 
バージョンに該当するTomcatを選択し、Nextボタンを押下します。

 WS000371

Browseボタンを押下し、お手持ちのTomcatディレクトリを選択後、Nextボタンを押下します。

WS000364

インポートしたmvc-basicを選択して、中央のAddボタンを押下して右に移します。Finishボタンを押下します。


実行する

Package Explorerに戻ってmvc-basic上で右クリックRun As → Run on Serverを選択します。

runonserver

 WS000365

先ほど設定したサーバが表示されているので、利用したいサーバを選択してFinishを押下するとコンソールにログが表示され動き出します。何かしら問題があればエラーが出ます。上手く起動すると、STS内のブラウザ上にwelcome.jspが表示されます。

WS000358

@Controller Exampleをクリックすると、

WS000359

アカウント作成フォームが表示されます。
もちろん、他のブラウザからもアクセス可能。