차트 만들기

참고 사이트

js.devexpress.com/Demos/WidgetsGallery/Demo/Charts/ColorEachBar/jQuery/Light/

Color Each Bar Differently - DevExtreme Charts: jQuery Widgets by DevExpress

원하는 강의를 선택 했을 때 그 강의에 대한 설문조사가 도표로 나오게 만들었다.

 

자바스크립트에서 json 으로 확인하기!

alert(JSON.stringify(data.result));

 

 

 

이런식으로 JSON 형태로 들어가 있어야지 차트를 이용할 수 있다.

 

 

1.  강의 이름을 누르면 A 태그를 타고 surveryDetail_1() 로 이동.

<c:forEach var="list" items="${surveyList}" >
	<tr>
		<td>
			<c:if test="${list.srvy_Pnum==0}">${list.lec_name}</c:if>
			<c:if test="${list.srvy_Pnum>=1}" ><a href="javascript:surveryDetail_1(${list.lec_id})">${list.lec_name}</a></c:if>
		</td>
		<td>${list.tutor_name}</td>
		<td>${list.c_st}</td>
		<td>${list.c_end}</td>
		<td>${list.srvy_Pnum}/${list.pre_pnum}</td>
	</tr>
</c:forEach>

 

2. 자바스크립트에서 9번을 돌면서 surveryDetail 를 호출한다

   호출할 때는 강의 아이디와 i 를 가지고 가는데

   i는 문항 번호를 뜻한다.

   1번 문항부터 9번 문항까지를 가지고 올 것이다.

function surveryDetail_1(lec_id) {
  for( var i=0; i<10; i++ ){
	surveryDetail(lec_id,i);
  }
  surveryDetail_10(lec_id,1);
}

 

3. 전달 받은 강의 id 와 i를 param 에 담아주고

   callAjax 을 타는데

   survey.do 로 이동 해서 survey.do가 돌려주는 반환 값을 json 형태로 받아온다.

   Map 타입으로 받아야 한다

function surveryDetail(lec_id, i) {
	var param = {
		lec_id  : lec_id,
		que_num : i
	}
	
	var resultCallback = function(data) {
		$("#chart"+i).dxChart({
	        dataSource   : data.result,
	        palette      : "Material",
	        title: {
	            text     : " [ "+ i + "번 문항 ]",
	            subtitle : data.que
	        },
	        commonSeriesSettings: {
	            type             : "bar",
	            valueField       : "ivalue",
	            argumentField    : "svalue",
	            ignoreEmptyPoints: true
	        },
	        seriesTemplate: {
	            nameField : "svalue"
	        }
	    });
	};
	callAjax("/tut/survey.do", "post", "json", true, param, resultCallback);
}

 

4. survey.do 에서는 반환 값이 Map 이다.

   우리 프로젝트 설문지 테이블을 잘못 짜서 어쩔 수 없이 이렇게 뽑아오게 되었다.

 

이 두 테이블에서 설문지의

1번 보기 + 1번 문제를 같이 뽑아와야 하는데, 

 

보기들은 모두 같은 DTO의 다른 객체들로 같은 컬럼에 연속적으로 저장이 되어 있어야 하고

 

문제들도 마찬가지로 모두 같은 DTO의 다른 객체들로 같은 컬럼에 연속적으로 저장이 되어 있어야 한다.

 

 

 

 

 

 

 

 

 

 

 

 

이런식으로 한 객체에 들어가 있어야 한다.

머리를 쓰다 쓰다가 

결국 컨드롤러에서 변형을 해주게 되었다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

List 에 모든 보기와 답을 차례로 담는다

결국 survey.do 는 9번 호출이 되는건데

1번 호출될 때마다 해당 문항 번호에 대한 보기와 그 값들만 출력을 해간다.

그래서 Map 에 담아서 반환을 한다.

