구글차트

라이브러리설정(pom.xml)

  • jackson-databind
 <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
		<!-- json데이터 바인딩을 위한 의존 라이브러리 -->
		<dependency>
		    <groupId>com.fasterxml.jackson.core</groupId>
		    <artifactId>jackson-databind</artifactId>
		    <version>2.13.1</version>
		</dependency>
  • json-simple
 <!-- https://mvnrepository.com/artifact/com.googlecode.json-simple/json-simple -->
			<dependency>
  			  <groupId>com.googlecode.json-simple</groupId>
  			  <artifactId>json-simple</artifactId>
   			  <version>1.1.1</version>
			</dependency>

data를 json형식으로 만드셍뇨

{
"cols":[
{"id":"", "label":"상품명","pattern":"", "type":"string"},
{"id":"", "label":"금액","pattern":"", "type":"number"}
],
"rows":[
{"c":[{"v":"귤"},{"v":35000}]},
{"c":[{"v":"딸기"},{"v":88000}]},
{"c":[{"v":"레몬"},{"v":16500}]},
{"c":[{"v":"오렌지"},{"v":20000}]},
{"c":[{"v":"키위"},{"v":30000}]},
{"c":[{"v":"포도"},{"v":15000}]}
]
}

controller

package kr.or.ddit.common;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

	
	@GetMapping("/chart01")
	public String chart01() {
		
		// forwarding
		return "chart/chart01";
				
	}
	
}

json

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<!-- 구글 차트를 호출하기 위한 js 파일 라이브러리-->
<script type="text/javascript" src="https://www.google.com/jsapi">

</script>
<title>구글차트01</title>
<script type="text/javascript">
	google.load("visualization", "1",{
		"packages":["corechart"]
	});
	
	//Callback: 구글 차트 로딩이  완료가 된 후에 drawChart라는 함수를실행
	//responseText : json 데이터를 텍스트로 읽어들임
	// JSON.stringify(j/s객체) : javascript 객체를 json데이터를 읽어들임
	google.setOnLoadCallback(drawChart);
	
	function drawChart(){
			var jsonData = $.ajax({
			url:"/resources/json/sampleData.json",
			dataType:"json",
			async:false
		}).responseText;
			
		console.log("jsonData: "+ jsonData);
		
		// 1) 데이터 테이블 생성
		var data = new google.visualization.DataTable(jsonData);
		
		// 2) 차트 출력할 영역 지정
		var chart = new google.visualization.ColumnChart(document.getElementById("chart_div"))
        
        // var chart = new google.visualization.LineChart(document.getElementById("chart_div"))
        
        //var chart = new google.visualization.PieChart(document.getElementById("chart_div"))
        
		// 1+2 = > 차트 출력
		// curveType:"function" = > 곡선
		chart.draw(data,{
			title:"차트 예제",
			curveType:"function",
			width:600,
			height:440
		});
	}
</script>
</head>
<body>
	<div id="chart_div"></div>
</body>
</html>
AWS S3 이미지 업로드하다 생긴일...
TIL 47 | Array, readonly, Tuple

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage