JS 그래프 삽입 + Ajax

 

Javascript 배열 강좌 (나는 필요한 초반만 봤다)

 

저기저 복잡해보이는 배열 때문에 겨우 겨우 했다.

늘 하기 전에는 정말 어렵고 오래걸리다가 하고 나면
왜 이렇게 쉬운 것 같은지 ..... 

이 시점에서 핵심은 저기 for 문 안인 것 같다.

[0] 부분, HashMap안의 ArrayList 그리고 ArrayList 안의 Hashmap을 잘 이해할 수 있게 된 부분이다.

function lineGraph(){
	let myChart = document.getElementById('myChart').getContext('2d');
	let massPopChart = new Chart(myChart, {
		type : 'line', // bar, horizontalBar, pie, line, doughnut, radar, polarArea;
		data : {
			labels : [],
			datasets : [ {
				label : '회원가입 수',
				data : []
//	 					backgroundColor : 'green' 
			} ]
		},
		options : {}
	});
	
	 var xmlhttp = new XMLHttpRequest();
	 xmlhttp.onreadystatechange = function(){
	  		if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
	  			var obj = this.responseText;
	  			var jsonObj = JSON.parse(obj);
	  			
	  			for(var x of jsonObj) { 
	  				massPopChart['data']['labels'].push(x.DDD);
	  				massPopChart['data']['datasets'][0]['data'].push(x.CNT);
	  			} 
			  			
	  		}
	 }
			 
	xmlhttp.open("post","${pageContext.request.contextPath}/manager/join_date_statistic.do");
	xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	xmlhttp.send();
			 
}

 

기타 채우기 옵션과 같은 것들은 아래 블로그를 참고하면 좋을 것 같다.

chart.js 라인(Line) 차트 Fill 옵션 정리