Google 시각화 API 참조

이 페이지에는 Google 시각화 API에서 노출된 객체와 모든 시각화에서 노출된 표준 메서드가 나와 있습니다.

참고: Google 시각화 API 네임스페이스는 google.visualization.*입니다.

DataTable 클래스

변경 가능한 2차원 값 표를 나타냅니다. DataTable (특정 값, 행 또는 열을 표시하도록 선택적으로 필터링됨)의 읽기 전용 사본을 만들려면 DataView를 만듭니다.

각 열에는 데이터 유형과 ID, 라벨, 패턴 문자열을 포함한 여러 선택적 속성이 할당됩니다.

또한 셀, 행, 열 또는 전체 테이블에 커스텀 속성 (이름/값 쌍)을 할당할 수 있습니다. 일부 시각화는 특정 맞춤 속성을 지원합니다. 예를 들어 표 시각화는 렌더링된 표 셀에 인라인 CSS 스타일 문자열을 할당할 수 있는 '스타일'이라는 셀 속성을 지원합니다. 시각화는 지원하는 커스텀 속성을 문서에 설명해야 합니다.

참고 항목: QueryResponse.getDataTable

생성자

문법

DataTable(opt_data, opt_version)

opt_data

[선택사항] 테이블을 초기화하는 데 사용되는 데이터입니다. 이는 채워진 테이블에서 DataTable.toJSON()를 호출하여 반환된 JSON이거나 테이블을 초기화하는 데 사용되는 데이터가 포함된 자바스크립트 객체일 수 있습니다. JavaScript 리터럴 객체의 구조는 여기에 설명되어 있습니다. 이 매개변수를 제공하지 않으면 빈 데이터 테이블이 새로 반환됩니다.

opt_version

[선택사항] 사용된 유선 프로토콜의 버전을 지정하는 숫자 값입니다. 차트 도구 데이터 소스 구현자만 사용합니다. 현재 버전은 0.6입니다.

세부정보

DataTable 객체는 시각화에 전달된 데이터를 보유하는 데 사용됩니다. DataTable는 기본적인 2차원 표입니다. 각 열의 모든 데이터는 동일한 데이터 유형을 가져야 합니다. 각 열에는 데이터 유형, 해당 열의 라벨(시각화로 표시될 수 있음), 열 색인 사용 대신 특정 열을 참조하는 데 사용할 수 있는 ID가 포함된 설명어가 있습니다. DataTable 객체는 특정 값, 행, 열 또는 전체 DataTable에 할당된 임의의 속성 맵도 지원합니다. 시각화는 이를 사용하여 추가 기능을 지원할 수 있습니다. 예를 들어 테이블 시각화는 맞춤 속성을 사용하여 개별 셀에 임의의 클래스 이름이나 스타일을 할당할 수 있도록 합니다.

표의 각 셀에는 값이 포함됩니다. 셀은 null 값 또는 열에 의해 지정된 유형의 값을 가질 수 있습니다. 셀은 선택적으로 '형식이 지정된' 버전의 데이터를 사용할 수 있습니다. 이는 시각화에 의해 표시되도록 형식이 지정된 문자열 버전의 데이터입니다. 시각화는 형식이 지정된 버전을 표시할 수 있지만 반드시 사용해야 하는 것은 아니지만 정렬이나 계산에 항상 데이터 자체를 사용합니다(예: 그래프에서 점을 배치할 위치 결정). 예를 들어 'low', 'medium', 'high' 값을 서식이 지정된 값으로 1, 2, 3의 숫자 셀 값에 할당할 수 있습니다.

생성자를 호출한 후 데이터 행을 추가하려면 단일 행에 addRow()를 호출하거나 여러 행에 대해 addRows()를 호출하면 됩니다. addColumn() 메서드를 호출하여 열을 추가할 수도 있습니다. 행과 열의 삭제 메서드도 있지만 행이나 열을 삭제하는 대신 DataTable의 선택적 뷰인 DataView를 만드는 것이 좋습니다.

시각화의 draw() 메서드에 전달된 후 DataTable의 값을 변경해도 차트가 즉시 변경되지는 않습니다. 변경사항을 반영하려면 draw()를 다시 호출해야 합니다.

참고: Google 차트는 데이터 테이블에 대한 유효성 검사를 실행하지 않습니다. 그렇게 하면 차트 렌더링 속도가 느려집니다. 열에 문자열이 필요한 위치에 숫자를 제공하거나 그 반대의 경우, Google 차트는 적절한 수준으로 값을 해석하기 위해 최선을 다하지만 오류가 있는 경우 이를 알리지 않습니다.

다음 예는 위의 자바스크립트 예와 동일한 데이터를 사용하여 리터럴 문자열로 DataTable를 인스턴스화하고 채우는 방법을 보여줍니다.

var dt = new google.visualization.DataTable({
    cols: [{id: 'task', label: 'Task', type: 'string'},
           {id: 'hours', label: 'Hours per Day', type: 'number'}],
    rows: [{c:[{v: 'Work'}, {v: 11}]},
           {c:[{v: 'Eat'}, {v: 2}]},
           {c:[{v: 'Commute'}, {v: 2}]},
           {c:[{v: 'Watch TV'}, {v:2}]},
           {c:[{v: 'Sleep'}, {v:7, f:'7.000'}]}]
    }, 0.6);

다음 예에서는 새로운 빈 DataTable를 만든 다음 수동으로 위와 동일한 데이터를 채웁니다.

var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows([
  ['Work', 11],
  ['Eat', 2],
  ['Commute', 2],
  ['Watch TV', 2],
  ['Sleep', {v:7, f:'7.000'}]
]);

방법

data.addRow();  // Add an empty row
data.addRow(['Hermione', new Date(1999,0,1)]); // Add a row with a string and a date value.

// Add a row with two cells, the second with a formatted value.
data.addRow(['Hermione', {v: new Date(1999,0,1),
                          f: 'January First, Nineteen ninety-nine'}
]);

data.addRow(['Col1Val', null, 'Col3Val']); // Second column is undefined.
data.addRow(['Col1Val', , 'Col3Val']);     // Same as previous.

data.addRows([
  ['Ivan', new Date(1977,2,28)],
  ['Igor', new Date(1962,7,5)],
  ['Felix', new Date(1983,11,17)],
  ['Bob', null] // No date set for Bob.
]);

var rowInds = data.getSortedRows([{column: 2}]);
for (var i = 0; i < rowInds.length; i++) {
  var v = data.getValue(rowInds[i], 2);
}

{"cols":[{"id":"Col1","label":"","type":"date"}],
 "rows":[
   {"c":[{"v":"a"},{"v":"Date(2010,10,6)"}]},
   {"c":[{"v":"b"},{"v":"Date(2010,10,7)"}]}
 ]
}

생성자의 JavaScript 리터럴 data 매개변수 형식

JavaScript 문자열 리터럴 객체를 data 매개변수에 전달하여 DataTable를 초기화할 수 있습니다. 이 객체를 data 객체라고 부르겠습니다. 아래 설명에 따라 이 객체를 직접 코딩할 수 있습니다. 또는 Python 사용 방법을 알고 사이트에서 사용할 수 있는 도우미 Python 라이브러리를 사용할 수도 있습니다. 하지만 객체를 직접 구성하려는 경우 이 섹션에서 구문을 설명합니다.

먼저 행 3개와 열 3개 (문자열, 숫자, 날짜 유형)가 있는 테이블을 설명하는 간단한 자바스크립트 객체의 예를 보여드리겠습니다.

{
  cols: [{id: 'A', label: 'NEW A', type: 'string'},
         {id: 'B', label: 'B-label', type: 'number'},
         {id: 'C', label: 'C-label', type: 'date'}
  ],
  rows: [{c:[{v: 'a'},
             {v: 1.0, f: 'One'},
             {v: new Date(2008, 1, 28, 0, 31, 26), f: '2/28/08 12:31 AM'}
        ]},
         {c:[{v: 'b'},
             {v: 2.0, f: 'Two'},
             {v: new Date(2008, 2, 30, 0, 31, 26), f: '3/30/08 12:31 AM'}
        ]},
         {c:[{v: 'c'},
             {v: 3.0, f: 'Three'},
             {v: new Date(2008, 3, 30, 0, 31, 26), f: '4/30/08 12:31 AM'}
        ]}
  ],
  p: {foo: 'hello', bar: 'world!'}
}

이제 문법을 설명해 보겠습니다.

data 객체는 두 가지 필수 최상위 속성인 cols 및 rows, 그리고 임의의 값의 맵인 선택적 p 속성으로 구성됩니다.

참고: 표시된 모든 속성 이름과 문자열 상수는 대소문자를 구분합니다. 또한 문자열 값을 사용하는 것으로 설명된 속성의 값은 따옴표로 묶어야 합니다. 예를 들어 유형 속성을 숫자로 지정하려면 type: 'number'와 같이 표현하지만 값 자체는 숫자로 표현하면 다음과 같습니다. v: 42

cols 속성

cols는 각 열의 ID와 유형을 설명하는 객체의 배열입니다. 각 속성은 다음 속성이 포함된 객체입니다 (대소문자 구분).

• type[필수] 열에 있는 데이터의 데이터 유형입니다. 다음 문자열 값을 지원합니다 (v: 속성의 예에는 나중에 설명되어 있음).
  • 'boolean' - 자바스크립트 불리언 값 ('true' 또는 'false')입니다. 예시 값: v:'true'
  • 'number' - 자바스크립트 숫자 값입니다. 값 예시: v:7 , v:3.14, v:-55
  • 'string' - 자바스크립트 문자열 값입니다. 예시 값: v:'hello'
  • 'date' - 시간이 잘리는 JavaScript 날짜 객체 (0 기준 월). 예시 값: v:new Date(2008, 0, 15)
  • 'datetime' - 시간을 포함한 자바스크립트 날짜 객체입니다. 예시 값: v:new Date(2008, 0, 15, 14, 30, 45)
  • 'timeofday' - 시(0은 자정), 분, 초, 밀리초(선택사항)를 나타내는 세 숫자의 배열이며 4번째 숫자(선택사항)를 나타냅니다. 값 예시: v:[8, 15, 0], v: [6, 12, 1, 144]
• id[선택사항] 열의 문자열 ID입니다. 테이블에서 고유해야 합니다. 기본 영숫자 문자를 사용하므로 호스트 페이지에서 자바스크립트 열에 액세스하기 위해 복잡한 이스케이프 처리가 필요하지 않습니다. JavaScript 키워드를 선택하지 않도록 주의하세요. 예: id:'col_1'
• label[선택사항] 일부 시각화에서 이 열에 표시하는 문자열 값입니다. 예: label:'Height'
• pattern[선택사항] 데이터 소스에서 숫자, 날짜 또는 시간 열 값의 형식을 지정하는 데 사용한 문자열 패턴입니다. 이는 참조용일 뿐이므로 패턴을 읽을 필요가 없으며 존재하지 않아도 됩니다. Google 시각화 클라이언트는 이 값을 사용하지 않습니다 (셀의 형식이 지정된 값을 읽음). DataTable가 format 절을 포함하는 쿼리에 대한 응답으로 데이터 소스에서 제공된 경우 해당 절에서 지정한 패턴이 이 값에 반환될 수 있습니다. 권장되는 패턴 표준은 ICU DecimalFormat 및 SimpleDateFormat 입니다.
• p [선택사항] 셀에 적용된 맞춤 값의 맵인 객체입니다. 이러한 값은 모든 자바스크립트 유형일 수 있습니다. 시각화에서 셀 수준 속성을 지원하는 경우 셀 수준 속성을 설명하며, 지원하지 않으면 이 속성은 무시됩니다. 예: p:{style: 'border: 1px solid green;'}.

cols 예

cols: [{id: 'A', label: 'NEW A', type: 'string'},
       {id: 'B', label: 'B-label', type: 'number'},
       {id: 'C', label: 'C-label', type: 'date'}]

rows 속성

rows 속성에는 행 객체의 배열이 포함됩니다.

각 행 객체에는 해당 행의 셀 배열인 c라는 필수 속성이 하나 있습니다. 또한 전체 행에 할당할 임의의 커스텀 값의 맵을 정의하는 p 속성(선택사항)도 있습니다. 시각화가 행 수준 속성을 지원하면 해당 속성을 설명합니다. 그렇지 않으면 이 속성이 무시됩니다.

셀 객체

표의 각 셀은 다음 속성을 가진 객체로 기술됩니다.

