[구글챠트] 솔루션없이도 클라이언트에서 구현하는 구글 챠트(Google Chart)
구글 개발자 페이지에서 여러 모양의 다양한 기능을 가진 챠트를 볼 수 있다. 일단 본인의 경우 관리하고 있는 사이트가 얼마나 지속적으로 정상적인 서비스를 제공하고 있는지를 수치화된 데이터와 챠트를 통해 시각화하고 싶은 욕구가 있었다. 일반적으로 웹사이트가 다운되지 않고 정상적으로 서비스를 제공하는 것에 대한 수치적 판단은 Uptime 데이터를 통해 할 수 있다. (Uptime이 무언지 알고 싶다면 'What is Uptime?'를 참고하면 도움이 될 것이다.) 이 데이터는 자신이 관리하는 웹사이트의 Uptime 결과 데이터를 제공하는 외부의 무료 웹서비스(http://www.uptimerobot.com/)를 통해 제공받고 있는데 최근 일주일이나 한달간 또는 서비스 개시부터 지금까지의 누적 Uptime 데이터를 % 형식으로 제공 받을수 있다. 만일 이 값이 100%라면 쉽게 말해 서비스가 개시후 지금까지 한번도 중단되지 않고 정상적으로 서비스되고 있다는 뜻으로 해석할 수 있다.
본인은 이렇게 얻은 데이터를 가지고 이 수치가 기준 수치 이하일 경우 빨간색으로 된 시각적 경고 표시를 보여주고 싶었는데 그것을 만족시켜줄 수 있는 가장 적합한 챠트가 바로 Gauge 챠트였다.
웹서비스가 얼마만큼 정상적으로 유지되고 있는지는 Uptime 수치 값을 통해 판단할 수 있지만 관련 지식이 부족한 관리자나 상위 조직장에게는 단순히 이러한 수치만으로는 의미있는 메시지 전달이 되지 못하기 때문에 이 수치가 현재 얼마이며 그 값이 통상적으로 경계해야 할 수준의 상태인건지 아니면 정상수준의 서비스를 제공하고 있는 상태인 것인지를 바로 알 수 있게 하는데는 게이지만한 시각적 의미전달 수단이 없을 것이라는 생각에서였다.
어쩃든...
구글이 제공한 예제를 보면 구현하는 것은 꽤 수월한 편이다. 많은 양의 코드가 필요하지 않다. 단순히 구글이 제공하는 자바스크립트만으로 클라이언트상에서 스크립트와 HTML 코드만으로 구현하는 것이기때문에 미리 정해진 데이터를 가지고 게이지 챠트를 그리는 것이라면 아주 쉽게 구현이 가능하다.
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:['gauge']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Memory', 80],
['CPU', 55],
['Network', 68]
]);
var options = {
width: 400, height: 120,
redFrom: 90, redTo: 100,
yellowFrom:75, yellowTo: 90,
minorTicks: 5
};
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id='chart_div'></div>
</body>
</html>
하지만 본인의 경우처럼 사이트별로 다른 데이터를 받아와 그 수치에 맞는 챠트를 보여주려한다면 ajax를 이용하여 실시간 챠트를 그려야 한다. 하지만 위의 코드를 통해 구글의 게이지 챠트가 어떻게 구현되는지 파악할 수 있다면 ajax를 이용한 실시간 챠트도 어렵지 않게 구현할 수 있다.
구글 게이지 챠트를 위해서는 기본적으로 3~5행의 자바스크립트 코드 선언부가 반드시 필요하다. 그리고 HTML 부분에서는 챠트를 그릴 대상이 되는 div 태그를 선언해두어야 한다. 이렇게 선언된 div 태그에 구글의 google.visualization.Gauge 클래스가 가진 draw 메소드를 호출하면 해당 div 영역에 게이지 챠트가 그려진다.