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.barRenderer.min.js', disposition:'head'
      resource url: 'js/jqplot.categoryAxisRenderer.min.js', disposition:'head'
      resource url: 'js/jqplot.pointLabels.min.js', disposition:'head'
      resource url: 'css/jquery.jqplot.min.css'
    }
}

jquery.jqplot.min.jsとjqplot.barRenderer.min.js、jqplot.categoryAxisRenderer.min.js、 jqplot.pointLabels.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='jqplot2' style='width:400px; height:300px;'></div>
<script type='text/javascript'>
$(function(){
  $.jqplot("jqplot2",
    [
      [150, 80, 70, 100, 120]
    ],
    {
      title: "店舗売上",
      seriesDefaults:{
        renderer:$.jqplot.BarRenderer,
        pointLabels: { show: true, location: 'n', edgeTolerance: -10}
      },
      axes: {
        xaxis: {
          renderer: $.jqplot.CategoryAxisRenderer,
          ticks: ["A店", "B店", "C店", "D店", "E店"]
        }
      }
    }
  )
});
</script>

出力画面

動作環境
grails 2.0.1

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