티스토리 뷰

개발/html

Ajax로 JSON 데이터 가져와서 구글 차트(Google Chart Tools)에 적용하기

드림&T 2012. 9. 3. 21:06

Populating Data Using Server-Side Code


서버에서 가져온 데이터를 가지고 구글차트를 그려보자. 구글차트(Google Chart)는 대시보드에 사용될 일이 많은 툴이므로, Ajax로 데이터를 가져오는 것은 당연한 일이다. 역시나 구글차트 홈페이지에서도 Ajax를 이용한 데이터연동에 관한 매뉴얼이 있다.


https://developers.google.com/chart/interactive/docs/php_example


따라만 하면 어렵지 않게 사용할 수 있을 듯하다. 아래 예제 역시 모두 위 사이트에서 가져온 예제이다. html 및 javascript 소스 모두 동일하다. 따로 필요한 건 jquery 라이브러리이며, 이건 http://jquery.com/ 여기가서 받아오자.


아래 3개 파일을 만들자.



chart.html

<html>
	<head>
		<!--Load the AJAX API-->
		<script type="text/javascript" src="https://www.google.com/jsapi"></script>
		<script type="text/javascript" src="jquery-1.8.1.js"></script> 
		<script type="text/javascript" src="ajax-sample.js"></script>
	</head>

	<body>
		<!--Div that will hold the pie chart-->
		<div id="chart_div"></div>
		<button id="btn" type="button" onclick="drawChart()">reflesh</button>
	</body>
</html>

4 라인 : google 자바스크립트 모듈.

5 라인 : Ajax를 간단하게 사용할 수 있는 기능을 제공하는 jquery 를 받아 참조한다. 그냥 최신버전을 받았다.

6 라인 : Ajax로 JSON 데이터를 가져와 구글차트에 데이터를 매핑해서 차트를 갱신하는 로직이 있는 자바스크립트 파일.




ajax-sample.js

// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
 
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);

function drawChart() {
	var jsonData = $.ajax({
		url: "sampleData.json",
		dataType:"json",
		async: false
	}).responseText;
	
	// Create our data table out of JSON data loaded from server.
	var data = new google.visualization.DataTable(jsonData);

	// Instantiate and draw our chart, passing in some options.
	var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
	chart.draw(data, {width: 400, height: 240});
}

drawChar() 함수에서 Ajax 호출을 일으키며, sampledata.do 주소를 호출해서 데이터를 가져오려고 하고 있다. string 객체를 Object 형으로 변환하지 않고, 문자열 상태로 바로 google.visualization.DataTable 에 데이터를 넣고 있다.(15라인)



sampleData.json

{
	"cols": [
		{"id":"","label":"Topping","pattern":"","type":"string"},
		{"id":"","label":"Slices","pattern":"","type":"number"}
	],   
	
	"rows": [
		{"c":[{"v":"Mushrooms","f":null},{"v":3,"f":null}]},
		{"c":[{"v":"Onions","f":null},{"v":1,"f":null}]},
		{"c":[{"v":"Olives","f":null},{"v":1,"f":null}]},
		{"c":[{"v":"Zucchini","f":null},{"v":1,"f":null}]},
		{"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null}]}
	] 
}

google.visualization.DataTable 객체를 생성할 때 위와 같은 포맷의 JSON 표현식으로 주면 DataTable 객체가 한번에 만들어진다. rows 에 보면 c, v, f  이렇게 알수 없는 문자로 key 값이 있는 걸 볼 수 있다. c(=cell), v(= value), f(=format) 로 이해하면 될 듯하다.





이제 웹서비스만 만들면 위와 같은 그림의 이쁜 차트를 볼 수 있다.



반응형
저작자표시 비영리 변경금지
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/04   »
일 월 화 수 목 금 토
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
글 보관함