본문 바로가기
✨ Back-end/etc

[Spring] 구글 차트 DB에 넣어 Ajax로 시각화하기

by 환풍 2023. 9. 14.
728x90
반응형

 

https://developers-dot-devsite-v2-prod.appspot.com/chart/interactive/docs/gallery/piechart?hl=ko 

 

시각화: 원형 차트  |  Charts  |  Google for Developers

이 페이지는 Cloud Translation API를 통해 번역되었습니다. Switch to English 의견 보내기 시각화: 원형 차트 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 개요 SVG

developers.google.com

구글 차트로 데이터를 시각화시켜보았다.

 

방법1.  (Iterator 사용하고,, 어려운 방법이니 추천하지 않는다.)

 

ajaxDemo3.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>    
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
     $(function(){
        $("button#chart1").click(function(){
            $.ajax({
                   url:'${pageContext.request.contextPath}/ajaxPieChart1',
                   type:'POST',            
                   contentType:'application/x-www-form-urlencoded; charset=UTF-8',
                   dataType:'script',
                   success:function(result){
                       console.log(result);
                   },
                   error:function(){
                       alert('error');
                   }
               });
        });//Click 
     });//function  
    </script>
  </head>
  <body>
 
    <button id="chart1">HtmlCssChart</button>
    <div id="piechart_3d" style="width: 900px; height: 500px;"></div>
    
  </body>
</html>
cs
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>: 

Google Charts API의 로더 스크립트를 로드하고 있다. 이 스크립트는 Google Charts API를 초기화한다.

$(function(){ ... });

: 페이지가 로드될 때 실행할 JavaScript 코드를 정의한다. 이 부분은 jQuery의 문서 준비 이벤트 핸들러이다.

$("button#chart1").click(function(){ ... });

: "chart1"이라는 ID를 가진 버튼이 클릭되면 실행될 함수를 정의한다. 이 함수는 AJAX 요청을 보내는 역할을 한다.

$.ajax({ ... });

: AJAX 요청을 정의하고 보내는 부분이다. 

url: AJAX 요청이 전송될 URL을 설정한다.
type: 요청의 HTTP 메서드를 설정한다. 여기서는 POST를 사용
contentType: 요청 본문의 콘텐츠 유형을 설정한다.
dataType: 서버에서 받아온 응답 데이터의 유형을 설정한다. 여기서는 'script'를 사용하여 JavaScript 코드를 받아올 것으로 설정.
success: 요청이 성공하면 실행할 콜백 함수를 정의한다. 이 경우 서버에서 반환된 JavaScript 코드가 콘솔에 출력.
error: 요청이 실패하면 실행할 콜백 함수를 정의한다. 여기서는 간단한 경고 메시지를 표시한다.
<button id="chart1">HtmlCssChart</button>

: "chart1"이라는 ID를 가진 버튼을 페이지에 추가한다. 이 버튼을 클릭하면 AJAX 요청이 실행된다.

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

: 파이 차트가 그려질 div 요소를 페이지에 추가한다. 이 요소는 id 속성을 사용하여 JavaScript에서 식별된다. 차트의 크기도 여기서 정의된다.

 

 

DB

EMP 테이블에 대해 차트를 그릴 것이므로 EMP에 있는 데이터들을 확인한다.

 

Mapper

MyBatis와 같은 SQL 매퍼 프레임워크를 사용할 때, resultType 속성을 사용하여 SQL 쿼리의 결과를 어떤 자바 객체로 매핑할지를 지정할 수 있다. 여기서 resultType에 HashMap을 사용하는 것은 결과 집합이 특정 클래스나 모델 객체로 매핑되지 않고, 간단한 키-값 쌍 형태로 데이터를 얻고자 할 때 사용된다.

SQL 쿼리의 결과 집합에는 'SAL'과 'JOB' 두 개의 열이 있으며, 이러한 결과를 자바 객체로 변환하기보다는 각 행의 'SAL'과 'JOB' 값을 맵의 키와 값으로 사용하여 간단한 데이터 구조로 처리하고자 할 때 HashMap이 유용하다.

 

Service와 Dao 인터페이스

