« Mysql + Java で CommunicationsException が発生 | トップページ | JFreeChartを使用したサンプルプログラム3 (見た目の変更) »

2011年3月 1日 (火)

JFreeChartを使用したサンプルプログラム2 (機能追加)

前回は簡単なサンプルを作成したが、今回は少し機能を追加してみる

① 画像の自動更新
② JSPからグラフの種類変更
③ JSPからグラフのタイトル等を変更

まずJSPの先頭でタイトル等を設定する

<%-- グラフのタイトル等を設定する--%>
<c:url var="imgtitle" value="棒グラフ" />
<c:url var="xLabel" value="XXXX" />
<c:url var="yLabel" value="YYYY" />

同じく、JSPの先頭でグラフの種類を設定する

<%-- 表示できるグラフの種類をあらかじめ設定する--%>
<c:set var="BAR3D" value="<%= FixedValues.TYPE.BAR3D %>" />
<c:set var="PIE3D" value="<%= FixedValues.TYPE.PIE3D %>" />
<c:set var="SPIDER" value="<%= FixedValues.TYPE.SPIDER %>" />

<%-- 表示グラフを設定する※上の3種類より選択--%>
<c:set var="imgtype" value="${PIE3D}" />

同じく、JSP中で画像を表示させたい場所に、IMGタグを2つ用意
(この時点ではSRC未設定)

    <img id="view1" name="view1" src="">
    <img id="view2" name="view2" src="">

同じく、JSPの最後の方にJavaScriptを追加し、
画像の設定と読込を行う

<script type="text/javascript">
<!--
// IMG 再描画時間(10秒)
var second = 10000 ;

// 画像選択フラグ
var chgFlg = true ;

// 画像引数
var no = 0 ;

// 使用する文字列を設定
var IMGTITLE = '${imgtitle}';
var XLABEL = '${xLabel}';
var YLABEL = '${yLabel}';

var IMGSRC = "/Viewer?imgtype=" + '${imgtype}'
        + "&imgtitle=" + IMGTITLE
        + "&xLabel=" + XLABEL
        + "&yLabel=" + YLABEL
        + "&no=" ;

// 画像再描画関数
chgImg();

/**
  * 画像再描画
  */
function chgImg(){

  if(no == 0){
      document.getElementById("view2").style.display = "none";
      document.getElementById("view1").src = IMGSRC + no ;
  }else if( chgFlg ){
      document.getElementById("view2").style.display = "none";
      document.getElementById("view1").style.display = "";
      document.getElementById("view2").src = IMGSRC + no ;
      chgFlg = !chgFlg;
  }else{
      document.getElementById("view1").style.display = "none";
      document.getElementById("view2").style.display = "";
      document.getElementById("view1").src = IMGSRC + no ;
      chgFlg = !chgFlg;
  }
  no = no + 1 ;
 setTimeout("chgImg()", second);
}
//-->
</script>

初回にview1のIMGタグを設定し、その後、
setTimeout() を用いて10秒毎に関数を呼び
view2 と view1 の表示・非表示を繰り返すようにする。

グラフの種類やタイトル等はGetパラメータでサーブレットに渡す。

また、no を後ろに追加することで、イメージのキャッシュを呼び出さないようにする

最後にサーブレット側でグラフの種類、タイトル等を受け取り、その値を設定する
(ソースが長くなるので一部のみ抜粋)

サーブレット(Viewer)

        :
      (省略)
        :

            // グラフの種類取得
            String imgType = (String) request.getParameter("imgtype");

            if (imgType == null) {

                // imgTypeが取得できない場合は3D棒グラフの作成
                viewCreateBarChart3D(request);

            } else if (imgType.equals(FixedValues.TYPE.BAR3D.toString())) {

                // 3D棒グラフの作成
                viewCreateBarChart3D(request);

            } else if (imgType.equals(FixedValues.TYPE.PIE3D.toString())) {

                // 3D円グラフの作成
                viewCreatePieChart3D(request);

            } else if (imgType.equals(FixedValues.TYPE.SPIDER.toString())) {

                // レーダチャートの作成
                viewCreateSpiderWebPlot(request);

            } else {

                // その他存在しない値は3D棒グラフの作成
                viewCreateBarChart3D();
            }

        :
      (省略)
        :

    /**.
     * 3次元棒グラフを生成
     * @param request リクエスト
     * @throws IOException IO例外
     */
    public final void viewCreateBarChart3D(
            final HttpServletRequest request
  ) throws IOException {

        //レガシーテーマを設定する
        ChartFactory.setChartTheme(StandardChartTheme.createLegacyTheme());

        // 棒グラフの基となるデータセット(list)を用意する
        :
      (省略)
        :

        // Getパラメータからタイトル取得
        String title = (String) request.getParameter("imgtitle");

        // GetパラメータからX軸取得
        String xLabel = (String) request.getParameter("xLabel");

        // GetパラメータからY軸取得
        String yLabel = (String) request.getParameter("yLabel");

        // 3次元棒グラフを生成
        //  第1引数 グラフタイトル、
        //  第2引数 横軸
        //  第3引数 縦軸
        //  第4引数 データ
        //  第5引数 VERTICAL:縦棒グラフ 、HORIZONTAL:横棒グラフ
        //  第6引数 判例を表示するか
        //  第7引数 ツールチップを表示するか
        //  第8引数 URLを動的に生成するか
        JFreeChart objCht = ChartFactory.createBarChart3D(
                title,
                xLabel,
                yLabel,
                list,
                PlotOrientation.VERTICAL ,
                true, false, false);

        // JPEG形式で画像を出力(390×260ピクセル)
        response.setContentType("image/jpeg");
        ServletOutputStream objSos = null;
        objSos = response.getOutputStream();
        ChartUtilities.writeChartAsJPEG(objSos, objCht,
                    390,
                    260);
        return;
    }

※注意

 Getパラメータに日本語を渡す場合、Tomcat の server.xml  に
 「useBodyEncodingForURI="true"」の記述を追加する必要がある

    <Connector connectionTimeout="60000" port="8080"
         protocol="org.apache.coyote.http11.Http11NioProtocol"
         redirectPort="8443"
         useBodyEncodingForURI="true"  />

以上の対応を行う利点は、

・最新の画像が10秒間隔で読み込める
・リコンパイルをせずにJSPの変更のみで画像の変更が行える

まだ試してはいないが、Comet という技術を使えば、
画像の更新時のみ再読み込みを行うようにすることもできると思われる。

下図は上記プログラムを元に作成したグラフです。
赤色の「imgtitle」、「xLabelyLabel」以外は JFreeChart のオブジェクトになります。

Test

« Mysql + Java で CommunicationsException が発生 | トップページ | JFreeChartを使用したサンプルプログラム3 (見た目の変更) »

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/153605/51003325

この記事へのトラックバック一覧です: JFreeChartを使用したサンプルプログラム2 (機能追加):

« Mysql + Java で CommunicationsException が発生 | トップページ | JFreeChartを使用したサンプルプログラム3 (見た目の変更) »