[JavaScript] DB데이터 구글차트 활용하여 그래프화 시키기

💡 구글 개발자센터 참고하러 가기

 

# DB에 존재하는 데이터를 화면단에 뿌려주는 방법

(단순) 결과 화면

 

 

1) Controller > DB에서 가져온 값을 가공하여 뷰단에 전달

@RequestMapping("/statsUser.do")
public String statsUser(Model model) throws Exception{
    System.out.println("/statsUser.do");
    
    Map<String, Object> map = userService.getQuitUserList();
    //map에 두개가 담겨져 있음
    //List<QuitUser> user
    //Map<String, Integer> reason
    Map<String, Integer> reason = (Map<String, Integer>) map.get("reason");
        
    //데이터 가공 후 전달
    String result = "";
    Set<String> reasonKeys = reason.keySet();

    for(String key : reasonKeys) {
        if(result!="") {
            result += ",";
        }
        result += "['"+key+"', "+reason.get(key)+"]";
    }
        
    model.addAttribute("result", result);
    
    return "forward:/user/statsUser.jsp";
}

 

 

2) View > 헤드부분에 자바스크립트함수를 삽입하고

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Reason', 'Count'],
          ${result}
        ]);

        var options = {
          title: '탈퇴 통계'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
      }
</script>

 

 

3) View > 바디부분에 뿌려줄 차트항목을 써주면 끝!

 <div id="piechart" style="width: 900px; height: 500px;"></div>​