[HTML] 구글 차트를 이용해서 “표준 vs. 실적[통계치]” 표시하기
구글 차트의 “간격 차트 유형“를 활용해서 “표준 vs 실적[최소값, 일사분위수, 중앙값, 삼사분위수, 최대값]”를 출력하는 그래프를 그려보도록 하겠습니다. 공정 관리를 위해 사용하면 좋습니다.
아래 HTML 코드를 저장 후 실행하면 위 이미지와 같이 그래프가 출력됩니다. 한 가지 알아둬야 할 사항은 date 타입 자료를 입력할 때 new Date(년, 월, 일) 형식으로 입력해야 합니다. 그리고 월은 0부터 11까지 입력합니다. 즉 1월은 “0”, 2월은 “1”, 12월은 “11”을 입력해야 합니다. 그리고 date 타입의 X축을 적용하면 입력되지 않은 날짜도 표시해 줍니다(위 그래프의 1월22일, 2월3일, 2월4일).( 오라클 데이터베이스로부터 일사분위수와 삼사분위수를 산출하는 방법을 참고하세요.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'x');
data.addColumn('number', '표준');
data.addColumn('number', '실적');
data.addColumn({id:'i0', type:'number', role:'interval'});
data.addColumn({id:'i1', type:'number', role:'interval'});
data.addColumn({id:'i2', type:'number', role:'interval'});
data.addColumn({id:'i3', type:'number', role:'interval'});
data.addColumn({id:'i4', type:'number', role:'interval'});
data.addRows([
//일자, 표준, 실적평균, 최소값, 일사분위수, 중앙값, 삼사분위수, 최대값
[new Date(2024, 0, 17), 21.957, 22.306, 22.256, 22.256, 22.256, 22.356, 22.406],
[new Date(2024, 0, 18), 21.957, 22.227, 21.955, 22.155, 22.256, 22.256, 22.456],
[new Date(2024, 0, 19), 21.957, 22.263, 22.005, 22.155, 22.256, 22.356, 22.456],
[new Date(2024, 0, 20), 21.957, 22.233, 21.744, 22.055, 22.256, 22.306, 22.757],
[new Date(2024, 0, 21), 21.957, 22.499, 21.855, 21.955, 22.556, 23.008, 23.409],
[new Date(2024, 0, 23), 21.957, 22.532, 22.256, 22.256, 22.506, 22.717, 23.008],
[new Date(2024, 0, 24), 21.957, 22.501, 22.256, 22.256, 22.406, 22.506, 22.837],
[new Date(2024, 0, 25), 21.957, 22.454, 22.256, 22.256, 22.356, 22.596, 22.607],
[new Date(2024, 0, 26), 21.957, 22.206, 22.055, 22.055, 22.155, 22.256, 22.356],
[new Date(2024, 0, 27), 21.957, 22.206, 22.055, 22.055, 22.155, 22.256, 22.356],
[new Date(2024, 0, 28), 21.957, 22.514, 22.256, 22.256, 22.356, 22.717, 22.727],
[new Date(2024, 0, 29), 21.957, 22.385, 22.155, 22.256, 22.356, 22.506, 22.757],
[new Date(2024, 0, 30), 21.957, 22.463, 21.975, 22.256, 22.406, 22.947, 22.947],
[new Date(2024, 0, 31), 21.957, 22.6, 22.356, 22.406, 22.456, 22.842, 22.917],
[new Date(2024, 1, 01), 21.957, 22.571, 22.256, 22.506, 22.556, 22.657, 22.907],
[new Date(2024, 1, 02), 21.957, 22.586, 22.256, 22.556, 22.556, 22.717, 22.807],
[new Date(2024, 1, 05), 21.957, 22.767, 22.506, 22.556, 22.687, 22.977, 23.208],
[new Date(2024, 1, 06), 21.957, 22.581, 22.256, 22.456, 22.627, 22.757, 22.807],
[new Date(2024, 1, 07), 21.957, 22.407, 22.206, 22.356, 22.406, 22.506, 22.566],
[new Date(2024, 1, 08), 21.957, 22.306, 21.955, 21.955, 22.356, 22.607, 22.607],
]);
var options = {
title: '표준 vs 실적[최소값, 일사분위수, 중앙값, 삼사분위수, 최대값]',
curveType:'function',
lineWidth: 4,
//X축의 날짜 출력 형식 변경
//hAxis: { format: 'yy/M/d/' },
series: [{'color': '#1A8763'}],
intervals: { 'lineWidth':2, 'barWidth': 0.5, style: 'boxes' },
legend: 'none',
chartArea: {width: '90%', height: "90%"},
};
var chart = new google.visualization.LineChart(document.getElementById('chart_lines'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_lines" style="height: 100%; width:100%;"></div>
</body>
</html>