• v[선택사항] 셀 값입니다. 데이터 유형은 열 데이터 유형과 일치해야 합니다. 셀이 null이면 v 속성은 null이어야 하지만 여전히 f 및 p 속성을 보유할 수 있습니다.
• f[선택사항] 표시할 형식의 v 값의 문자열 버전입니다. 일반적으로 값은 일치하지만 반드시 일치하지는 않으므로 v에 Date(2008, 0, 1)를 지정하는 경우 이 속성에 '2008년 1월 1일' 또는 이와 같은 문자열을 지정해야 합니다. 이 값은 v 값과 대조하지 않습니다. 시각화는 이 값을 계산에 사용하지 않고 표시 라벨로만 사용합니다. 생략하면 v의 문자열 버전이 기본 형식 지정 도구를 사용하여 자동으로 생성됩니다. f 값은 자체 형식 지정 도구를 사용하여 수정하거나, setFormattedValue() 또는 setCell()로 설정하거나, getFormattedValue()로 검색할 수 있습니다.
• p [선택사항] 셀에 적용된 맞춤 값의 맵인 객체입니다. 이러한 값은 모든 자바스크립트 유형일 수 있습니다. 시각화에서 셀 수준 속성을 지원하는 경우 해당 속성을 설명합니다. 이러한 속성은 getProperty() 및 getProperties() 메서드로 가져올 수 있습니다. 예: p:{style: 'border: 1px solid green;'}.

행 배열의 셀은 cols의 열 설명과 순서가 같아야 합니다. null 셀을 표시하려면 null를 지정하거나, 배열의 셀을 비워두거나, 뒤에 나오는 배열 멤버를 생략하면 됩니다. 따라서 처음 두 셀에 null이 있는 행을 나타내려면 [ , , {cell_val}] 또는 [null, null, {cell_val}]를 지정하면 됩니다.

다음은 3개의 열이 있고 3개의 데이터 행으로 채워진 샘플 테이블 객체입니다.

{
  cols: [{id: 'A', label: 'NEW A', type: 'string'},
         {id: 'B', label: 'B-label', type: 'number'},
         {id: 'C', label: 'C-label', type: 'date'}
  ],
  rows: [{c:[{v: 'a'},
             {v: 1.0, f: 'One'},
             {v: new Date(2008, 1, 28, 0, 31, 26), f: '2/28/08 12:31 AM'}
        ]},
         {c:[{v: 'b'},
             {v: 2.0, f: 'Two'},
             {v: new Date(2008, 2, 30, 0, 31, 26), f: '3/30/08 12:31 AM'}
        ]},
         {c:[{v: 'c'},
             {v: 3.0, f: 'Three'},
             {v: new Date(2008, 3, 30, 0, 31, 26), f: '4/30/08 12:31 AM'}
        ]}
  ]
}

p 속성

테이블 수준 p 속성은 전체 DataTable에 적용된 맞춤 값의 맵입니다. 이러한 값은 모든 자바스크립트 유형일 수 있습니다. 시각화가 데이터 테이블 수준 속성을 지원하는 경우 해당 속성을 설명합니다. 그렇지 않으면 이 속성을 애플리케이션에서 사용할 수 있습니다. 예: p:{className: 'myDataTable'}.

DataView 클래스

기본 DataTable의 읽기 전용 뷰입니다. DataView를 사용하면 열 또는 행의 하위 집합만 선택할 수 있습니다. 또한 열/행 순서를 바꾸고 열/행을 복제할 수도 있습니다.

뷰는 데이터의 정적 스냅샷이 아닌 기본 DataTable의 라이브 창입니다. 하지만 여기에 설명된 것처럼 테이블 자체의 구조를 변경할 때는 주의해야 합니다.

• 기본 테이블에서 열을 추가하거나 삭제해도 뷰에는 반영되지 않으며, 뷰에서 예기치 않은 동작이 발생할 수 있습니다. 이러한 변경사항을 적용하려면 DataTable에서 새 DataView를 만들어야 합니다.
• 기본 테이블에서 행을 추가하거나 삭제해도 안전하며 변경사항이 뷰에 즉시 반영됩니다. 하지만 변경 후 시각화에서 draw()를 호출하여 새 행 집합을 렌더링해야 합니다. 참고로, setRows() or hideRows() 메서드 중 하나를 호출하여 뷰에서 행을 필터링했는데 기본 테이블에서 행을 추가하거나 삭제하면 예기치 않은 동작이 발생합니다. 새 테이블을 반영하려면 새 DataView를 만들어야 합니다.
• 기존 셀에서 셀 값을 변경하는 것은 안전하며 변경사항이 DataView에 즉시 전파됩니다. 하지만 새 셀 값을 렌더링하려면 이 변경 후 시각화에서 draw()를 호출해야 합니다.

다른 DataView에서 DataView를 만들 수도 있습니다. 기본 테이블 또는 뷰가 언급될 때마다 이 수준 바로 아래의 수준을 참조합니다. 즉, 이 DataView를 구성하는 데 사용된 데이터 객체를 나타냅니다.

DataView는 계산된 열도 지원합니다. 이 열은 사용자가 제공한 함수를 사용하여 즉시 값이 계산되는 열입니다. 예를 들어 이전 두 열의 합계인 열 또는 다른 열에서 날짜의 달력 분기를 계산하여 표시하는 열을 포함할 수 있습니다. 자세한 내용은 setColumns()를 참고하세요.

행이나 열을 숨기거나 표시하여 DataView를 수정해도 시각화에서 draw()를 다시 호출할 때까지 시각화가 영향을 받지 않습니다.

다음과 같이 DataView.getFilteredRows()와 DataView.setRows()를 결합하여 흥미로운 데이터 하위 집합이 포함된 DataView을 만들 수 있습니다.

var data = new google.visualization.DataTable();
data.addColumn('string', 'Employee Name');
data.addColumn('date', 'Start Date');
data.addRows(6);
data.setCell(0, 0, 'Mike');
data.setCell(0, 1, new Date(2008, 1, 28));
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));

// Create a view that shows everyone hired since 2007.
var view = new google.visualization.DataView(data);
view.setRows(view.getFilteredRows([{column: 1, minValue: new Date(2007, 0, 1)}]));
var table = new google.visualization.Table(document.getElementById('test_dataview'));
table.draw(view, {sortColumn: 1});

생성자

새 DataView 인스턴스를 만드는 방법에는 두 가지가 있습니다.

생성자 1

var myView = new google.visualization.DataView(data)

data

뷰를 초기화하는 데 사용되는 DataTable 또는 DataView입니다. 기본적으로 뷰에는 기본 데이터 테이블 또는 뷰의 모든 열과 행이 원래 순서로 포함됩니다. 이 뷰에서 행이나 열을 숨기거나 표시하려면 적절한 set...() 또는 hide...() 메서드를 호출합니다.

참고:

setColumns(), hideColumns(), setRows(), hideRows()를 제공합니다.

생성자 2

이 생성자는 직렬화된 DataView를 DataTable에 할당하여 새 DataView를 만듭니다. 이는 DataView.toJSON()를 사용하여 직렬화한 DataView를 다시 만드는 데 도움이 됩니다.

var myView = google.visualization.DataView.fromJSON(data, viewAsJson)

데이터

DataView를 만드는 데 사용한 DataTable 객체로, 여기에서 DataView.toJSON()를 호출했습니다. 이 테이블이 원본 테이블과 다르면 예측할 수 없는 결과를 얻게 됩니다.

viewAsJson

DataView.toJSON()에서 반환한 JSON 문자열입니다. data DataTable에서 표시하거나 숨길 행에 관한 설명입니다.

방법

// Show some columns directly from the underlying data.
// Shows column 3 twice.
view.setColumns([3, 4, 3, 2]);

// Underlying table has a column specifying a value in centimeters.
// The view imports this directly, and creates a calculated column
// that converts the value into inches.
view.setColumns([1,{calc:cmToInches, type:'number', label:'Height in Inches'}]);
function cmToInches(dataTable, rowNum){
  return Math.floor(dataTable.getValue(rowNum, 1) / 2.54);
}

ChartWrapper 클래스

ChartWrapper 클래스는 차트를 래핑하고 차트의 모든 로드, 그리기, 데이터 소스를 처리하는 데 사용됩니다. 이 클래스는 차트에 값을 설정하고 그리기 위한 편의 메서드를 노출합니다. 이 클래스를 사용하면 쿼리 콜백 핸들러를 만들 필요가 없으므로 데이터 소스에서 쉽게 읽을 수 있습니다. 차트를 쉽게 저장하여 재사용할 수도 있습니다.

ChartWrapper 사용의 또 다른 장점은 동적 로드를 사용하여 라이브러리 로드 수를 줄일 수 있다는 것입니다. 또한 ChartWrapper가 차트 패키지 조회 및 로드를 자동으로 처리하므로 패키지를 명시적으로 로드할 필요가 없습니다. 자세한 내용은 아래 예를 참고하세요.

그러나 ChartWrapper는 현재 차트에서 발생한 이벤트의 하위 집합(select, ready, error)만 전파합니다. 다른 이벤트는 ChartWrapper 인스턴스를 통해 전송되지 않습니다. 다른 이벤트를 가져오려면 다음과 같이 getChart()를 호출하고 차트 핸들에서 직접 이벤트를 구독해야 합니다.

var wrapper;
function drawVisualization() {

  // Draw a column chart
  wrapper = new google.visualization.ChartWrapper({
    chartType: 'ColumnChart',
    dataTable: [['Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'],
                [700, 300, 400, 500, 600, 800]],
    options: {'title': 'Countries'},
    containerId: 'visualization'
  });

  // Never called.
  google.visualization.events.addListener(wrapper, 'onmouseover', uselessHandler);

  // Must wait for the ready event in order to
  // request the chart and subscribe to 'onmouseover'.
  google.visualization.events.addListener(wrapper, 'ready', onReady);

  wrapper.draw();

  // Never called
  function uselessHandler() {
    alert("I am never called!");
  }

  function onReady() {
    google.visualization.events.addListener(wrapper.getChart(), 'onmouseover', usefulHandler);
  }

  // Called
  function usefulHandler() {
    alert("Mouseover event!");
  }
}

생성자

ChartWrapper(opt_spec)

opt_spec

[선택사항] - 차트를 정의하는 JSON 객체이거나 해당 객체의 직렬화된 문자열 버전입니다. 이 객체의 형식은 drawChart() 문서에 나와 있습니다. 지정하지 않으면 이 객체가 노출하는 set... 메서드를 사용하여 적절한 속성을 모두 설정해야 합니다.

방법

ChartWrapper는 다음과 같은 추가 메서드를 노출합니다.

이벤트

ChartWrapper 객체에서 다음 이벤트가 발생합니다. 이벤트가 발생하기 전에 ChartWrapper.draw()를 호출해야 합니다.

예시

다음 두 스니펫은 동일한 선 차트를 만듭니다. 첫 번째 예시에서는 JSON 리터럴 표기법을 사용하여 차트를 정의하고 두 번째 예시에서는 ChartWrapper 메서드를 사용하여 이러한 값을 설정합니다.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Visualization API Sample</title>
<!--
  One script tag loads all the required libraries!
-->
<script type="text/javascript"
      src='https://www.gstatic.com/charts/loader.js'></script>
