반응형
결과물 보기: http://simulz.kr/dev/counter/page/

예제 사이트에서는 트래픽을 게이지로 나타내보았다. %, MB, MB/분



먼저 아래처럼 자바스크립트를 연결해야 한다.

google.load("jquery", "1");
jQuery 코어를 연결하는 것으로 구글 시각화 API에서는 필요 없지만 편리한 작업을 위해 추가해주면 좋다.

google.load('visualization', '1', {packages:['gauge']});
구글 시각화 API 중 게이지 패키지를 가져온다.

adsense_728_1

var data = new google.visualization.DataTable();
표를 만들기 위해 구글 테이블 클래스를 data에 객체로 저장한다.

data.addColumn(형식, 이름);
표의 열 형식을 지정하는 것이다.
string은 문자열, number는 숫자. 이름은 테이블 열 제목인데 게이지에서는 입력한 값이 보이지 않는다.

data.addRows(1);
행의 갯수이다. 한 번에 표시할 게이지가 3개면 3을 입력한다.
여기서는 각각 설정을 다르게 했기 때문에 1을 입력했다.

data.setValue(0, 0, '%');
0, 0 위치는 위에서 지정한 Label로 게이지에 표시할 제목이다.

data.setValue(0, 1, 50);
0, 1 위치는 게이지가 표시할 값이다. 변수를 지정해주면 된다.

data.addRows(2) 이상으로 했다면
data.setValue(1, 0, '%');
data.setValue(1, 1, 50);
이렇게 행 번호를 증가시켜 추가해주면 된다.

adsense_728_2

new google.visualization.Gauge(document.getElementById('visualization')).draw()
설정한 ID를 가진 객체에 게이지를 표시한다.

여러 줄로 표현 가능하다.
var chart = new google.visualization.Gauge(document.getElementById('visualization')); 
       
var options = {: }; 
        chart
.draw(data, options);


draw 메서드를 보자.

draw(data2, {
data2 부분에는 처음에 테이블 객체를 저장한 변수명을 입력한다.

max: 5000,
게이지가 표시할 최대 값이다.

greenFrom: 0
초록색 구간 시작 위치

greenTo: 3000
초록색 구간 종료 위치

yellowFrom:3000
노란색 구간 시작 위치

yellowTo: 4000
노란색 구간 종료 위치

redFrom: 4000
빨간색 구간 시작 위치

redTo: 5000
빨간색 구간 종료 위치

majorTicks: ['0 GB', '', '', '', '', '5 GB']
굵은 눈금을 설정하는 것으로 값의 갯수는 굵은 눈금의 갯수이다.
입력한 값은 눈금에 표시된다.

minorTicks: 5
굵은 눈금 사이에 들어가는 작은 눈금의 갯수이다.

이 외에

min: 숫자
게이지가 표시할 최소 값이다.

width: 숫자
height: 숫자
게이지의 크기를 설정하며, 지정하지 않으면 자동으로 크기가 조정된다.

아래 처럼 DIV 엘레멘트에 style 속성으로 크기를 지정해주면 게이지 크기가 자동으로 조정된다.

※ 주의 할 것은 하나의 테이블에 여러 게이지 값을 설정하면 그 만큼 게이지 크기는 작아지게 된다.
게이지 크기는 컨테이너 크기 ÷ 게이지수 가 된다.


HTML 타입이 선언된 페이지에서는 출력이 안된다. 빨리 고쳐져야 할 문제이다.



구글 시각화 API 갤러리
http://code.google.com/intl/ko/apis/visualization/documentation/gallery.html
반응형

관련글