えいのうにっき

誤字脱字・記述の誤りなどはこちら https://github.com/a-know/blog.a-know.me へお願いします

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

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

まずはController。

|java| 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

|javascript|

||<

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

|java| 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;
}

} ||<

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