morris.Line data(json 사용)

필자는 하루가 꼬박 걸려서 겨우 적용하게 되었음.. 

필자처럼 삽질하지 않기를 바랍니다ㅠ

밑에는 다 코드여서 그림을 맨 위로 뺏습니다. 

핵심 코드만 적어 놓았어요~

controller

@RequestMapping(value="/index", method=RequestMethod.GET)

public String index(Model model){

JSONObject jsonObject = new JSONObject();

JSONArray array = new JSONArray();

JSONObject info;

info = new JSONObject();

info.put("visitCount", 0);

info.put("date", "2017-10-8");

array.add(info);

info = new JSONObject();

info.put("visitCount", 6);

info.put("date", "2017-10-7");

array.add(info);

info = new JSONObject();

info.put("visitCount", 0);

info.put("date", "2017-10-6");

array.add(info);

info = new JSONObject();

info.put("visitCount", 0);

info.put("date", "2017-10-5");

array.add(info);

info = new JSONObject();

info.put("visitCount", 0);

info.put("date", "2017-10-4");

array.add(info);

jsonObject.put("morrisData", array); 

model.addAttribute("morrisData", jsonObject); // front로 pass

return "/index";

}

js

<script type="text/javascript">

$(document).ready(function(){

var graph = ${morrisData}.graph; // back에서 front로 받기.  jsonObject중에서 graph에 대한 정보만 필요하므로 .graph 처리해줬다.

var morrisData = []; // 데이터를 담을 배열 

$.each(graph, function(idx, value){

morrisData.push({'period':value.data, 'value':value.visitCount}); // morrisData 배열에 period값과 value값 넣기

});

console.log(morrisData); // 올바른 데이터가 들어갔는지 log로 확인

}

new Morris.Line({

  element: 'morrisChart',

  data:morrisData, // 위에 있는 morrisData배열

    xkey: 'period',

    ykeys: ['value'],

  labels: ['방문자']

       });

})

</script>

https://morrisjs.github.io/morris.js/lines.html

https://github.com/morrisjs/morris.js/blob/master/examples/days.html

http://api.jquery.com/jquery.each/