한글 데이터를 가지고 Google Chart 에 적용하기

구글차트(Google Chart)를 공부하고 있긴 한데.. 항상 영어데이터만 쓰다보니 한글로도 표현이 되는지 궁금해졌다. 될까 안될까..? 당연히 된다. 문자인코딩만 꼬이지 않으면 별다른 문제없이 한글데이터를 구글차트에서 볼 수 있다. 이제껏 구글차트에 대한 포스팅들을 잘 따라왔다면, 아래 몇단계만 더 소스를 추가해서 한글데이터를 무리없이 Ajax로 가져올 수 있다.

우선 문자인코딩을 선택해야한다.

여기서는 UTF-8로 선택하겠다. 우선 웹페이지 파일들이 어떤 인코딩으로 만들어졌는지 확인을 해야한다. 

우선 chart.html 을 오른쪽 클릭해서 propeties를 확인하면 아래와 같은 화면이 나온다.

보면 Text file encoding 이 있다. ISO-8859-1 이나 MS949 가 아닌지 확인하고 UTF-8 로 바꿔주자. 여기서는 chart.html 만 바꿔주면 문제가 없다. 사실 이렇게 파일들을 일일이 바꿔주지 않아도 이클립스 셋팅을 UTF-8 로 셋팅만 해놓으면 이클립스에서 만들어지는 파일들의 인코딩을 걱정하지 않아도 된다. 각자 검색해보시면 나온다.

인코딩 필터(Filter)를 사용하자.

클라이언트에서 Ajax 호출을 하면, 서버에서는 HttpServletResponse 객체에 setCharacterEncoding 메소드를 이용해서 UTF-8 을 셋팅하고 PrintWriter 객체에다 결과값을 넣어서 내려주기만 하면 된다. 간단하다. 하지만 모든 서블릿에 이짓을 해야 하는 건 불필요하다. 그리고 필터라는 아주 훌륭한 기능이 있으니 스프링에서 제공하는 CharacterEncodingFilter 클래스를 사용하도록 하자.

web.xml 파일에다가 아래 설정만 추가해주면 끝난다.

<filter>
	<filter-name>characterEncodingFilter</filter-name>
	<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
	<init-param>
		<param-name>encoding</param-name>
		<param-value>utf-8</param-value>
	</init-param>		
	<init-param>
		<param-name>forceEncoding</param-name>
		<param-value>true</param-value>
	</init-param>
</filter>
<filter-mapping>
	<filter-name>characterEncodingFilter</filter-name>
	<url-pattern>/*</url-pattern>
</filter-mapping>

encoding 은 UTF-8로, forceEncoding은 true로 셋팅한다. CharacterEncodingFilter 클래스가 궁금한 분은 여기를 클릭하세요.

한글 데이터를 만들어 내려보자.

HomeController 서블릿 클래스를 아래와 같이 수정하자. 

@RequestMapping(value = "/", method = RequestMethod.GET)
public String home(Locale locale, Model model, HttpServletResponse resp
		, PrintWriter out) throws IOException {
	
	logger.info(resp.getCharacterEncoding());
	
	GoogleChartDTO go = new GoogleChartDTO();
	go.addColumn("월별", "string");
	go.addColumn("(가) 제품", "number");
	go.addColumn("(나) 제품", "number");
	
	go.createRows(5);
	
	go.addCell(0, "201204", "4월");
	go.addCell(0, 70);
	go.addCell(0, 400);
	
	go.addCell(1, "201205", "5월");
	go.addCell(1, 556);
	go.addCell(1, 200);
	
	go.addCell(2, "201206", "6월");
	go.addCell(2, 798);
	go.addCell(2, 665);
	
	go.addCell(3, "201207", "7월");
	go.addCell(3, 312);
	go.addCell(3, 800);
	
	go.addCell(4, "201208", "8월");
	go.addCell(4, 780);
	go.addCell(4, 150);
	
	Gson gson = new Gson();
	String json = gson.toJson(go.getResult());
	
	logger.info(json);
	
	out.write(json);
	out.close();
	
	return null;
}

마지막으로 결과는.

WAS 를 시작하고 http://localhost:8080/chart-sample/resources/chart.html 주소로 들어가면 된다.

매번 영어로 된 예제만 보다가 한글을 보니 새롭다. 한글 적용 끝.

관련글

대시보드(Dashboard)에서 쓸만한 무료 차트 툴 - 구글 차트(Google Chart Tools)

JSP, 서블릿(servlet)에서 한글 깨짐 문제