<script>
  google.charts.load('current);
  google.charts.setOnLoadCallback(drawVisualization);

  function drawVisualization() {
    var wrap = new google.visualization.ChartWrapper({
       'chartType':'LineChart',
       'dataSourceUrl':'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
       'containerId':'visualization',
       'query':'SELECT A,D WHERE D > 100 ORDER BY D',
       'options': {'title':'Population Density (people/km^2)', 'legend':'none'}
       });
     wrap.draw();
  }
</script>
</head>
<body>
  <div id="visualization" style="height: 400px; width: 400px;"></div>
</body>
</html>

동일한 차트, 이제 setter 메서드를 사용합니다.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='content-type' content='text/html; charset=utf-8'/>
<title>Google Visualization API Sample</title>
<!-- One script tag loads all the required libraries!
-->
<script type="text/javascript"
    src='https://www.gstatic.com/charts/loader.js'></script>
<script type="text/javascript">
  google.charts.load('current');
  google.charts.setOnLoadCallback(drawVisualization);
  function drawVisualization() {
    // Define the chart using setters:
    var wrap = new google.visualization.ChartWrapper();
    wrap.setChartType('LineChart');
    wrap.setDataSourceUrl('http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1');
    wrap.setContainerId('visualization');
    wrap.setQuery('SELECT A,D WHERE D > 100 ORDER BY D');
    wrap.setOptions({'title':'Population Density (people/km^2)', 'legend':'none'});
    wrap.draw();
  }
</script>
</head>
<body>
  <div id='visualization' style='height: 400px; width: 400px;'></div>
</body>
</html>

ChartEditor 클래스

ChartEditor 클래스는 사용자가 즉시 시각화를 맞춤설정할 수 있는 인페이지 대화상자를 여는 데 사용됩니다.

ChartEditor를 사용하려면 다음 단계를 따르세요.

1. charteditor 패키지를 로드합니다. google.charts.load()에서 'charteditor' 패키지를 로드합니다. 편집기에서 렌더링하는 차트 유형의 패키지는 로드할 필요가 없습니다. 차트 편집기에서 필요에 따라 패키지를 자동으로 로드합니다.
2. 사용자가 맞춤설정할 차트를 정의하는 ChartWrapper 객체를 만듭니다. 이 차트가 대화상자에 표시되며, 사용자는 편집기를 사용하여 차트를 다시 디자인하거나, 차트 유형을 변경하거나, 소스 데이터를 변경할 수도 있습니다.
3. 새 ChartEditor 인스턴스를 만들고 'ok' 이벤트를 수신 대기하도록 등록합니다. 이 이벤트는 사용자가 대화상자에서 'OK' 버튼을 클릭하면 발생합니다. 수신되면 ChartEditor.getChartWrapper()를 호출하여 사용자가 수정한 차트를 검색해야 합니다.
4. ChartEditor.openDialog()를 호출하여 ChartWrapper를 전달합니다. 대화상자가 열립니다. 대화상자 버튼을 사용하면 사용자가 편집기를 닫을 수 있습니다. ChartEditor 인스턴스는 범위 내에 있는 한 사용할 수 있습니다. 사용자가 대화상자를 닫은 후에 자동으로 소멸되지 않습니다.
5. 코드에서 차트를 업데이트하려면 setChartWrapper()를 호출합니다.

방법

옵션

차트 편집기에서는 다음 옵션을 지원합니다.

이벤트

차트 편집기에서 다음과 같은 이벤트가 발생합니다.

예시

다음 예시 코드는 선 차트가 채워진 차트 편집기 대화상자를 엽니다. 사용자가 '확인'을 클릭하면 수정된 차트가 페이지의 지정된 <div>에 저장됩니다.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <title>
    Google Visualization API Sample
  </title>
  <script type="text/javascript"
    src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {packages: ['charteditor']});
  </script>
  <script type="text/javascript">
    google.charts.setOnLoadCallback(loadEditor);
    var chartEditor = null;

    function loadEditor() {
      // Create the chart to edit.
      var wrapper = new google.visualization.ChartWrapper({
         'chartType':'LineChart',
         'dataSourceUrl':'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
         'query':'SELECT A,D WHERE D > 100 ORDER BY D',
         'options': {'title':'Population Density (people/km^2)', 'legend':'none'}
      });

      chartEditor = new google.visualization.ChartEditor();
      google.visualization.events.addListener(chartEditor, 'ok', redrawChart);
      chartEditor.openDialog(wrapper, {});
    }

    // On "OK" save the chart to a <div> on the page.
    function redrawChart(){
      chartEditor.getChartWrapper().draw(document.getElementById('vis_div'));
    }

  </script>
</head>
<body>
  <div id="vis_div" style="height: 400px; width: 600px;"></div>
</body>
</html>

데이터 조작 방법

google.visualization.data 네임스페이스에는 DataTable 객체에서 SQL과 유사한 작업(예: 조인 또는 열 값별로 그룹화)을 수행하는 정적 메서드가 포함됩니다.

google.visualization.data 네임스페이스는 다음 메서드를 노출합니다.

group()

채워진 DataTable 객체를 취하고 SQL과 유사한 GROUP BY 작업을 수행하여 지정된 열 값별로 그룹화된 행이 있는 테이블을 반환합니다. 참고로, 입력 DataTable는 수정되지 않습니다.

반환된 테이블에는 지정된 키 열의 각 값 조합에 대한 행이 하나씩 포함됩니다. 각 행에는 키 열, 그리고 키 조합과 일치하는 모든 행에서 집계된 열 값이 있는 열 (예: 지정된 열에 있는 모든 값의 합계 또는 카운트)이 포함됩니다.

google.visualization.data 네임스페이스에는 몇 가지 유용한 집계 값(예: sum 및 count)이 포함되어 있지만 사용자가 직접 정의할 수도 있습니다 (예: standardDeviation 또는 secondHighest). 자체 애그리게이터를 정의하는 방법은 메서드 설명 뒤에 제공됩니다.

문법

google.visualization.data.group(data_table, keys, columns)

data_table

입력 DataTable입니다. group()를 호출해도 수정되지 않습니다.

keys

그룹화할 열을 지정하는 숫자 또는 객체의 배열입니다. 결과 테이블에는 이 배열의 모든 열과 열의 모든 열이 포함됩니다. 숫자인 경우 그룹화할 입력 DataTable의 열 색인입니다. 객체인 경우 지정된 열을 수정할 수 있는 함수가 포함됩니다 (예: 해당 열의 값에 1 추가). 객체에는 다음 속성이 있어야 합니다.

• column - 변환을 적용할 dt의 열 색인인 숫자입니다.
• modifier - 값 1개 (각 행의 해당 열에 있는 셀 값)를 허용하고 수정된 값을 반환하는 함수입니다. 이 함수는 그룹화를 지원하기 위해 열 값을 수정하는 데 사용됩니다. 예를 들어 날짜 열에서 분기를 계산하는 whatQuarter 함수를 호출하면 API가 행을 분기별로 그룹화할 수 있습니다. 계산된 값은 반환된 테이블의 키 열에 표시됩니다. 이 함수는 이 객체 내에서 인라인으로 선언할 수도 있고, 코드의 다른 곳에서 정의하는 함수일 수도 있습니다 (호출 범위 내에 있어야 함). API는 간단한 수정자 함수 하나를 제공합니다. 더 유용한 자체 함수를 만드는 방법은 여기를 참고하세요. 이 함수가 허용할 수 있는 데이터 유형을 알고 있어야 하며 해당 유형의 열에서만 이를 호출해야 합니다. 또한 이 함수의 반환 유형을 알고 있어야 하며 다음에 설명할 type 속성에서 이를 선언해야 합니다.
• type - 함수 modifier에서 반환하는 유형입니다. JavaScript 문자열 유형 이름(예: 'number' 또는 'boolean')이어야 합니다.
• label - [선택사항] 반환된 DataTable에서 이 열에 할당할 문자열 라벨입니다.
• id - [선택사항] 반환된 DataTable에서 이 열에 할당할 문자열 ID입니다.

예: [0], [0,2], [0,{column:1, modifier:myPlusOneFunc, type:'number'},2]

열

[선택사항] 출력 테이블에 키 열 외에도 포함할 열을 지정할 수 있습니다. 행 그룹의 모든 행은 단일 출력 행으로 압축되므로, 해당 행 그룹에 대해 표시할 값을 결정해야 합니다. 예를 들어 집합의 첫 번째 행에 있는 열 값을 표시하거나 해당 그룹에 있는 모든 행의 평균을 표시하도록 선택할 수 있습니다. columns는 객체의 배열이며 다음과 같은 속성이 있습니다.

• column - 표시할 열의 색인을 지정하는 숫자입니다.
• aggregate - 이 행 그룹에 있는 이 열의 모든 값의 배열을 수락하고 결과 행에 표시할 단일 값을 반환하는 함수입니다. 반환 값은 객체의 type 속성에 의해 지정된 유형이어야 합니다. 자체 집계 함수를 만드는 방법은 아래에 나와 있습니다. 이 메서드가 허용하는 데이터 유형을 알고 적절한 유형의 열에서만 호출해야 합니다. API는 여러 가지 유용한 집계 함수를 제공합니다. 목록은 아래의 제공된 집계 함수를 참조하고, 자체 집계 함수를 작성하는 방법은 집계 함수 만들기를 참조하세요.
• type - 집계 함수의 반환 유형입니다. JavaScript 문자열 유형 이름(예: 'number' 또는 'boolean')이어야 합니다.
• label - [선택사항] 반환된 테이블의 이 열에 적용할 문자열 라벨입니다.
• id - [선택사항] 반환된 테이블의 이 열에 적용할 문자열 ID입니다.

반환 값

keys에 나열된 각 열에 열이 한 개 있고 columns에 나열된 각 열에 열이 한 개씩 있는 DataTable. 표는 키 행을 기준으로 왼쪽에서 오른쪽으로 정렬됩니다.

예

// This call will group the table by column 0 values.
// It will also show column 3, which will be a sum of
// values in that column for that row group.
var result = google.visualization.data.group(
  dt,
  [0],
  [{'column': 3, 'aggregation': google.visualization.data.sum, 'type': 'number'}]
);

*Input table*
1  'john'  'doe'            10
1  'jane'  'doe'           100
3  'jill'  'jones'          50
3  'jack'  'jones'          75
5  'al'    'weisenheimer'  500

*Output table*
1  110
3  125
5  500

제공된 수정자 함수

API는 키에 전달할 수 있는 다음과 같은 수정자 함수를 제공합니다. modifier 매개변수를 사용하여 그룹화 동작을 맞춤설정합니다.

제공된 집계 함수

API는 열에 전달할 수 있는 다음과 같은 집계 함수를 제공합니다. aggregate 매개변수 배열입니다.

수정자 함수 만들기

group() 함수가 행을 그룹화하기 전에 수정자 함수를 만들어 간단한 onkey 값을 변환할 수 있습니다. 이 함수는 단일 셀 값을 취해 해당 셀 값에 대해 작업을 실행하고 (예: 값에 1을 추가) 반환합니다. 입력 및 반환 유형은 동일한 유형일 필요가 없지만 호출자는 입력 및 출력 유형을 알고 있어야 합니다. 다음은 날짜를 받아 분기를 반환하는 함수의 예입니다.

// Input type: Date
// Return type: number (1-4)
function getQuarter(someDate) {
  return Math.floor(someDate.getMonth()/3) + 1;
}

집계 함수 만들기

행 그룹에 열 값 집합을 적용하고 단일 숫자를 반환하는 집계 함수를 만들 수 있습니다(예: 값의 개수 또는 평균 반환). 다음은 행 그룹에 있는 행 수를 반환하는 제공된 개수 집계 함수를 구현한 것입니다.

// Input type: Array of any type
// Return type: number
function count(values) {
  return values.length;
}

join()

이 메서드는 SQL JOIN 문과 유사하게 두 데이터 테이블 (DataTable 또는 DataView 객체)을 단일 결과 테이블로 조인합니다. 두 테이블 사이에 열 쌍(키 열)을 한 개 이상 지정하면 지정한 조인 방법에 따라 두 키가 모두 일치하는 행만, 한 테이블의 모든 행 또는 두 테이블의 모든 행(키 일치 여부와 관계없이)에 따라 출력 테이블에 행이 포함됩니다. 결과 테이블에는 키 열과 사용자가 지정한 추가 열만 포함됩니다. dt2는 중복 키를 가질 수 없지만 dt1은 중복 키를 가질 수 있습니다. '키'라는 용어는 특정 키 열 값이 아닌 모든 키 열 값의 조합을 의미합니다. 따라서 행에 셀 값이 A | B | C이고 0과 1 열이 키 열이면 해당 행의 키는 AB입니다.

문법

google.visualization.data.join(dt1, dt2, joinMethod,
                                 keys, dt1Columns, dt2Columns);

dt1

dt2와 조인하기 위해 채워진 DataTable입니다.

dt2

dt1과 조인하기 위해 채워진 DataTable입니다. 이 테이블에는 동일한 키가 여러 개 있을 수 없습니다 (키는 키 열 값의 조합임).

joinMethod

조인 유형을 지정하는 문자열입니다. dt1에 dt2 행과 일치하는 행이 여러 개 있는 경우, 출력 테이블에 일치하는 dt1 행이 모두 포함됩니다. 다음 값 중에서 선택합니다.

