자바 웹 프로젝트와 퓨전차트 연동 #2 (서버, 프런트)

 

FusionCharts 연동하기

 자바스크립트를 활용하여 데이터 연동 없이 화면단에만 구현했던 지난번 퓨전차트 포스트에 이어 이번에는 서버에서 데이터를 호출하여 화면단에 전달한 뒤, 차트를 랜더링 하는 방법을 소개하겠습니다. (서버단 - 자바, 프런트 - 자바스크립트, 데이터 형태는 JSON)

 

* 이전 포스트: 자바스크립트로 퓨전차트 연동 해보기 #1

 

 

서버단 소스

차트마다 가공해야될 데이터의 형태가 다르기 때문에 기본적으로 형태는 JSON이지만, 라벨과 value는 차트에 맞게 가공해야 됩니다. 가공하는 방법은 여러 가지가 있겠지만, 저는 서버단에서 가공했습니다.

 

구현한 차트의 종류는 컬럼차트입니다. 소스에는 DB를 호출하는 메소드와 VO는 있지만, 어차피 데이터는 전부 라벨과 벨류 형태이므로 그에 맞게 VO를 구성하고 SELECT를 날리시면 됩니다.

 

 

    public String selectTop10PageList(Map<String, Object> paramMap) {
        
        JSONArray chartDataJson = new JSONArray();
        JSONObject jsonVal = null;
        
        List<FusionChartVo> resultSet = fusionChartDao.selectTop10PageList(paramMap);
        
        for (int i=0; i<resultSet.size(); i++) {
            jsonVal = new JSONObject();
            jsonVal.put("label", resultSet.get(i).getName());
            jsonVal.put("value", resultSet.get(i).getData());
            chartDataJson.add(jsonVal);
        }
        
        return chartDataJson.toString();
    }

 

 

 

화면단 소스

 화면단에서는 아약스(AJAX)로 위 메소드를 호출하며, 리턴 받을 데이터 형태는 JSON으로 지정합니다. 서버단에서 JSON 형태로 가공된 데이터는 화면단에서 별도로 가공할 필요 없이 바로 퓨전차트를 랜더링 하면 됩니다.

 

소스에 대한 설명을 드리자면 아래를 보면 크게 3가지 파트로 나뉘어져 있습니다.

 

첫 번째는 'columnChartData'로 차트에 표시할 문구나 데이터의 단위를 설정하는 부분입니다. 제목이나 X축, Y축에 문구를 설정하고 부가 설명도 입력할 수 있죠.

 

두 번째는 'columnChartConfig'라는 부분인데, 차트의 종류, 차트를 출력할 위치(태그의 ID), 너비와 폭, 그리고 첫 번째 항목을 포함시켜 주면 됩니다. columnChartData를 바로 dataSource에 넣어줘도 되지만, 그냥.. 분리해봤습니다.

 

세번째는 아약스로 서버단에서 데이터를 호출한 뒤, 화면단에 차트를 랜더링 해주는 부분입니다. 위에서부터 아약스로 서버단을 호출하고 리턴 받은 json 데이터를 디코딩 후 자바스크립트 객체에 담아서 퓨전차트 랜더링 함수를 호출하고 있습니다.

 

 

    // 컬럼형 퓨전차트 제목, 문구, 데이터 단위 설정
    var columnChartData = {
            'chart' : {
            'caption' : 'Top 10 Page List',
            'subcaption': '',
            'xAxisName' : 'Pages',
            'yAxisName' : 'Counts',
            'numberPrefix' : '',
            'theme' : 'fusion'
        },
        'data' : []
    };
    
    // 컬럼형 퓨전차트 랜더링 설정
     var columnChartConfig = new FusionCharts({
         type : 'column2d',
         renderAt : 'chart1-container',
         width : '100%',
         height : '400',
         dataFormat : 'json',
        dataSource : ''
     });
     
    // 컬럼형 퓨전차트 데이터 호출, 랜더
     $.ajax({        
        url : contextPath + url,
        dataType : "text",
        success : function(data) {
            var dataObjectArray = new Array();
            var tmp = JSON.parse(decodeURIComponent(data));
 
            $.each(tmp, function(key, value) {
                var dataObject = {
                    label : '',
                    value : ''
                };
                dataObject.label = value.label;
                dataObject.value = value.value;
                dataObjectArray.push(dataObject);
            });
            columnChartData.data = dataObjectArray;
            columnChartConfig.setJSONData(columnChartData);
            columnChartConfig.render();
        },
        error : function(data) {
            alert("Column Chart ERROR!");
        }
    });

 

 

마지막으로 위 소스를 보면 두번째 객체에 renderAt 이라는 부분이 있는데, 이곳에는 실제 차트를 뿌려줄 HTML 태그의 아이디를 넣어주면 됩니다.

 

예)  <div id="chart1-container"></div>

 

 

 

컬렴형 차트 외에도 라인이나 파이 차트를 이용하고 싶으면 위 소스의 1, 2 번째 부분에 설정이나 문구 부분만 바꿔주면 어렵지 않게 구현할 수 있습니다.

 

끝~!