grailsとjqplotで年月単位の折れ線グラフを表示する

grailsとjqplotで年月単位の折れ線グラフを表示するには、以下の手順を実行します。

1. ApplicationResources.groovyでモジュールを宣言

modules = {
    application {
        resource url:'js/application.js'
    }
    // jqplotのモジュールを宣言
    jqplot {
      dependsOn 'jquery'
      resource url: 'js/jquery.jqplot.min.js', disposition:'head'
      resource url: 'js/jqplot.dateAxisRenderer.min.js', disposition:'head'
      resource url: 'css/jquery.jqplot.min.css'
    }
}

jquery.jqplot.min.jsとjqplot.dateAxisRenderer.min.jsはweb-app/jsに、 jquery.jqplot.min.cssはweb-app/cssに配置します。

2. main.gspに以下のようにr:requireを使用してリソースを導入します。

  <g:layoutHead/>
  <!-- jqplotを使用 -->
  <r:require module="jqplot"/>
        <r:layoutResources />
 </head>

3. viewに以下のようなコードを追加します。

<!-- 年月単位の折れ線グラフを描画 -->
<div id='jqplot1' style='width:300px; height:200px;'></div>
<script type='text/javascript'>
$(function(){
  $.jqplot("jqplot1",
    [
      [["2012/01/01", 550], ["2012/02/01", 480], ["2012/03/01", 510], ["2012/04/01", 580]], 
      [["2012/01/01", 410], ["2012/02/01", 420], ["2012/03/01", 410], ["2012/04/01", 480]]
    ],
    {
      title: "月間売り上げ",
      axes:{
        xaxis:{
          label: "年月",
          renderer: jQuery.jqplot.DateAxisRenderer,
          tickOptions: {
            formatString:'%Y年%m月'
          },
          rendererOptions: {
            daTickInterval: [1, 'month']
          }
        }, 
        yaxis:{
          label:"売上(万円)",
          min:400,
          max:600,
          numberTicks:5
        }
      }
    }
  )
});
</script>

出力画面

動作環境
grails 2.0.1

関連情報
jqplotのホームページ
http://www.jqplot.com/