• 'full' - 출력 테이블에는 키가 일치하는지 여부에 관계없이 두 테이블의 모든 행이 포함됩니다. 일치하지 않는 행에는 null 셀 항목이 있으며 일치하는 행이 결합됩니다.
• 'inner' - 키가 일치하는 행만 포함하도록 필터링된 전체 조인입니다.
• 'left' - dt2에서 일치하는 행이 있는지 여부에 관계없이 출력 테이블에 dt1의 모든 행이 포함됩니다.
• 'right' - 출력 테이블에는 dt1에서 일치하는 행이 있는지 여부와 관계없이 dt2의 모든 행이 포함됩니다.

keys

두 테이블에서 비교할 키 열의 배열입니다. 각 쌍은 2개 요소 배열이며 첫 번째는 dt1의 키, 두 번째는 dt2의 키입니다. 이 배열은 색인, ID 또는 라벨로 열을 지정할 수 있습니다. getColumnIndex를 참조하세요.
두 표에서 열은 동일한 유형이어야 합니다. 테이블의 행을 포함하려면 지정된 모든 키가 joinMethod에서 제공된 규칙에 따라 일치해야 합니다. 키 열은 항상 출력 테이블에 포함됩니다. 왼쪽 테이블인 dt1만 중복 키를 포함할 수 있습니다. dt2의 키는 고유해야 합니다. 여기서 '키'는 개별 열 값이 아니라 고유한 키 열 집합을 의미합니다. 예를 들어 키 열이 A와 B인 경우 다음 테이블에는 고유한 키 값만 포함됩니다 (따라서 dt2로 사용될 수 있음).

A	B
젠	빨간색
젠	파란색
프레드	빨간색

예: [[0,0], [2,1]]는 두 테이블의 첫 번째 열과 dt1의 세 번째 열의 값을 dt1의 두 번째 열과 비교합니다.

dt1Columns

dt1의 키 열 외에 출력 테이블에 포함할 dt1의 열 배열입니다. 이 배열은 색인, ID 또는 라벨로 열을 지정할 수 있습니다. getColumnIndex를 참조하세요.

dt2Columns

dt2의 키 열 외에 출력 테이블에 포함할 dt2의 열 배열입니다. 이 배열은 색인, ID 또는 라벨로 열을 지정할 수 있습니다. getColumnIndex를 참조하세요.

반환 값

키 열, dt1Columns 및 dt2Columns가 있는 DataTable입니다. 이 테이블은 키 열을 기준으로 왼쪽에서 오른쪽으로 정렬됩니다. joinMethod가 'inner'이면 모든 키 셀이 채워져야 합니다. 다른 조인 메서드의 경우 일치하는 키가 없으면 테이블에 일치하지 않는 키 셀에 대해 null이 포함됩니다.

예시

*Tables*
dt1                        dt2
bob  | 111 | red           bob   | 111 | point
bob  | 111 | green         ellyn | 222 | square
bob  | 333 | orange        jane  | 555 | circle
fred | 555 | blue          jane  | 777 | triangle
jane | 777 | yellow        fred  | 666 | dodecahedron
* Note that right table has duplicate Jane entries, but the key we will use is
* columns 0 and 1. The left table has duplicate key values, but that is
* allowed.

*Inner join* google.visualization.data.join(dt1, dt2, 'inner', [[0,0],[1,1]], [2], [2]);
bob  | 111 | red    | point
bob  | 111 | green  | point
jane | 777 | yellow | triangle
* Note that both rows from dt1 are included and matched to
* the equivalent dt2 row.


*Full join* google.visualization.data.join(dt1, dt2, 'full', [[0,0],[1,1]], [2], [2]);
bob   | 111 | red    | point
bob   | 111 | green  | point
bob   | 333 | orange | null
ellyn | 222 | null | square
fred  | 555 | blue   | null
fred  | 666 | null | dodecahedron
jane  | 555 | null | circle
jane  | 777 | yellow | triangle


*Left join*  google.visualization.data.join(dt1, dt2, 'left', [[0,0],[1,1]], [2], [2]);
bob  | 111 | red | point
bob  | 111 | green | point
bob  | 333 | orange | null
fred | 555 | blue | null
jane | 777 | yellow | triangle


*Right join*  google.visualization.data.join(dt1, dt2, 'right', [[0,0],[1,1]], [2], [2]);
bob   | 111 | red | point
bob   | 111 | green | point
ellyn | 222 | null | square
fred  | 666 | null | dodecahedron
jane  | 555 | null | circle
jane  | 777 | yellow | triangle

포맷터

Google 시각화 API는 시각화에서 데이터 형식을 다시 지정하는 데 사용할 수 있는 형식 지정 도구를 제공합니다. 이러한 형식 지정 도구는 모든 행에서 지정된 열의 형식이 지정된 값을 변경합니다. 참고:

• formatter는 기본 값이 아닌 형식이 지정된 값만 수정합니다. 예를 들어 표시되는 값은 '$1,000.00'이지만 기본값은 여전히 '1000'입니다.
• 형식 지정자는 한 번에 하나의 열에만 영향을 미칩니다. 여러 열의 형식을 다시 지정하려면 변경하려는 각 열에 형식 지정 도구를 적용합니다.
• 사용자 정의 형식 지정 도구도 사용하는 경우 특정 Google 시각화 형식 지정 도구가 모든 사용자 정의 형식 지정 도구를 재정의합니다.

데이터에 적용되는 실제 형식은 API가 로드된 언어에서 파생됩니다. 자세한 내용은 특정 언어로 차트 로드 를 참고하세요.

중요: Formatter는 DataTable에만 사용할 수 있으며 DataView와 함께 사용할 수 없습니다 (DataView 객체는 읽기 전용임).

형식 지정 도구를 사용하는 일반적인 단계는 다음과 같습니다.

1. 채워진 DataTable 객체를 가져옵니다.
2. 형식을 다시 지정할 각 열에 대해 다음 안내를 따릅니다.
   1. 형식 지정 도구의 모든 옵션을 지정하는 객체를 만듭니다. 속성과 값 집합을 포함하는 기본 자바스크립트 객체입니다. 지원되는 속성을 확인하려면 형식 지정 도구의 문서를 참고하세요. (선택사항) 옵션을 지정하는 객체 리터럴 표기법 객체를 전달할 수 있습니다.
   2. 형식 지정 클래스를 만들어 옵션 객체에 전달합니다.
   3. formatter.format(table, colIndex)를 호출하여 DataTable과 형식을 다시 지정할 데이터의 열 번호 (0부터 시작)를 전달합니다. 각 열에 단일 형식 지정 도구만 적용할 수 있습니다. 두 번째 형식 지정 도구를 적용하면 첫 번째 형식 지정 도구의 효과만 덮어씁니다.
      중요: 대부분의 형식 지정 도구에서 특수 형식을 표시하려면 HTML 태그가 필요합니다. 시각화에서 allowHtml 옵션을 지원하는 경우 true로 설정해야 합니다.

다음은 날짜 열의 형식이 지정된 날짜 값을 긴 날짜 형식 ('2009년 1월 1일')을 사용하도록 변경하는 예시입니다.

var data = new google.visualization.DataTable();
data.addColumn('string', 'Employee Name');
data.addColumn('date', 'Start Date');
data.addRows(3);
data.setCell(0, 0, 'Mike');
data.setCell(0, 1, new Date(2008, 1, 28));
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));

// Create a formatter.
// This example uses object literal notation to define the options.
var formatter = new google.visualization.DateFormat({formatType: 'long'});

// Reformat our data.
formatter.format(data, 1);

// Draw our data
var table = new google.visualization.Table(document.getElementById('dateformat_div'));
table.draw(data, {showRowNumber: true});

대부분의 형식 지정 도구는 다음 두 메서드를 노출합니다.

메서드	설명
google.visualization.formatter_name(options)	생성자. 여기서 formatter_name은 구체적인 형식 지정 클래스 이름입니다. options - 해당 형식 지정 도구의 옵션을 지정하는 일반 자바스크립트 객체입니다. 이 객체는 해당 형식 지정 도구 관련 속성이 있는 속성/값 쌍이 있는 일반 객체입니다. 지원되는 옵션을 알아보려면 특정 형식 지정 도구에 대한 문서를 참조하세요. 다음은 DateFormat 객체의 생성자를 호출하여 두 속성을 전달하는 두 가지 방법의 예입니다. // Object literal technique var formatter = new google.visualization.DateFormat({formatType: 'long', timeZone: -5}); // Equivalent property setting technique var options = new Object(); options['formatType'] = 'long'; options['timeZone'] = -5; var formatter = new google.visualization.DateFormat(options);
format(data, colIndex)	지정된 열의 데이터 형식을 다시 지정합니다. data - 형식을 다시 지정할 데이터가 포함된 DataTable입니다. 여기서는 데이터 보기를 사용할 수 없습니다. colIndex - 서식을 지정할 열의 0부터 시작하는 색인입니다. 여러 열의 서식을 지정하려면 이 메서드를 서로 다른 colIndex 값을 사용하여 여러 번 호출해야 합니다.

 

Google 시각화 API는 다음 형식 지정 도구를 제공합니다.

형식 지정 도구 이름	설명
ArrowFormat	셀 값이 지정된 값보다 높은지 낮은지 나타내는 위쪽 또는 아래쪽 화살표를 추가합니다.
BarFormat	셀 값이 지정된 값보다 높은지 낮은지 나타내는 방향과 색상으로 색상이 지정된 막대를 추가합니다.
ColorFormat	값이 지정된 범위에 속하는지 여부에 따라 셀의 색상을 지정합니다.
DateFormat	'2009년 1월 1일', '1/1/09', '2009년 1월 1일' 등 다양한 방식으로 날짜 또는 DateTime 값의 형식을 지정합니다.
NumberFormat	숫자 값의 다양한 측면의 형식을 지정합니다.
PatternFormat	동일한 행의 셀 값을 임의의 텍스트와 함께 지정된 셀에 연결합니다.

ArrowFormat

값이 지정된 기본값보다 높은지 낮은지에 따라 숫자 셀에 위쪽 또는 아래쪽 화살표를 추가합니다. 밑과 같으면 화살표가 표시되지 않습니다.

옵션

ArrowFormat는 생성자에 전달되는 다음 옵션을 지원합니다.

옵션	설명
base	밑 값을 나타내는 숫자로, 셀 값과 비교하는 데 사용됩니다. 셀 값이 높으면 셀에 녹색 위쪽 화살표가 표시되고 셀 값이 낮으면 빨간색 아래쪽 화살표가 표시되고, 값이 같으면 화살표가 없습니다.

샘플 코드

var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues Change');
data.addRows([
  ['Shoes', {v:12, f:'12.0%'}],
  ['Sports', {v:-7.3, f:'-7.3%'}],
  ['Toys', {v:0, f:'0%'}],
  ['Electronics', {v:-2.1, f:'-2.1%'}],
  ['Food', {v:22, f:'22.0%'}]
]);

var table = new google.visualization.Table(document.getElementById('arrowformat_div'));

var formatter = new google.visualization.ArrowFormat();
formatter.format(data, 1); // Apply formatter to second column

table.draw(data, {allowHtml: true, showRowNumber: true});

BarFormat

숫자 셀에 색상 막대를 추가하여 셀 값이 지정된 기준보다 높은지 아니면 낮은지를 나타냅니다.

옵션

BarFormat는 생성자에 전달되는 다음 옵션을 지원합니다.

옵션	예시 설명
base	셀 값을 비교할 밑 값입니다. 셀 값이 더 높으면 기본 값이 오른쪽에 그려지고, 값이 낮을 경우 왼쪽에 그려집니다. 기본값은 0입니다.
colorNegative	막대의 음수 값 섹션을 나타내는 문자열입니다. 가능한 값은 'red', 'green', 'blue'입니다. 기본값은 'red'입니다.
colorPositive	막대의 양수 값 섹션 색상을 나타내는 문자열입니다. 가능한 값은 'red', 'green', 'blue'입니다. 기본값은 'blue'입니다.
drawZeroLine	음수 값이 있을 때 1픽셀의 어두운 기준선을 그릴지 여부를 나타내는 불리언입니다. 어두운 선은 막대를 시각적으로 쉽게 스캔할 수 있도록 표시됩니다. 기본값은 'false'입니다.
max	막대 범위의 최대 숫자 값입니다. 기본값은 표에서 가장 높은 값입니다.
min	막대 범위의 최솟값입니다. 기본값은 표에서 가장 낮은 값입니다.
showValue	True인 경우 값과 막대가 표시되고 False인 경우 막대만 표시됩니다. 기본값은 true입니다.
width	각 막대의 두께(픽셀)입니다. 기본값은 100입니다.

샘플 코드

