grailsとpietyでパイグラフ、折れ線グラフ、棒グラフを表示する

grailsとpietyでパイグラフ、折れ線グラフ、棒グラフを表示するには、以下の手順を実行します。

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

modules = {
    application {
        resource url:'js/application.js'
    }
    // pietyのモジュールを宣言
    piety {
        dependsOn 'jquery'
        resource url: 'js/jquery.peity.min.js'
    }
}

jquery.peity.min.jsはweb-app/jsディレクトリに配置します。

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

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

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

<!-- pietyでパイグラフを描画 -->
<span class="pie">120/360</span>
<script type="text/javascript">
  $(function(){
    $("span.pie").peity("pie", {
      colours: function(){ return ['#dddddd', '#7799dd'];},
      diameter: function(){ return 52; }
    });
  });
</script>
<br />
<br />
<!-- pietyで折れ線グラフを描画 -->
<span class="line">10,20,40,70,80,60,100</span>
<script type="text/javascript">
  $(function(){
    $("span.line").peity("line", {
      height: function(){ return 40;},
      width: function(){ return 200; }
    });
  });
</script>
<br />
<br />
<!-- pietyで棒グラフを描画 -->
<span class="bar">80,20,40,70,50</span>
<script type="text/javascript">
  $(function(){
    $("span.bar").peity("bar", {
      colour: function(){ return '#ff9900'; },
      height: function(){ return 40; },
      width: function(){ return 100; }
    });
  });
</script>

出力画面

動作環境
grails 2.0.1

関連情報
pietyのホームページ
http://benpickles.github.com/peity/