인터페이스에 차트 리스트를 조회할 코드 한문장 추가해주었다.

DaoImp

mapper를 실행시켜 리턴시킨다.

ServiceImp

ServiceImp에서 dao를 받아 컨트롤러에 리턴시켜주는 것이다.

 

Controller

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
@PostMapping("ajaxPieChart1")
    public String ajaxPieChart1Process(Model model) {
        List<Object>list=ajaxDemoService.selectGroupEmp();
        System.out.println(list);
        StringBuffer sb=new StringBuffer(); 
        sb.append("['Maxsal', 'Group per job'],  ");
                
    int lastIndex=0;        
    for(Object o:list) {//o 는 맵
            //System.out.println("o"+ o);
            Set<Entry<String, Object>>set=((HashMap<String, Object>)o).entrySet(); 
             
            Iterator<Entry<String, Object>> i=set.iterator();
            sb.append("[");
            int index=0;
            while(i.hasNext()) {
                Entry<String,Object> entry=i.next();
                index++;
                System.out.println(entry.getKey()+" "+entry.getValue());
                //sb.append("'"+entry.getValue()+"'"+(index<2 ?",":""));
                //sb.append(index<2?(entry.getValue()+","):""+entry.getValue()+"");
                if(entry.getKey().equals("JOB")) {
                      sb.append("'"+entry.getValue()+"',");
                  }else if(entry.getKey().equals("SAL")) {
                      sb.append(entry.getValue());
                  }
            }//while
             if(lastIndex==list.size()-1)
                sb.append("]");
            else {
                  sb.append("],");
            }
            lastIndex++;
        }
        System.out.println(sb.toString());
        model.addAttribute("data", sb.toString());
        return "basicAjax1/ajaxChart1";
    }
cs

 

 

자바(JAVA) - Iterator 개념과 사용방법

이터레이터(Interator)란? 컬렉션 프레임워크에서 List, Set, Map을 순서대로 반복해서 조회할 수 있도록 해주는 객체이다. 위와 같이 프레임워크 ArrayList에 3개의 문자열을 넣고, foreach를 통해 출력해

bright-landscape.tistory.com

Iterator에 대한 포스팅을 한적이있다. 이 개념에 대해 잘모르면 한번 다시보자.

 

StringBuffer sb = new StringBuffer();

데이터를 구성하는 데 사용할 문자열 버퍼를 생성한다.

sb.append("['Maxsal', 'Group per job'], ");

: Google Charts API에 전달할 데이터의 첫 번째 행을 추가한다. 이 행은 데이터의 레이블을 정의한다.

for (Object o : list) { ... }

: 결과 목록을 반복하면서 데이터를 가공하고 문자열을 구성한다.

Set<Entry<String, Object>> set = ((HashMap<String, Object>) o).entrySet();

: 각 결과 항목(맵)에서 엔트리(키-값 쌍) 집합을 가져온다.

Iterator<Entry<String, Object>> i = set.iterator();

: 엔트리 집합을 순회하기 위한 이터레이터를 생성한다.

sb.append("[");

: 각 행의 시작을 나타내는 '['를 추가한다.

while (i.hasNext()) { ... }

: 엔트리 집합을 순회하면서 데이터를 추출합니다.

if (entry.getKey().equals("JOB")) { ... } else if (entry.getKey().equals("SAL")) { ... }

: 'JOB' 키와 'SAL' 키를 기준으로 데이터를 문자열로 추가한다.

if (lastIndex == list.size() - 1) sb.append("]"); else sb.append("],");

: 각 행의 마지막 여부를 확인하여 행의 마지막인 경우 ']'를 추가하고, 그렇지 않은 경우 ','를 추가하여 다음 행을 시작한다.

model.addAttribute("data", sb.toString());

: Google Charts API에 전달할 데이터를 모델에 추가한다.

return "basicAjax1/ajaxChart1";

: 데이터를 가공하고 모델에 추가한 후에는 "basicAjax1/ajaxChart1" 뷰를 반환하여 해당 데이터를 사용하여 파이 차트를 그리도록 한다.

 

