google.visualization.DataTable 값 셋팅하는 방법들에 대하여

Creating and Populating a DataTable

구글차트(Google Chart)를 그릴 때는 당연히 데이터가 필요로 하는데 그 데이터는 google.visualization.DataTable 객체에 삽입하여 차트로 바인딩 된다. 구글차트에 필요한 데이터 값을 정의 하는 방법은 3가지가 있다. 아래 예제들 및 설명은 홈페이지에 다 있는 내용이다.(https://developers.google.com/chart/interactive/docs/datatables_dataviews)

1. Empty DataTable + addColumn()/addRows()/addRow()/setCell()

첫번째 방법은 자바스크립트 상에서 비어있는 DataTable 객체를 만들어 놓고, 컬럼값들을 정의하고 그리고 데이터값들(rows)을 추가하는 방식이다. 예제를 하나 보자. 

// ------- Version 1------------
// Add rows + data at the same time
// -----------------------------
var data = new google.visualization.DataTable();

// Declare columns
data.addColumn('string', 'Employee Name');
data.addColumn('DateTime', 'Hire Date');

// Add data.
data.addRows([
  ['Mike', {v:new Date(2008,1,28), f:'February 28, 2008'}],
  ['Bob', new Date(2007,5,1)],
  ['Alice', new Date(2006,7,16)],
  ['Frank', new Date(2007,11,28)],
  ['Floyd', new Date(2005,3,13)],
  ['Fritz', new Date(2011,6,1)]
]);

소스는 어렵지 않다. DataTable 객체를 별다른 인자없이 그냥 생성하고, 컬럼값 정의를 한다. 어기서 컬럼값은 (데이터형식, 컬럼명) 이렇게 쌍으로 입력하게 된다. 데이터형식이 여러가지가 있으며 'string', 'number', 'boolean', 'date', 'datetime', 'timeofday' 이 중 하나를 선택해야 한다.

데이터 헤더부분을 잘 정의했으니, 데이터들을 셋팅해야 한다. 위 예제에서는 한번에 여러 row 들을 셋팅하는 addRows 를 사용하다보니, 셋팅되는 값은 [ ] 로 묶인 array 형식인데 그 안의 값들도 ['Employee Name'의 값, 'Hire Date'의 값] 이런 포맷의 array 형식으로 이루어져 있다. 

// ------- Version 2------------
// Add empty rows, then populate
// -----------------------------
var data = new google.visualization.DataTable();
  // Add columns
  data.addColumn('string', 'Employee Name');
  data.addColumn('date', 'Start Date');

  // Add empty rows
  data.addRows(6);
  data.setCell(0, 0, 'Mike');
  data.setCell(0, 1, {v:new Date(2008,1,28), f:'February 28, 2008'});
  data.setCell(1, 0, 'Bob');
  data.setCell(1, 1, new Date(2007, 5, 1));
  data.setCell(2, 0, 'Alice');
  data.setCell(2, 1, new Date(2006, 7, 16));
  data.setCell(3, 0, 'Frank');
  data.setCell(3, 1, new Date(2007, 11, 28));
  data.setCell(4, 0, 'Floyd');
  data.setCell(4, 1, new Date(2005, 3, 13));
  data.setCell(5, 0, 'Fritz');
  data.setCell(5, 1, new Date(2007, 9, 2));

두번째 예제는 좀 더 당황스럽다. 컬럼부분 정의하는 것까진 좋으나, 실질적으로 데이터를 셋팅할 때.. setCell 을 사용하고 있다. 여기서  cell 의 개념은 2차배열을 생각하면 쉬워진다. 위의 소스를 표로 표현해보면

column1(타입:string, 컬럼명:Employee Name)	column2 (타입:date, 컬럼명:Start Date)
cell 1 (위치:(0,0) 값:Mike)	cell 2 - 위치:(0,1) 값:Date(2008,1,28)
cell 3 (위치:(1,0) 값:Bob)	cell 4 - 위치:(1,1) 값:Date(2007, 5, 1)
cell 5 (위치:(2,0) 값:Alice)	cell 6 - 위치:(2,1) 값:Date(2006, 7, 16)
cell 7 (위치:(3,0) 값:Frank)	cell 8 - 위치:(3,1) 값:Date(2007, 11, 28)

대충 이런식이 된다. 위의 2개 예제는 웹브라우저에서 데이터를 입력받아 DataTable 을 만들 때나 유용하게 쓸 수 있다. 사실 웹서비스와 어울리는 방식은 아닌거 같다. 서버에서 값을 받아다 사용할 때, 문자열 객체를 자바스크립트 객체로 변환해서 바인딩하거나 loop 를 돌리면서 넣어야 하는 불편함이 있기에 이 방법은 추천하지 않는다. 특히 1000개 이상의 cell 을 정의하게 되면 브라우저마다 다르겠지만 속도가 느려질 수 있다고 구글도 경고 하고 있다.

2. arrayToDataTable()

두번째 방법은 DataTable 가 아닌 arrayToDataTable 함수를 이용하는 방식이다. 인자값으로 데이터를 넣어 객체 생성하는 방식으로 별도의 데이터 셋팅 함수들을 쓸 필요가 없다.

var data = google.visualization.arrayToDataTable([
  ['Employee Name', 'Salary'],
  ['Mike', {v:22500, f:'18,500'}],
  ['Bob', 35000],
  ['Alice', 44000],
  ['Frank', 27000],
  ['Floyd', 92000],
  ['Fritz', 18500]], false); // 'false' means that the first column is a label column.

많이 간편해졌다. 컬럼 따로, 데이터 따로 정의하던 것과는 달리 array 구조만 잘 정의해주면 첫번째 element 가 column 으로 인식하는 것으로 보인다. 단점이라고 함은.. column 에 데이터 타입을 정의하지 못한다는 것이다. 데이터타입을 정의를 못한다는 게 어떤의미이냐면 처음방식에서 보았던 new Date(2009,1,12) 이런건 더이상 값으로 넣을 수 없다는 것이다. type 을 date 나 datetime 뭐 이런걸 해줘야 하는데 type 을 정할 수 없으니, 인식이 불가능해진다. 하지만 구글차트 예제들을 홈페이지에서 보면 알겠지만 대부분의 예제들이 이방식으로 데이터를 만든다. 아주 심플하고 가독성이 좋아서 소스만 봐도 이해하기가 쉽다.

3. JavaScript Literal Initializer

세번째 방식은 좀 너무 원시적인 방식이다. DataTable 이 원하는 포맷의 자바스크립트 객체를 주고 객체 생성하면 된다.

var data = new google.visualization.DataTable(
   {
     cols: [{id: 'task', label: 'Employee Name', type: 'string'},
            {id: 'startDate', label: 'Start Date', type: 'date'}],
     rows: [{c:[{v: 'Mike'}, {v: new Date(2008, 1, 28), f:'February 28, 2008'}]},
            {c:[{v: 'Bob'}, {v: new Date(2007, 5, 1)}]},
            {c:[{v: 'Alice'}, {v: new Date(2006, 7, 16)}]},
            {c:[{v: 'Frank'}, {v: new Date(2007, 11, 28)}]},
            {c:[{v: 'Floyd'}, {v: new Date(2005, 3, 13)}]},
            {c:[{v: 'Fritz'}, {v: new Date(2011, 6, 1)}]}
           ]
   }
)

사실 제일 복잡하고 쓸데없어 보이지만, 이게 웹서비스와는 제일 잘맞는 구조같다. 위같은 포맷을 만들어주는 자바 클래스하나를 만들어서 서버쪽에서 JSON 문자열로 값만 내려주면 제일 쉽게 바로 바인딩 될거 같다. 그리고 원시적인 포맷인지라 모든 데이터 타입을 구현가능하며, 표현이 자유롭다. 소스를 보다보면 c, v, f 이런것들이 있다. cell, value, format 이라고 생각하면 된다. 큰 장점중에 하나가 1000개 이상의 cell 들을 가지고 있는 큰 데이터를 다룰때, 앞서 설명한 방법 두가지 방법에 비해 더 빠른처리를 보장하고 있다.

다음에는 이 세번째 방식에서 필요로 하는 JSON 표현식으로 변환하는 자바 클래스를 알아보자.

관련글

대시보드(Dashboard)에서 쓸만한 무료 차트 툴 - 구글 차트(Google Chart Tools)