var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues');
data.addRows([
  ['Shoes', 10700],
  ['Sports', -15400],
  ['Toys', 12500],
  ['Electronics', -2100],
  ['Food', 22600],
  ['Art', 1100]
]);

var table = new google.visualization.Table(document.getElementById('barformat_div'));

var formatter = new google.visualization.BarFormat({width: 120});
formatter.format(data, 1); // Apply formatter to second column

table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

ColorFormat

셀 값에 따라 숫자 셀의 전경 또는 배경에 색상을 할당합니다. 이 형식 지정 도구는 생성자에서 옵션을 사용하지 않는다는 점에서 일반적이지 않습니다. 대신, format()를 호출하기 전에 원하는 횟수만큼 addRange() 또는 addGradientRange()를 호출하여 색상 범위를 추가해야 합니다. 색상은 허용되는 모든 HTML 형식(예: 'black', '#000000' 또는 '#000')으로 지정할 수 있습니다.

방법

ColorFormat는 다음 메서드를 지원합니다.

메서드	설명
google.visualization.ColorFormat()	생성자입니다. 인수를 사용하지 않습니다.
addRange(from, to, color, bgcolor)	셀 값에 따라 셀의 전경 색상 또는 배경 색상을 지정합니다. 지정된 from~to 범위의 값이 있는 셀에는 color 및 bgcolor가 할당됩니다. 범위는 포괄적이지 않습니다. 1~1,000 사이의 범위를 만들고 1,000~2,000에서 초의 범위를 만들면 값 1,000이 포함되지 않기 때문입니다. from - [String, Number, Date, DateTime 또는 TimeOfDay] 범위의 하한(해당 값 포함)이거나 null입니다. null이면 -∞와 일치합니다. 문자열 경계는 문자열 값과 알파벳순으로 비교됩니다. to - [String, Number, Date, DateTime, TimeOfDay] 범위의 상한값(경계에 포함되지 않음)이거나 null입니다. null이면 +∞과 일치합니다. 문자열 경계는 문자열 값과 알파벳순으로 비교됩니다. 색상 - 일치하는 셀의 텍스트에 적용할 색상입니다. 값은 '#RRGGBB' 값이거나 정의된 색상 상수(예: '#FF0000' 또는 'red')일 수 있습니다. bgcolor - 일치하는 셀의 배경에 적용할 색상입니다. 값은 '#RRGGBB' 값 또는 정의된 색상 상수(예: '#FF0000' 또는 'red')일 수 있습니다.
addGradientRange(from, to, color, fromBgColor, toBgColor)	셀 값에 따라 범위에서 배경 색상을 할당합니다. 하한 경계 색상에서 상한 경계 색상까지의 범위 내에 있는 셀 값과 일치하도록 색상이 조정됩니다. addRange()처럼 이 메서드는 문자열 값을 비교할 수 없습니다. 도움말: 색상 범위는 시청자가 정확하게 측정하기 어려운 경우가 많습니다. 가장 간단하고 읽기 쉬운 범위는 완전히 채도가 높은 색상에서 흰색 (예: #FF0000~FFFFFF). from - [Number, Date, DateTime 또는 TimeOfDay] 범위의 하한(해당 값 포함)이거나 null입니다. null이면 -∞와 일치합니다. to - [Number, Date, DateTime 또는 TimeOfDay] 범위의 상한 경계(포함되지 않음)이거나 null입니다. null이면 +∞과 일치합니다. 색상 - 일치하는 셀의 텍스트에 적용할 색상입니다. 이 색상은 값에 관계없이 모든 셀에서 동일합니다. fromBgColor - 그라데이션의 낮은 끝 부분에 값을 포함하는 셀의 배경 색상입니다. 값은 '#RRGGBB' 값 또는 정의된 색상 상수(예: '#FF0000' 또는 'red')일 수 있습니다. toBgColor - 그라데이션의 상한에 값을 포함하는 셀의 배경 색상입니다. 값은 '#RRGGBB' 값 또는 정의된 색상 상수(예: '#FF0000' 또는 'red')일 수 있습니다.
format(dataTable, columnIndex)	지정된 열에 서식을 적용하는 표준 format() 메서드입니다.

샘플 코드

var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues');
data.addRows([
  ['Shoes', 10700],
  ['Sports', -15400],
  ['Toys', 12500],
  ['Electronics', -2100],
  ['Food', 22600],
  ['Art', 1100]
]);

var table = new google.visualization.Table(document.getElementById('colorformat_div'));

var formatter = new google.visualization.ColorFormat();
formatter.addRange(-20000, 0, 'white', 'orange');
formatter.addRange(20000, null, 'red', '#33ff33');
formatter.format(data, 1); // Apply formatter to second column

table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

DateFormat

'2016년 1월 1일', '1/1/16', '2016년 1월 1일' 등 다양한 방식으로 JavaScript Date 값의 형식을 지정합니다.

옵션

DateFormat는 생성자에 전달되는 다음 옵션을 지원합니다.

옵션	설명
formatType	날짜의 빠른 형식 지정 옵션입니다. 지원되는 문자열 값은 다음과 같이 2016년 2월 28일 날짜 형식을 다시 지정합니다. 'short' - 짧은 형식: 예: '2/28/16' 'medium' - 중간 형식: 예: '2016년 2월 28일' 'long' - 긴 형식: 예: '2016년 2월 28일' formatType와 pattern를 모두 지정할 수는 없습니다.
pattern	ICU 날짜 및 시간 형식과 비슷한 값에 적용할 커스텀 형식 패턴입니다. 예: var formatter3 = new google.visualization.DateFormat({pattern: "EEE, MMM d, ''yy"}); formatType와 pattern를 모두 지정할 수는 없습니다. 패턴에 대한 자세한 내용은 다음 섹션에서 확인할 수 있습니다.
timeZone	날짜 값을 표시할 시간대입니다. GMT + 이 시간대의 수를 나타내는 숫자 값입니다 (음수일 수 있음). 기본적으로 날짜 객체는 객체가 생성된 컴퓨터의 상정된 시간대를 사용하여 생성됩니다. 이 옵션은 해당 값을 다른 시간대로 표시하는 데 사용됩니다. 예를 들어 영국 그리니치에 위치한 컴퓨터에서 날짜 객체를 오후 5시로 만들고 시간대를 -5(options['timeZone'] = -5 또는 미국의 동부 태평양 표준시)로 지정한 경우 표시되는 값은 정오 12시가 됩니다.

방법

DateFormat는 다음 메서드를 지원합니다.

메서드	설명
google.visualization.DateFormat(options)	생성자입니다. 자세한 내용은 위의 옵션 섹션을 참조하세요.
format(dataTable, columnIndex)	지정된 열에 형식을 적용하는 표준 format() 메서드입니다.
formatValue(value)	지정된 값의 형식이 지정된 값을 반환합니다. 이 메서드에는 DataTable가 필요하지 않습니다.

샘플 코드

function drawDateFormatTable() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Employee Name');
  data.addColumn('date', 'Start Date (Long)');
  data.addColumn('date', 'Start Date (Medium)');
  data.addColumn('date', 'Start Date (Short)');
  data.addRows([
    ['Mike', new Date(2008, 1, 28, 0, 31, 26),
             new Date(2008, 1, 28, 0, 31, 26),
             new Date(2008, 1, 28, 0, 31, 26)],
    ['Bob', new Date(2007, 5, 1, 0),
            new Date(2007, 5, 1, 0),
            new Date(2007, 5, 1, 0)],
    ['Alice', new Date(2006, 7, 16),
              new Date(2006, 7, 16),
              new Date(2006, 7, 16)]
  ]);

  // Create three formatters in three styles.
  var formatter_long = new google.visualization.DateFormat({formatType: 'long'});
  var formatter_medium = new google.visualization.DateFormat({formatType: 'medium'});
  var formatter_short = new google.visualization.DateFormat({formatType: 'short'});

  // Reformat our data.
  formatter_long.format(data, 1);
  formatter_medium.format(data,2);
  formatter_short.format(data, 3);

  // Draw our data
  var table = new google.visualization.Table(document.getElementById('dateformat_div'));
  table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
}

데이터 패턴 자세히 알아보기

다음은 지원되는 패턴에 관한 자세한 내용입니다.