ajaxChart1.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%> 
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);
      
 
 function drawChart() {
        var data = google.visualization.arrayToDataTable([         
         ${data}      
        ]);     
        var options = {
          title: 'Spring Ajax View'
        };
        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
 
        chart.draw(data, options);
      }
cs
google.charts.load('current', {'packages':['corechart']});

 Google Charts API를 로드하고 'corechart' 패키지를 사용할 것임을 설정한다.

google.charts.setOnLoadCallback(drawChart);

: Google Charts API가 로드된 후에 drawChart 함수를 호출한다. 이 함수는 차트를 그리는 메인 함수이다.

폼이 실행되자마자 drawChart가 그려지는것이다.

function drawChart() { ... }

: 파이 차트를 그리는 함수이다.

이 함수는 Google Charts API에서 제공하는 함수 및 기능을 사용하여 차트를 생성하고 렌더링한다.

var data = google.visualization.arrayToDataTable([  ${data}   ]);

: 차트에 표시할 데이터를 정의한다. ${data} 부분은 템플릿 리터럴을 사용하여 동적으로 데이터를 삽입하는 부분이다.

이 코드의 일부분이 누락되었거나 다른 곳에서 데이터를 동적으로 생성해야한다.

var options = { title: 'Spring Ajax View' };

: 차트의 옵션을 정의한다. 여기서는 차트의 제목을 'Spring Ajax View'로 설정했다.

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

: 파이 차트를 생성하고 해당 차트를 HTML 문서의 'piechart_3d'라는 ID를 가진 요소에 연결한다.

chart.draw(data, options);

: 이전에 정의한 데이터와 옵션을 사용하여 파이 차트를 그린다.

 

방법2. 쉽게 따라할 수있다.

 

위 코드의 양식에 맞게 코딩해서, data 부분에만 데이터를 바꿔넣어주면 완성된다.

 

test.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript"
    src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.charts.load('current', {
        'packages' : [ 'corechart' ]
    });
    // drawChart 함수를 미리 정의하되, 호출은 버튼 클릭 시에 수행하도록 변경
    function drawChart() {
        $.ajax({
            url : '${pageContext.request.contextPath}/test',
            type : 'POST',
            dataType : 'json', // 데이터 형식을 JSON으로 지정
            success : function(result) {
                console.log(result);
 
                // JSON 데이터를 파싱하여 배열로 추출
                var chartData = [ [ 'Task', 'Hours per Day' ] ];
                for (var i = 0; i < result.length; i++) {
                    var job = result[i].JOB;
                    var sal = result[i].SAL;
                    chartData.push([ job, sal ]);
                }
                var data = google.visualization.arrayToDataTable(chartData);
                var options = {
                    title : 'My Daily Activities'
                };
                var chart = new google.visualization.PieChart(document.getElementById('piechart'));
 
                chart.draw(data, options);
            },
            error : function(e) {
                alert('error');
            }
        });
    }
</script>
</head>
<body>
    <!-- 버튼 클릭 시에 drawChart 함수 호출 -->
    <button onclick="drawChart();">원형 차트 나와라</button>
    <!-- 차트를 표시할 div -->
    <div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
</html>
cs

버튼을 클릭하면 차트가 뿌려질 수 있도록 코딩했다.

 

Controller

컨트롤러에서 Emp  데이터들의 값들을 list로 뽑아내어 ajax로 다시 리턴해준다.

 

test.jsp (자바스크립트 부분)

 

컨트롤러에서 넘어온 list 값을 result로 출력해보았더니, job, sal 데이터들이 리스트로 뽑힌걸 확인했고,

이걸 그대로 push해주면 끝이난다.

728x90
반응형
저작자표시 비영리 변경금지

'✨ Back-end > etc' 카테고리의 다른 글

[Spring-Legacy] validate 유효성 검사  (0) 2023.09.14
[Spring] SessionAttribute  (0) 2023.09.14
[Spring] thymleaf에서 제공하는 th:object 와 th:field  (0) 2023.09.13
[Spring] Ajax 다양한 방법, @ResponseBody와 @RequestBody  (0) 2023.09.13
[Spring] 타임리프 경로(URL) 설정  (0) 2023.09.02

관련글

댓글

티스토리툴바