@RequestMapping("survey.do")
@ResponseBody
public Map<String, Object> surveyControl1(Model model, @RequestParam Map<String, Object> paramMap, HttpServletRequest request, HttpServletResponse response, HttpSession session) throws Exception{
	
	Map<String, Object> resultMap = new HashMap<String, Object>();
	SurveyControlModel result = surveyControlService.srvy_Que_Select(paramMap);
		
	// 문제
	String que = result.getQue();
		
	// 보기 문항/통계
	List<Que> List = new ArrayList<Que>();
		
	Que Q = new Que();
	Q.setSValue(result.getAnswer_1());
	Q.setIValue(Integer.parseInt(result.getSum_1()));
	List.add(Q);
		
	Que Q1 = new Que();
	Q1.setSValue(result.getAnswer_2());
	Q1.setIValue(Integer.parseInt(result.getSum_2()));
	List.add(Q1);
		
	Que Q2 = new Que();
	Q2.setSValue(result.getAnswer_3());
	Q2.setIValue(Integer.parseInt(result.getSum_3()));
	List.add(Q2);
		
	Que Q3 = new Que();
	Q3.setSValue(result.getAnswer_4());
	Q3.setIValue(Integer.parseInt(result.getSum_4()));
	List.add(Q3);
		
	Que Q4 = new Que();
	Q4.setSValue(result.getAnswer_5());
	Q4.setIValue(Integer.parseInt(result.getSum_5()));
	List.add(Q4);
		
	resultMap.put("que", que);
	resultMap.put("result", List);
		
	return resultMap;
}

 

5. 이렇게 뽑아왔기 때문에 한번 뽑아 올 때마다 상단에 json 형태로 구성이 가능해서 결국 차트를 만들 수 있게 된다.

<select id="srvy_Que_Select" resultType="kr.kosmo.jobkorea.tut.model.SurveyControlModel">
 SELECT  A.que      
        ,A.que_num 
        ,A.que_one   AS answer_1  ,B.que_one   AS sum_1
        ,A.que_two   AS answer_2  ,B.que_two   AS sum_2
        ,A.que_three AS answer_3  ,B.que_three AS sum_3
        ,A.que_four  AS answer_4  ,B.que_four  AS sum_4
        ,A.que_five  AS answer_5  ,B.que_five  AS sum_5
  FROM   tb_srvy_que A
        ,tb_srvy B
  WHERE  B.que_num = A.que_num 
    AND  A.que_num = #{que_num}
    AND  B.lec_id LIKE #{lec_id}
</select>

 

6. Que 객체에서는 이렇게 두가지 변수만이 존재 하는 이유는 

 

보기를 담을 sValue

 

 

 

 

 

 

 

 

 

 

 

보기에 대한 값을 담을 iValue

 

 

 

 

 

 

 

import lombok.Data;

@Data
public class Que {
 private int    iValue;
 private String sValue;
}

 

근데 여기서 신기한게 내 변수의 가운데 V는 대문자인데,

 

대문자로 쓰니까

인식을 못한다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

7. 결과를 받아와서 div에 뿌려준다.

   나는 9번을 뿌리기에 이렇게 해서 연속적인 차트를 만들었다.

<div class="demo-container"><div id="chart1"></div></div>
<div class="demo-container"><div id="chart2"></div></div>
<div class="demo-container"><div id="chart3"></div></div>
<div class="demo-container"><div id="chart4"></div></div>
<div class="demo-container"><div id="chart5"></div></div>
<div class="demo-container"><div id="chart6"></div></div>
<div class="demo-container"><div id="chart7"></div></div>
<div class="demo-container"><div id="chart8"></div></div>
<div class="demo-container"><div id="chart9"></div></div>

 

8. 문항에 대한건 컨트롤러에서 Map에다가 문제를 담아줬기에 이렇게 접근해서 사용 가능하다.

resultMap.put("que", que);
resultMap.put("result", List);

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

이게 문항 글씨 삐뚤뺴뚤 하기 때문에 

보기 싫었는데

 

결국 해결하지 못했다.