(구글 시각화 API) Gauge

결과물 보기: 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 data2 = new google.visualization.DataTable();
        data2.addColumn('string', 'Label');
        data2.addColumn('number', 'Value');
        data2.addRows(1);
        data2.setValue(0, 0, 'MB');
        data2.setValue(0, 1, 50);

var data3 = new google.visualization.DataTable();
        data3.addColumn('string', 'Label');
        data3.addColumn('number', 'Value');
        data3.addRows(1);
        data3.setValue(0, 0, 'KB/m');
        data3.setValue(0, 1, 50);

// Create and draw the visualization.
        new google.visualization.Gauge(document.getElementById('visualization')).
            draw(data2, {
                max: 5000,
                greenFrom: 0,
                greenTo: 3000,
                yellowFrom:3000,
                yellowTo: 4000,
                redFrom: 4000,
                redTo: 5000,
                majorTicks: ['0 GB', '', '', '', '', '5 GB'],
                minorTicks: 5
            });

new google.visualization.Gauge(document.getElementById('visualization2')).
            draw(data, {
                greenFrom: 0,
                greenTo: 50,
                yellowFrom:50,
                yellowTo: 75,
                redFrom: 75,
                redTo: 100,
                majorTicks: ['Empty', '', '', '', 'Full'],
                minorTicks: 5
            });

new google.visualization.Gauge(document.getElementById('visualization3')).
            draw(data3, {
                max: 4000,
                greenFrom: 0,
                greenTo: 2000,
                yellowFrom:2000,
                yellowTo: 3000,
                redFrom: 3000,
                redTo: 4000,
                //majorTicks: ['Empty', '', '50%','','Full'],
                minorTicks: 5
            });

});
</script>

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

저작자표시 비영리 변경금지

일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

(구글 시각화 API) Gauge

관련글

티스토리툴바