Slim3＋Ajax＋jqPlotで、datastoreから取得したデータからグラフを動的に作成する

表記、少し苦労したのでメモ。 後から似たようなことをしようとされる方の参考になれば。 （自分用のプログラムからサンプル向けへの書き換えは行なっていませんので、適宜読み替えて下さい。）

まずはController。

import net.arnx.jsonic.JSON;


public class GetGraphDataController extends Controller {

    @Override
    protected Navigation run() throws Exception {

      this.response.setContentType("application/json; charset=UTF-8");

      //入力情報を取得
      String functionCode = this.request.getParameter("functionCode");
      String targetLoginID = this.request.getParameter("targetLoginID");


      if("1".equals(functionCode)){
          GetGraphDataForTotalPlayCountByUserService service = new GetGraphDataForTotalPlayCountByUserService();
          ArrayList<TotalPlayCountByUser> graphDatas = service.getData(targetLoginID);
          JSON.encode(graphDatas, this.response.getOutputStream());
      }
        return null;
    }
}

続いてHTMLのJavaScript。

<script type="text/javascript">

  var data = new Array();
  var tick_data = new Array();

  $(document).ready(function(){
      $.ajax({
          type : 'GET',
          url : '/graph/GetGraphData',
          data : controll_data,
          cache : false,
          dataType : 'json',

          success : function(json) {
                $.each(json, function(i, TotalPlayCountByUser){
                  data.push(TotalPlayCountByUser.playCount);
                  tick_data.push(TotalPlayCountByUser.yyyymmdd);
                });

                $.jqplot(
                        'graph_TotalPlayCount',[data],
                        {
                          title: '総再生回数の推移グラフ',
                          seriesColors: [ "#f7d4d4", "#efa9a9", "#e77e7e", "#e05252", "#d82727"],
                          seriesDefaults: {
                            renderer: $.jqplot.BarRenderer,
                            pointLabels: { show: true, location: 'e', edgeTolerance: -15 },
                            rendererOptions: {
                              showDataLabels: true,
                              barWidth: 30,
                              varyBarColor: true
                            }
                          },
                          axes: {
                            xaxis: {
                              renderer: $.jqplot.CategoryAxisRenderer,
                              ticks: tick_data,
                              tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                              tickOptions: {
                                angle: -30
                              }
                            }
                          }
                        }
                );
          },
          complete : function() {
            //通信完了
          }
      });
  });
</script>

参考程度に、serviceクラスも。

public class GetGraphDataForTotalPlayCountByUserService {

    static final UserMeta userMeta = UserMeta.get();

    @SuppressWarnings("static-method")
    public ArrayList<TotalPlayCountByUser> getData(String loginID){

        ArrayList<TotalPlayCountByUser> result = new ArrayList<TotalPlayCountByUser>();

        User user = Datastore.query(userMeta).filter(userMeta.loginId.equal(loginID)).asSingle();

        if(user == null){
            return result;
        }

        ArrayList<PlayCountData> datas = (ArrayList<PlayCountData>) user.getPlayCountDataRefs().getModelList();

        for(PlayCountData e : datas){
            StringBuffer yyyymmdd = new StringBuffer("20");
            yyyymmdd.append(e.getYyMMddHHmmss().substring(0, 2));
            yyyymmdd.append("/");
            yyyymmdd.append(e.getYyMMddHHmmss().substring(2, 4));
            yyyymmdd.append("/");
            yyyymmdd.append(e.getYyMMddHHmmss().substring(4, 6));
            result.add(new TotalPlayCountByUser(yyyymmdd.toString(), e.getTotalPlayCount()));
        }
        return result;
    }
}

この結果、↓のようなグラフが出力できます。