패턴은 ICU 날짜 및 시간 형식과 비슷하지만 A e D F g Y u w W 패턴은 아직 지원되지 않습니다. 패턴과의 충돌을 방지하려면 출력에 표시하려는 리터럴 텍스트를 작은따옴표로 묶어야 합니다. 단, 큰따옴표는 큰따옴표(예: "K 'o''clock.'".

패턴	설명	출력 예시
GG	시대 지정자.	'AD'
yy 또는 yyyy	있습니다.	1996
월	1년 기준 월입니다. 1월: M은 1을 생성합니다. MM은 01을 생성합니다. MMM은 1월을 생성합니다. MMMM은 1월을 생성합니다.	'7월' '07'
d	일 수입니다. 불필요한 'd' 값은 앞에 0을 추가합니다.	10
h	12시간 기준의 시입니다. 추가 'h' 값은 앞에 0을 추가합니다.	12
H	24시간 기준의 시입니다. Extra Hk' 값은 앞에 0을 추가합니다.	0
m	1시간 기준의 분입니다. 여분의 'M' 값은 앞에 0을 추가합니다.	30
s	1분 기준의 초입니다. Extra 's' 값은 앞에 0을 추가합니다.	55
토	1초 미만입니다. 추가 'S' 값은 오른쪽이 0으로 패딩됩니다.	978
E	요일입니다. '화요일'에 대한 다음 출력: E는 T를 생성함 EE 또는 EEE 생산 화/화 EEEE는 화요일에 생산	'화' "화요일"
aa	AM/PM	'PM'
k	1일 기준의 시입니다 (1~24). 추가 'k' 값은 앞에 0을 추가합니다.	24
K	오전/오후의 시입니다 (0~11). 추가 'k' 값은 앞에 0을 추가합니다.	0
z	시간대입니다. 시간대 5의 경우 'UTC+5'가 생성됩니다.	'UTC+5'
Z	RFC 822 형식의 시간대입니다. 시간대 -5의 경우: Z, ZZ, ZZZ에서 생성 -0500 ZZZZ와 기타 채널은 'GMT -05:00'을 생성합니다.	'-0800' GMT -05:00
v	시간대 (일반).	'기타/GMT-5'
'	텍스트 이스케이프	'날짜='
''	작은따옴표	'yy'

NumberFormat

숫자 열의 형식을 지정하는 방법을 설명합니다. 형식 지정 옵션에는 접두사 기호 (예: 달러 기호)를 지정하거나 천 단위 마커로 사용할 구두점을 지정하는 것이 포함됩니다.

옵션

NumberFormat는 생성자에 전달되는 다음 옵션을 지원합니다.

옵션	설명
decimalSymbol	소수점 마커로 사용할 문자입니다. 기본값은 점 (.)입니다.
fractionDigits	소수점 뒤에서 몇 자릿수를 표시할지 지정하는 숫자입니다. 기본값은 2입니다. 숫자에 포함된 자릿수보다 더 많은 자릿수를 지정하면 작은 값에 0이 표시됩니다. 잘린 값은 반올림됩니다 (5 올림).
groupingSymbol	소수점 왼쪽의 숫자를 3자리 집합으로 그룹화하는 데 사용할 문자입니다. 기본값은 쉼표 (,)입니다.
negativeColor	음수 값의 텍스트 색상입니다. 기본값은 없습니다. 값은 'red' 또는 '#FF0000'과 같이 허용되는 모든 HTML 색상 값일 수 있습니다.
negativeParens	불리언입니다. true이면 음수 값이 괄호로 묶여 있어야 함을 나타냅니다. 기본값은 true입니다.
pattern	형식 문자열입니다. 제공되는 경우 negativeColor를 제외한 다른 모든 옵션은 무시됩니다. 형식 문자열은 ICU 패턴 집합 의 하위 집합입니다. 예를 들어 {pattern:'#,###%'}의 경우 값 10, 7.5, 0.5에 대해 출력 값으로 '1,000%', '750%', '50%'가 됩니다.
prefix	값의 문자열 프리픽스(예: '$')입니다.
suffix	값의 문자열 서픽스입니다(예: '%').

방법

NumberFormat는 다음 메서드를 지원합니다.

메서드	설명
google.visualization.NumberFormat(options)	생성자입니다. 자세한 내용은 위의 옵션 섹션을 참조하세요.
format(dataTable, columnIndex)	지정된 열에 서식을 적용하는 표준 format() 메서드입니다.
formatValue(value)	지정된 값의 형식이 지정된 값을 반환합니다. 이 메서드에는 DataTable가 필요하지 않습니다.

샘플 코드

var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues');
data.addRows([
  ['Shoes', 10700],
  ['Sports', -15400],
  ['Toys', 12500],
  ['Electronics', -2100],
  ['Food', 22600],
  ['Art', 1100]
]);

var table = new google.visualization.Table(document.getElementById('numberformat_div'));

var formatter = new google.visualization.NumberFormat(
    {prefix: '$', negativeColor: 'red', negativeParens: true});
formatter.format(data, 1); // Apply formatter to second column

table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

PatternFormat

지정된 열의 값을 임의의 텍스트와 함께 단일 열로 병합할 수 있습니다. 예를 들어 이름 열과 성 열이 있는 경우 세 번째 열에 {성}, {이름}을(를) 채울 수 있습니다. 이 형식 지정 도구는 생성자 및 format() 메서드의 규칙을 따르지 않습니다. 자세한 내용은 아래의 메서드 섹션을 참조하세요.

방법

PatternFormat는 다음 메서드를 지원합니다.

메서드	설명
google.visualization.PatternFormat(pattern)	생성자입니다. 옵션 객체를 사용하지 않습니다. 대신 문자열 pattern 매개변수를 사용합니다. 이 속성은 임의의 텍스트와 함께 대상 열에 입력할 열 값을 설명하는 문자열입니다. 문자열에 자리표시자를 삽입하여 삽입할 다른 열의 값을 나타냅니다. 자리표시자는 {#}이며, 여기서 # 는 사용할 소스 열의 색인입니다. 색인은 아래 format() 메서드의 srcColumnIndices 배열에 있는 색인입니다. 리터럴 { 또는 } 문자를 포함하려면 \{ 또는 \}와 같이 이스케이프 처리합니다. 리터럴 \ 표시를 포함하려면 \\로 이스케이프 처리합니다. 샘플 코드 다음 예에서는 format() 메서드에서 첫 번째와 두 번째 요소를 가져와서 앵커 요소를 만드는 패턴의 생성자를 보여줍니다. var formatter = new google.visualization.PatternFormat( '<a href="mailto:{1}">{0}</a>');
format(dataTable, srcColumnIndices, opt_dstColumnIndex)	몇 가지 추가 매개변수가 있는 표준 형식 지정 호출: dataTable - 연산을 수행할 DataTable입니다. srcColumnIndices - 기본 DataTable에서 소스로 가져올 하나 이상의 열 색인 (0부터 시작) 배열입니다. 이 속성은 생성자에서 pattern 매개변수의 데이터 소스로 사용됩니다. 열 번호는 정렬할 필요가 없습니다. opt_dstColumnIndex - [선택사항] pattern 조작의 출력을 배치할 대상 열입니다. 지정하지 않으면 srcColumIndices의 첫 번째 요소가 대상으로 사용됩니다. 표 다음에 나오는 형식 지정 예를 참고하세요.

다음은 4열 테이블의 몇 가지 입력 및 출력 예시입니다.

Row before formatting (4 columns, last is blank):
John  |  Paul  |  Jones  |  [empty]

var formatter = new google.visualization.PatternFormat("{0} {1} {2}");
formatter.format(data, [0,1,2], 3);
Output:
  John  |  Paul  |  Jones  |  John Paul Jones

var formatter = new google.visualization.PatternFormat("{1}, {0}");
formatter.format(data, [0,2], 3);
Output:
  John  |  Paul  |  Jones  |  Jones, John

샘플 코드

다음 예시에서는 두 열의 데이터를 결합하여 이메일 주소를 만드는 방법을 보여줍니다. DataView 객체를 사용하여 원본 소스 열을 숨깁니다.

var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Email');
data.addRows([
  ['John Lennon', 'john@beatles.co.uk'],
  ['Paul McCartney', 'paul@beatles.co.uk'],
  ['George Harrison', 'george@beatles.co.uk'],
  ['Ringo Starr', 'ringo@beatles.co.uk']
]);

var table = new google.visualization.Table(document.getElementById('patternformat_div'));

var formatter = new google.visualization.PatternFormat(
    '<a href="mailto:{1}">{0}</a>');
// Apply formatter and set the formatted value of the first column.
formatter.format(data, [0, 1]);

var view = new google.visualization.DataView(data);
view.setColumns([0]); // Create a view with the first column only.

table.draw(view, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

GadgetHelper

Google 시각화 API를 사용하는 가젯 작성을 단순화하는 도우미 클래스입니다.

생성자

google.visualization.GadgetHelper()

방법

메서드	반환 값	설명
createQueryFromPrefs(prefs)	google.visualization.Query	정적입니다. google.visualization.Query의 새 인스턴스를 만들고 가젯 환경설정의 값에 따라 속성을 설정합니다. prefs 매개변수의 유형은 _IG_Prefs입니다. 환경설정 _table_query_url는 쿼리 데이터 소스 URL을 설정하는 데 사용됩니다. _table_query_refresh_interval 환경설정은 쿼리 새로고침 간격 (초)을 설정하는 데 사용됩니다.
validateResponse(response)	불리언	정적입니다. response 매개변수는 google.visualization.QueryResponse 유형입니다. 응답에 데이터가 포함되어 있으면 true를 반환합니다. 쿼리 실행이 실패하고 응답에 데이터가 포함되어 있지 않으면 false를 반환합니다. 오류가 발생하면 이 메서드는 오류 메시지를 표시합니다.

쿼리 클래스

다음 객체를 사용하여 Google 스프레드시트와 같은 외부 데이터 소스에 데이터 쿼리를 보낼 수 있습니다.

• 쿼리 - 발신 데이터 요청을 래핑합니다.
• QueryResponse - 데이터 소스의 응답을 처리합니다.

쿼리

데이터 소스로 전송되는 쿼리를 나타냅니다.

생성자

google.visualization.Query(dataSourceUrl, opt_options)

매개변수

dataSourceUrl

[필수, 문자열] 쿼리를 전송할 URL입니다. Google 스프레드시트에 대해서는 차트 및 스프레드시트 문서를 참고하세요.

opt_options

[선택사항, 객체] 요청 옵션 맵입니다. 참고: 제한된 데이터 소스 에 액세스하는 경우 이 매개변수를 사용해서는 안 됩니다. 지원되는 속성은 다음과 같습니다.

• sendMethod - [선택, String] 쿼리를 보내는 데 사용할 메서드를 지정합니다. 다음 문자열 값 중 하나를 선택합니다.
  • 'xhr' - XmlHttpRequest를 사용하여 쿼리를 전송합니다.
  • 'scriptInjection' - 스크립트 삽입을 사용하여 쿼리를 전송합니다.
  • 'makeRequest' - [지원 중단된 가젯에만 사용 가능] 가젯 API의 makeRequest() 메서드를 사용하여 쿼리를 보냅니다. 지정하면 makeRequestParams도 지정해야 합니다.
  • 'auto' - 데이터 소스 URL의 tqrt URL 매개변수에 지정된 메서드를 사용합니다. tqrt의 값은 'xhr', 'scriptInjection' 또는 'makeRequest'입니다. tqrt가 누락되었거나 잘못된 값이 있는 경우 기본값은 동일 도메인 요청의 경우 'xhr'이고 교차 도메인 요청의 경우 'scriptInjection'입니다.
• makeRequestParams - [객체] makeRequest() 쿼리의 매개변수 맵입니다. sendMethod가 'makeRequest'인 경우에만 사용되며 필수입니다.

방법

메서드	반환 값	설명
abort()	없음	setRefreshInterval()로 시작된 자동 쿼리 전송을 중지합니다.
setRefreshInterval(seconds)	없음	send에 대한 첫 번째 명시적 호출부터 지정된 시간(초)마다 send 메서드를 자동으로 호출하도록 쿼리를 설정합니다. seconds는 0 이상의 숫자입니다. 이 메서드를 사용하는 경우 send 메서드를 호출하기 전에 호출해야 합니다. 0으로 다시 호출하거나 (기본값) abort()를 호출하여 이 메서드를 취소합니다.
setTimeout(seconds)	없음	시간 초과 오류가 발생하기 전에 데이터 소스가 응답할 때까지 기다리는 시간(초)을 설정합니다. seconds는 0보다 큰 숫자입니다. 기본 제한 시간은 30초입니다. 이 메서드가 사용된 경우 send 메서드를 호출하기 전에 호출해야 합니다.
setQuery(string)	없음	쿼리 문자열을 설정합니다. string 매개변수의 값이 유효한 쿼리여야 합니다. 이 메서드가 사용된 경우 send 메서드를 호출하기 전에 호출해야 합니다. 쿼리 언어 자세히 알아보기
send(callback)	없음	쿼리를 데이터 소스에 전송합니다. callback는 데이터 소스가 응답할 때 호출되는 함수여야 합니다. 콜백 함수는 google.visualization.QueryResponse 유형의 단일 매개변수를 수신합니다.

QueryResponse

데이터 소스에서 수신된 쿼리 실행의 응답을 나타냅니다. 이 클래스의 인스턴스는 Query.send가 호출될 때 설정된 콜백 함수에 인수로 전달됩니다.

방법

메서드	반환 값	설명
getDataTable()	DataTable	데이터 소스에서 반환한 데이터 표를 반환합니다. 쿼리 실행이 실패하고 반환된 데이터가 없으면 null를 반환합니다.
getDetailedMessage()	문자열	실패한 쿼리에 대한 자세한 오류 메시지를 반환합니다. 쿼리 실행이 성공하면 이 메서드는 빈 문자열을 반환합니다. 반환되는 메시지는 개발자를 위한 메시지이며 '{급여} 열이 존재하지 않습니다'와 같은 기술 정보를 포함할 수 있습니다.
getMessage()	문자열	실패한 쿼리에 대해 짧은 오류 메시지가 반환됩니다. 쿼리 실행이 성공하면 이 메서드는 빈 문자열을 반환합니다. 반환되는 메시지는 최종 사용자를 위한 짧은 메시지(예: '잘못된 쿼리' 또는 '액세스 거부됨')입니다.
getReasons()	문자열 배열	0개 이상의 항목의 배열을 반환합니다. 각 항목은 쿼리를 실행하는 동안 발생한 오류 또는 경고 코드가 포함된 짧은 문자열입니다. 가능한 코드는 다음과 같습니다. access_denied 사용자에게 데이터 소스에 액세스할 수 있는 권한이 없습니다. invalid_query 지정된 쿼리에 구문 오류가 있습니다. data_truncated 출력 크기 제한으로 인해 쿼리 선택과 일치하는 하나 이상의 데이터 행이 반환되지 않았습니다. (경고). timeout 쿼리가 예상 시간 내에 응답하지 않았습니다.
hasWarning()	불리언	쿼리 실행에 경고 메시지가 있으면 true를 반환합니다.
isError()	불리언	쿼리 실행이 실패하고 응답에 데이터 테이블이 포함되어 있지 않으면 true를 반환합니다. 쿼리 실행이 성공하고 응답에 데이터 테이블이 포함되어 있으면 <false>를 반환합니다.

오류 표시

API는 사용자에게 맞춤 오류 메시지를 표시하는 데 도움이 되는 여러 함수를 제공합니다. 이러한 함수를 사용하려면 페이지에 컨테이너 요소 (일반적으로 <div>)를 제공하면 API가 여기에 형식이 지정된 오류 메시지를 그립니다. 이 컨테이너는 시각화 컨테이너 요소이거나 오류만을 위한 컨테이너일 수 있습니다. 시각화에 요소를 포함하면 시각화 위에 오류 메시지가 표시됩니다. 그런 다음 아래의 적절한 함수를 호출하여 오류 메시지를 표시하거나 삭제합니다.

모든 함수는 google.visualization.errors 네임스페이스의 정적 함수입니다.

많은 시각화에서 오류 이벤트가 발생할 수 있습니다. 자세한 내용은 아래의 오류 이벤트를 참고하세요.

쿼리 래퍼 예에서 커스텀 오류 예시를 확인할 수 있습니다.

함수	반환 값	설명
addError(container, message, opt_detailedMessage, opt_options)	생성된 오류 객체를 식별하는 문자열 ID 값입니다. 페이지에서 고유한 값이며, 오류를 삭제하거나 포함된 요소를 찾는 데 사용할 수 있습니다.	오류 표시 블록을 지정된 텍스트 및 형식으로 지정된 페이지 요소에 추가합니다. container - 오류 메시지를 삽입할 DOM 요소입니다. 컨테이너를 찾을 수 없는 경우 함수에서 자바스크립트 오류가 발생합니다. message - 표시할 문자열 메시지입니다. opt_detailedMessage - 선택사항인 세부 메시지 문자열입니다. 기본적으로 마우스 오버 텍스트이지만 아래에 설명된 opt_options.showInToolTip 속성에서 마우스를 변경할 수 있습니다. opt_options - 메시지의 다양한 표시 옵션을 설정하는 속성이 포함된 선택적 객체입니다. 다음과 같은 옵션이 지원됩니다. showInTooltip - 불리언 값이며 true는 자세한 메시지를 도움말 텍스트로만 표시하고 false는 짧은 메시지 이후의 컨테이너 본문에 자세한 메시지를 표시합니다. 기본값은 true입니다. type - 오류 유형을 설명하는 문자열로, 이 메시지에 적용할 CSS 스타일을 결정합니다. 지원되는 값은 'error' 및 'warning'입니다. 기본값은 'error'입니다. 스타일 - 오류 메시지의 스타일 문자열입니다. 이 스타일은 경고 유형 (opt_options.type)에 적용된 모든 스타일을 재정의합니다. 예: 'background-color: #33ff99; padding: 2px;' 기본값은 빈 문자열입니다. removable - 불리언 값이며 true이면 사용자가 마우스를 클릭하면 메시지를 닫을 수 있음을 의미합니다. 기본값은 false입니다.
addErrorFromQueryResponse(container, response)	생성된 오류 객체를 식별하는 문자열 ID 값이거나 응답에 오류를 나타내지 않은 경우 null입니다. 이 값은 페이지에서 고유한 값이며, 오류를 삭제하거나 포함된 요소를 찾는 데 사용할 수 있습니다.	쿼리 응답 및 오류 메시지 컨테이너를 이 메서드에 전달합니다. 쿼리 응답이 쿼리 오류를 나타내는 경우 지정된 페이지 요소에 오류 메시지를 표시합니다. 쿼리 응답이 null이면 메서드에서 JavaScript 오류가 발생합니다. 쿼리 핸들러에 수신된 QueryResponse를 이 메시지에 전달하여 오류를 표시합니다. 또한 유형 (addError(opt_options.type)와 유사한 오류 또는 경고)에 적합한 디스플레이 스타일을 설정합니다. container - 오류 메시지를 삽입할 DOM 요소입니다. 컨테이너를 찾을 수 없는 경우 함수에서 자바스크립트 오류가 발생합니다. response - 쿼리에 대한 응답으로 쿼리 핸들러에서 수신한 QueryResponse 객체입니다. null인 경우 메서드에서 JavaScript 오류가 발생합니다.
removeError(id)	부울: 오류가 삭제된 경우 true, 그렇지 않은 경우 false입니다.	페이지에서 ID로 지정된 오류를 삭제합니다. id - addError() 또는 addErrorFromQueryResponse()를 사용하여 생성된 오류의 문자열 ID입니다.
removeAll(container)	없음	지정된 컨테이너에서 모든 오류 블록을 삭제합니다. 지정된 컨테이너가 없으면 오류가 발생합니다. container - 삭제할 오류 문자열이 있는 DOM 요소입니다. 컨테이너를 찾을 수 없는 경우 함수에서 자바스크립트 오류가 발생합니다.
getContainer(errorId)	지정된 오류가 있는 DOM 요소에 대한 핸들이며, 찾을 수 없는 경우 null입니다.	errorID로 지정된 오류가 있는 컨테이너 요소에 대한 핸들을 검색합니다. errorId - addError() 또는 addErrorFromQueryResponse()를 사용하여 생성된 오류의 문자열 ID입니다.

이벤트

대부분의 시각화는 무언가가 발생했음을 나타내기 위해 이벤트를 실행합니다. 차트 사용자는 이러한 이벤트를 수신 대기하려는 경우가 많습니다. 자체 시각화를 코딩하는 경우 이러한 이벤트를 자체적으로 트리거할 수도 있습니다.

다음 메서드를 사용하면 개발자가 이벤트를 수신 대기하거나, 기존 이벤트 핸들러를 삭제하거나, 시각화 내에서 이벤트를 트리거할 수 있습니다.

• google.visualization.events.addListener() 및 google.visualization.events.addOneTimeListener()는 이벤트를 수신 대기합니다.
• google.visualization.events.removeListener()는 기존 리스너를 제거합니다.
• google.visualization.events.removeAllListeners()는 특정 차트의 모든 리스너를 제거합니다.
• google.visualization.events.trigger()는 이벤트를 실행합니다.

addListener()

페이지에 호스팅된 시각화에 의해 시작된 이벤트를 수신하도록 등록하려면 이 메서드를 호출합니다. 처리 함수에 전달할 이벤트 인수(있는 경우)를 문서화해야 합니다.

google.visualization.events.addListener(source_visualization,
  event_name, handling_function)

source_visualization

소스 시각화 인스턴스의 핸들입니다.

event_name

리슨할 이벤트의 문자열 이름입니다. 시각화는 발생하는 이벤트를 문서화해야 합니다.

handling_function

source_visualization이 event_name 이벤트를 실행할 때 호출할 로컬 자바스크립트 함수의 이름입니다. 처리 함수는 모든 이벤트 인수를 매개변수로 전달합니다.

반환

새 리스너의 리스너 핸들러입니다. 필요한 경우 핸들러를 사용하여 나중에 google.visualization.events.removeListener()를 호출하여 이 리스너를 삭제할 수 있습니다.

예

다음은 선택 이벤트를 수신하도록 등록하는 예입니다.

var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, options);

google.visualization.events.addListener(table, 'select', selectHandler);

function selectHandler() {
  alert('A table row was selected');
}

addOneTimeListener()

addListener()와 동일하지만 한 번만 수신해야 하는 이벤트용입니다. 이후 이벤트가 발생해도 처리 함수가 호출되지 않습니다.

유용한 경우의 예: 그리기가 발생할 때마다 ready 이벤트가 발생합니다. 첫 번째 ready만 코드를 실행하려면 addListener 대신 addOneTimeListener를 사용합니다.

removeListener()

기존 이벤트 리스너를 등록 취소하려면 이 메서드를 호출합니다.

google.visualization.events.removeListener(listener_handler)

listener_handler

google.visualization.events.addListener()에서 반환한 삭제할 리스너 핸들러입니다.

removeAllListeners()

특정 시각화 인스턴스의 모든 이벤트 리스너 등록을 취소하려면 이 메서드를 호출합니다.

google.visualization.events.removeAllListeners(source_visualization)

source_visualization

모든 이벤트 리스너를 삭제해야 하는 소스 시각화 인스턴스의 핸들입니다.

trigger()

시각화 구현자가 호출합니다. 시각화에서 이 메서드를 호출하여 임의의 이름과 값 집합으로 이벤트를 실행합니다.

google.visualization.events.trigger(source_visualization, event_name,
  event_args)

source_visualization

소스 시각화 인스턴스의 핸들입니다. 시각화 전송을 통해 정의된 메서드 내에서 이 함수를 호출하는 경우 this 키워드를 전달하기만 하면 됩니다.

event_name

이벤트를 호출할 문자열 이름입니다. 원하는 모든 문자열 값을 선택할 수 있습니다.

event_args

[선택사항] 수신 메서드에 전달할 이름/값 쌍의 맵입니다. 예: {message: "Hello there!", score: 10, name: "Fred"}. 이벤트가 필요하지 않은 경우 null을 전달할 수 있습니다. 수신자는 이 매개변수에 null을 허용할 준비가 되어 있어야 합니다.

예

다음은 온클릭 메서드가 호출될 때 'select'라는 메서드가 발생하는 시각화의 예입니다. 어떤 값도 전달하지 않습니다.

MyVisualization.prototype.onclick = function(rowIndex) {
  this.highlightRow(this.selectedRow, false); // Clear previous selection
  this.highlightRow(rowIndex, true); // Highlight new selection

  // Save the selected row index in case getSelection is called.
  this.selectedRow = rowIndex;

  // Trigger a select event.
  google.visualization.events.trigger(this, 'select', null);
}

표준 시각화 메서드 및 속성

모든 시각화는 다음과 같은 필수 및 선택적 메서드와 속성 집합을 노출해야 합니다. 그러나 이러한 표준을 적용하기 위한 유형 검사는 없으므로 각 시각화에 대한 문서를 읽어보는 것이 좋습니다.

• 생성자
• draw()
• getAction()[선택사항]
• getSelection()[선택사항]
• removeAction()[선택사항]
• setAction()[선택사항]
• setSelection()[선택사항]

참고: 이러한 메서드는 google.visualization 네임스페이스가 아닌 시각화 네임스페이스에 있습니다.

생성자

생성자에는 시각화 클래스의 이름이 있고 이 클래스의 인스턴스를 반환해야 합니다.

visualization_class_name(dom_element)

dom_element

시각화를 삽입해야 하는 DOM 요소를 가리키는 포인터입니다.

예

var org = new google.visualization.OrgChart(document.getElementById('org_div')); 

draw()

페이지에 시각화를 그립니다. 백그라운드에서 그래픽을 서버에서 가져오거나 연결된 시각화 코드를 사용하여 페이지에 그래픽을 만들 수 있습니다. 데이터 또는 옵션이 변경될 때마다 이 메서드를 호출해야 합니다. 객체는 생성자에 전달된 DOM 요소 내에 그려야 합니다.

draw(data[, options])

데이터

차트를 그리는 데 사용할 데이터를 보유하는 DataTable 또는 DataView입니다. 차트에서 DataTable를 추출하는 표준 메서드는 없습니다.

options

[선택사항] 맞춤 옵션의 이름/값 쌍의 맵입니다. 높이 및 너비, 배경 색상, 설명을 예로 들 수 있습니다. 시각화 문서에는 사용 가능한 옵션이 나열되어 있으며 이 매개변수를 지정하지 않는 경우 기본 옵션을 지원해야 합니다. JavaScript 객체 리터럴 구문을 사용하여 옵션 맵을 전달할 수 있습니다(예: {x:100, y:200, title:'An Example'}

예

chart.draw(myData, {width: 400, height: 240, is3D: true, title: 'My Daily Activities'});

getAction()

도움말이 있고 도움말 작업을 허용하는 시각화를 통해 선택적으로 노출됩니다.

요청된 actionID가 있는 도움말 작업 객체를 반환합니다.

예:

// Returns the action object with the ID 'alertAction'.
chart.getAction('alertAction');

getSelection()

그래픽에서 현재 선택된 데이터에 액세스할 수 있도록 하는 시각화를 통해 선택적으로 노출됩니다.

selection_array getSelection()

반환

selection_array 선택한 객체의 배열로, 각각 시각화를 만드는 데 사용된 기본 테이블의 데이터 요소를 설명합니다 (DataView 또는 DataTable). 각 객체에는 기본 DataTable에서 선택된 항목의 행 또는 열 색인이 있는 row 또는 column 속성이 포함됩니다. row 속성이 null이면 선택 항목이 열이며, column 속성이 null이면 선택 항목이 행입니다. 둘 다 null이 아니면 특정 데이터 항목입니다. DataTable.getValue() 메서드를 호출하여 선택된 항목의 값을 가져올 수 있습니다. 검색된 배열은 setSelection()에 전달할 수 있습니다.

예

function myClickHandler(){
  var selection = myVis.getSelection();
  var message = '';

  for (var i = 0; i < selection.length; i++) {
    var item = selection[i];
    if (item.row != null && item.column != null) {
      message += '{row:' + item.row + ',column:' + item.column + '}';
    } else if (item.row != null) {
      message += '{row:' + item.row + '}';
    } else if (item.column != null) {
      message += '{column:' + item.column + '}';
    }
  }
  if (message == '') {
    message = 'nothing';
  }
  alert('You selected ' + message);
}

removeAction()

도움말이 있고 도움말 작업을 허용하는 시각화를 통해 선택적으로 노출됩니다.

요청된 actionID가 있는 도움말 작업 객체를 차트에서 삭제합니다.

예:

// Removes an action from chart with the ID of 'alertAction'.
chart.removeAction('alertAction');

setAction()

도움말이 있고 도움말 작업을 허용하는 시각화를 통해 선택적으로 노출됩니다. 이 차트는 핵심 차트 (막대, 열, 선, 영역, 분산형, 콤보, 풍선, 원형, 도넛, 원통형, 히스토그램, 계단식 영역)에서만 작동합니다.

사용자가 작업 텍스트를 클릭할 때 실행할 도움말 작업을 설정합니다.

setAction(action object)

setAction 메서드는 객체를 작업 매개변수로 사용합니다. 이 객체는 세 가지 속성을 지정해야 합니다. id(설정 중인 작업의 ID), text(작업 도움말에 표시되어야 하는 텍스트), action(사용자가 작업 텍스트를 클릭할 때 실행해야 하는 함수)입니다.

차트의 draw() 메서드를 호출하기 전에 모든 도움말 작업을 설정해야 합니다.

예:

// Sets a tooltip action which will pop an alert box on the screen when triggered.
chart.setAction({
  id: 'alertAction',
  text: 'Trigger Alert',
  action: function() {
    alert('You have triggered an alert');
  }
});

setAction 메서드는 추가 속성 두 개(visible 및 enabled)도 정의할 수 있습니다. 이러한 속성은 도움말 작업의 표시 및 사용 설정 여부를 나타내는 boolean 값을 반환하는 함수여야 합니다.

예:

// The visible/enabled functions can contain any logic to determine their state
// as long as they return boolean values.
chart.setAction({
  id: 'alertAction',
  text: 'Trigger Alert',
  action: function() {
    alert('You have triggered an alert');
  },
  visible: function() {
    return true;
  },
  enabled: function() {
    return true;
  }
});

setSelection()

원하는 경우 시각화에서 데이터 항목(예: 영역 차트의 한 점 또는 막대 그래프의 막대)을 선택합니다. 이 메서드가 호출되면 시각화에서 새 선택이 무엇인지 시각적으로 나타내야 합니다. setSelection()의 구현은 'select' 이벤트를 실행해서는 안 됩니다. 시각화에서 선택 항목의 일부를 무시할 수 있습니다. 예를 들어 선택된 행만 표시할 수 있는 테이블은 setSelection() 구현에서 셀 또는 열 요소를 무시하거나 전체 행을 선택할 수 있습니다.

이 메서드가 호출될 때마다 선택된 모든 항목이 선택 해제되고 전달된 새 선택 목록이 적용되어야 합니다. 개별 항목을 선택 해제하는 명시적인 방법은 없습니다. 개별 항목을 선택 해제하려면 setSelection()를 호출하여 선택된 상태를 유지하고 모든 요소를 선택 해제하려면 setSelection(), setSelection(null) 또는 setSelection([])를 호출하세요.

setSelection(selection_array)

selection_array

객체의 배열로, 각 행에는 숫자 행 또는 열 속성이 있습니다. row와 column는 데이터 테이블에서 선택할 항목의 행 또는 열 번호이며, 0부터 시작합니다. 전체 열을 선택하려면 row를 null로 설정하고, 전체 행을 선택하려면 column를 null로 설정합니다. 예: setSelection([{row:0,column:1},{row:1, column:null}])은 (0,1) 및 전체 행 1에 있는 셀을 선택합니다.

다양한 정적 메서드

이 섹션에는 google.visualization 네임스페이스에 노출된 여러 유용한 메서드가 포함되어 있습니다.

arrayToDataTable()

이 메서드는 2차원 배열을 가져와서 DataTable로 변환합니다.

열 데이터 유형은 제공된 데이터에 따라 자동으로 결정됩니다. 배열의 첫 번째 행 (열 헤더 행)에 있는 객체 리터럴 표기법을 사용하여 열 데이터 유형을 지정할 수도 있습니다 (예: {label: 'Start Date', type: 'date'}). 선택적 데이터 역할도 사용할 수 있지만 객체 리터럴 표기법을 사용하여 명시적으로 정의해야 합니다. 모든 셀에 객체 리터럴 표기법을 사용하여 셀 객체를 정의할 수도 있습니다.

문법

google.visualization.arrayToDataTable(twoDArray, opt_firstRowIsData)

twoDArray

각 행이 데이터 표의 행을 나타내는 2차원 배열입니다. opt_firstRowIsData가 false (기본값)이면 첫 번째 행이 헤더 라벨로 해석됩니다. 각 열의 데이터 유형은 주어진 데이터로부터 자동으로 해석됩니다. 셀에 값이 없으면 null 또는 빈 값을 적절하게 지정합니다.

opt_firstRowIsData

첫 번째 행이 헤더 행을 정의하는지 여부입니다. true인 경우 모든 행이 데이터인 것으로 간주됩니다. false인 경우 첫 번째 행이 헤더 행으로 간주되고 값이 열 라벨로 할당됩니다. 기본값은 false입니다.

반환

새 DataTable

예시

다음 코드는 동일한 DataTable 객체를 만드는 세 가지 방법을 보여줍니다.

// Version 1: arrayToDataTable method
var data2 = google.visualization.arrayToDataTable([
  [{label: 'Country', type: 'string'},
   {label: 'Population', type: 'number'},
   {label: 'Area', type: 'number'},
   {type: 'string', role: 'annotation'}],
  ['CN', 1324, 9640821, 'Annotated'],
  ['IN', 1133, 3287263, 'Annotated'],
  ['US', 304, 9629091, 'Annotated'],
  ['ID', 232, 1904569, 'Annotated'],
  ['BR', 187, 8514877, 'Annotated']
]);

// Version 2: DataTable.addRows
var data3 = new google.visualization.DataTable();
data3.addColumn('string','Country');
data3.addColumn('number','Population');
data3.addColumn('number','Area');
data3.addRows([
  ['CN', 1324, 9640821],
  ['IN', 1133, 3287263],
  ['US', 304, 9629091],
  ['ID', 232, 1904569],
  ['BR', 187, 8514877]
]);

// Version 3: DataTable.setValue
var data = new google.visualization.DataTable();
data.addColumn('string','Country');
data.addColumn('number', 'Population');
data.addColumn('number', 'Area');
data.addRows(5);
data.setValue(0, 0, 'CN');
data.setValue(0, 1, 1324);
data.setValue(0, 2, 9640821);
data.setValue(1, 0, 'IN');
data.setValue(1, 1, 1133);
data.setValue(1, 2, 3287263);
data.setValue(2, 0, 'US');
data.setValue(2, 1, 304);
data.setValue(2, 2, 9629091);
data.setValue(3, 0, 'ID');
data.setValue(3, 1, 232);
data.setValue(3, 2, 1904569);
data.setValue(4, 0, 'BR');
data.setValue(4, 1, 187);
data.setValue(4, 2, 8514877);

drawChart()

이 메서드는 단일 호출로 차트를 만듭니다. 이 방법을 사용할 때의 장점은 필요한 코드가 약간 적으며, 시각화를 텍스트 문자열로 직렬화하고 저장하여 재사용할 수 있다는 것입니다. 이 메서드는 생성된 차트에 핸들을 반환하지 않으므로 메서드 리스너를 할당하여 차트 이벤트를 캐치할 수 없습니다.

문법

google.visualization.drawChart(chart_JSON_or_object)

chart_JSON_or_object

JSON 리터럴 문자열 또는 다음 속성이 포함된 자바스크립트 객체입니다 (대소문자 구분).

속성	유형	필수	기본값	설명
chartType	문자열	필수	없음	시각화의 클래스 이름입니다. Google 차트에서는 google.visualization 패키지 이름을 생략할 수 있습니다. Google 시각화인 경우 적절한 시각화 라이브러리가 아직 로드되지 않았다면 이 메서드가 라이브러리를 자동으로 로드합니다. 타사 시각화를 명시적으로 로드해야 합니다. 예: Table, PieChart, example.com.CrazyChart
containerId	문자열	필수	없음	시각화를 호스팅할 페이지에서 DOM 요소의 ID입니다.
옵션	객체	선택사항	없음	시각화 옵션을 설명하는 객체입니다. JavaScript 리터럴 표기법을 사용하거나 객체에 핸들을 제공할 수 있습니다. 예: "options": {"width": 400, "height": 240, "is3D": true, "title": "Company Performance"}
dataTable	객체	선택사항	없음	시각화를 채우는 데 사용되는 DataTable입니다. 위에서 설명한 대로 DataTable의 리터럴 JSON 문자열 표현, 채워진 google.visualization.DataTable 객체의 핸들 또는 arrayToDataTable(opt_firstRowIsData=false) 에서 허용하는 2차원 배열일 수 있습니다. 이 속성 또는 dataSourceUrl 속성을 지정해야 합니다.
dataSourceUrl	문자열	선택사항	없음	차트 데이터를 채우는 데이터 소스 쿼리 (예: Google 스프레드시트) 이 속성 또는 dataTable 속성을 지정해야 합니다.
query	문자열	선택사항	없음	dataSourceUrl를 지정하는 경우 원하는 경우 시각화 쿼리 언어를 사용하여 SQL과 유사한 쿼리 문자열을 지정하여 데이터를 필터링하거나 조작할 수 있습니다.
refreshInterval	숫자	선택사항	없음	시각화에서 쿼리 소스를 새로고침해야 하는 빈도(초)입니다. dataSourceUrl를 지정하는 경우에만 사용하세요.
보기	객체 OR 배열	선택사항	없음	dataTable 또는 dataSourceUrl 매개변수에 정의된 대로 기본 데이터에 대한 필터 역할을 하는 DataView 이니셜라이저 객체를 설정합니다. 문자열 또는 DataView 이니셜라이저 객체(예: dataview.toJSON()에서 반환한 객체)를 전달할 수 있습니다. 예: "view": {"columns": [1, 2]} DataView 이니셜라이저 객체의 배열을 전달할 수도 있습니다. 이 경우 배열의 첫 번째 DataView가 기본 데이터에 적용되어 새 데이터 테이블이 생성되고, 두 번째 DataView는 첫 번째 DataView을 적용하여 데이터 테이블에 적용되는 식입니다.

예시

스프레드시트 데이터 소스를 기반으로 표 차트를 만들고 SELECT A,D WHERE D > 100 ORDER BY D 쿼리를 포함합니다.

<script type="text/javascript">
  google.charts.load('current');  // Note: No need to specify chart packages.
  function drawVisualization() {
    google.visualization.drawChart({
      "containerId": "visualization_div",
      "dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1",
      "query":"SELECT A,D WHERE D > 100 ORDER BY D",
      "refreshInterval": 5,
      "chartType": "Table",
      "options": {
        "alternatingRowStyle": true,
        "showRowNumber" : true
      }
   });
 }
google.charts.setOnLoadCallback(drawVisualization);
</script>

다음 예에서는 동일한 테이블을 만들지만 로컬에서 DataTable를 만듭니다.

<script type='text/javascript'>
  google.charts.load('current');
  function drawVisualization() {
    var dataTable = [
      ["Country", "Population Density"],
      ["Indonesia", 117],
      ["China", 137],
      ["Nigeria", 142],
      ["Pakistan", 198],
      ["India", 336],
      ["Japan", 339],
      ["Bangladesh", 1045]
    ];
    google.visualization.drawChart({
      "containerId": "visualization_div",
      "dataTable": dataTable,
      "refreshInterval": 5,
      "chartType": "Table",
      "options": {
        "alternatingRowStyle": true,
        "showRowNumber" : true,
      }
    });
  }
  google.charts.setOnLoadCallback(drawVisualization);
</script>

이 예에서는 파일에서 로드했을 수 있는 차트의 JSON 문자열 표현을 전달합니다.

<script type="text/javascript">
  google.charts.load('current');
  var myStoredString = '{"containerId": "visualization_div",' +
    '"dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1",' +
    '"query":"SELECT A,D WHERE D > 100 ORDER BY D",' +
    '"refreshInterval": 5,' +
    '"chartType": "Table",' +
    '"options": {' +
    '   "alternatingRowStyle": true,' +
    '   "showRowNumber" : true' +
    '}' +
  '}';
  function drawVisualization() {
    google.visualization.drawChart(myStoredString);
  }
  google.charts.setOnLoadCallback(drawVisualization);
</script>

drawToolbar()

이는 여러 시각화에 연결할 수 있는 툴바 요소의 생성자입니다. 이 툴바를 사용하면 시각화 데이터를 다른 형식으로 내보내거나 다양한 위치에서 사용할 수 있도록 삽입 가능한 버전의 시각화를 제공할 수 있습니다. 자세한 내용과 코드 예는 툴바 페이지를 참고하세요.