* https://google-developers.appspot.com/chart/

 

* 사용 예
 

 

 

* 작업 순서

1. pom.xml 에  라이브러리 추가

 

		<dependency>

			<groupId>com.googlecode.json-simple</groupId>

			<artifactId>json-simple</artifactId>

			<version>1.1</version>

		</dependency>

 

2. 자바스크립트를 이용하여 차트 작성에 필요한 JSON 데이터를 리턴받아 화면에 출력시킴

 

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script>

	google.load('visualization', '1', {

		'packages' : [ 'corechart' ]

	});

	google.setOnLoadCallback(drawChart);

	function drawChart() {

		var jsonData = $.ajax({

			url : "${path}/json/sampleData.json",

			dataType : "json",

			async : false

		}).responseText;

		var data = new google.visualization.DataTable(jsonData);

		var chart = new google.visualization.PieChart(document

				.getElementById('chart_div'));

		chart.draw(data, {

			width : 400,

			height : 240

		});

	}

</script>

 

3. JSON 데이터의 형식

{

    "cols": [

        {"id":"","label":"Topping","pattern":"","type":"string"},

        {"id":"","label":"Slices","pattern":"","type":"number"}

    ],        

    "rows": [

        {"c":[{"v":"Mushrooms"},{"v":3}]},

        {"c":[{"v":"Onions"},{"v":1}]},

        {"c":[{"v":"Olives"},{"v":1}]},

        {"c":[{"v":"Zucchini"},{"v":1}]},

        {"c":[{"v":"Pepperoni"},{"v":2}]}

    ] 

}