<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/view/include/tags.jspf"%>

<section class="content-header">
	<tg:menuInfoTag />
</section>

<section class="content">
	<div class="row">
		<div class="col-xs-12">
			<div class="box box-primary">
				<div class="box-header">
					<h3 class="box-title"><i class='material-icons' style='font-size:16px;'>play_arrow</i>&nbsp;&nbsp;피부테스트 결과 피부타입 통계</h3>
				</div>
				<div class="box-body" >
					<div class="box-body chart-responsive">
						<div id="bar-chart" class="chart" style="width:100%; height:300px;"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

<script>

	$(document).ready(function(){
		chatData();
	});

	function chatData() {
		$.ajax({
			url : "<c:url value='/system/stats/skinType.json' />",
			type : "POST",
			dataType : "json",
			success : function(result) {
				//chart 초기화
				$('#bar-chart').html('');

				Morris.Bar({
					element: 'bar-chart',
					data: result.data,
					xkey: 'skTyCd',
					ykeys: ['skTyCount'],
					labels: ['테스트결과'],
					lineColors: ['#3c8dbc'],
					hideHover: 'auto',
					resize: true	//반응형 리사이징 문제점 파악
				});
			},error : function(request,status,error) {
			}
		});
	}

</script>