이 페이지에서는 차트 도구 데이터 소스 프로토콜을 지원하는 데이터 소스에 쿼리를 보내는 방법을 설명합니다.
개요
데이터 소스는 차트 도구의 데이터 소스 프로토콜을 지원하는 웹 서비스입니다. 데이터 소스에 SQL 쿼리를 보낼 수 있으며, 이에 대한 응답으로 적절한 정보가 채워진 DataTable을 받게 됩니다. 데이터 소스의 예로는 Google 스프레드시트와 SalesForce가 있습니다.
요청 보내기
요청을 보내려면 다음 안내를 따르세요.
- 데이터 소스의 URL을 사용하여 Query 객체를 인스턴스화합니다. URL은 해당 데이터 소스에서 이해하는 구문으로 요청되는 데이터를 나타내야 합니다.
- 원하는 경우 메서드를
Query
객체 생성자에서 선택적 두 번째 매개변수로 보내는 등의 요청 옵션을 지정합니다 (자세한 내용은 쿼리 생성자의opt_options
매개변수 참조). - 필요한 경우 쿼리 언어 문자열을 추가하여 결과를 정렬하거나 필터링한 후 요청을 보냅니다.
차트 도구의 데이터 소스 쿼리 언어를 지원하는 데 데이터 소스가 필요하지는 않습니다. 데이터 소스가 쿼리 언어를 지원하지 않으면 SQL 쿼리 문자열을 무시하지만 여전히
DataTable
을 반환합니다. 쿼리 언어는 SQL 언어의 변형입니다. 여기에서 전체 쿼리 언어 문법을 확인하세요. - 응답을 수신하면 호출될 콜백 핸들러를 지정하여 쿼리를 전송합니다. 자세한 내용은 다음 섹션을 참조하세요.
다음은 Google 스프레드시트 셀 범위의 데이터 요청을 보내는 예입니다. Google 스프레드시트의 URL을 가져오는 방법은 여기를 참조하세요.
function initialize() { var opts = {sendMethod: 'auto'}; // Replace the data source URL on next line with your data source URL. var query = new google.visualization.Query('http://spreadsheets.google.com?key=123AB&...', opts); // Optional request to return only column C and the sum of column B, grouped by C members. query.setQuery('select C, sum(B) group by C'); // Send the query with a callback function. query.send(handleQueryResponse); } function handleQueryResponse(response) { // Called when the query response is returned. ... }
응답 처리
요청이 반환되면 응답 핸들러 함수가 호출됩니다.
응답 핸들러 함수에 전달되는 매개변수는 google.visualization.QueryResponse 유형입니다.
요청이 성공하면 응답에 데이터 테이블 (google.visualization.DataTable
클래스)이 포함됩니다. 요청이 실패하면 응답에 오류 관련 정보가 포함되고 DataTable
는 포함되지 않습니다.
응답 핸들러는 다음을 실행해야 합니다.
response.isError()
를 호출하여 요청의 성공 또는 실패 여부를 확인합니다. 사용자에게는 오류 메시지를 표시할 필요가 없습니다. 시각화 라이브러리는 컨테이너<div>
에 오류 메시지를 표시합니다. 그러나 오류를 수동으로 처리하려는 경우goog.visualization.errors
클래스를 사용하여 맞춤 메시지를 표시할 수 있습니다 (맞춤 오류 처리의 예는 쿼리 래퍼 예 참고).- 요청이 성공하면
getDataTable()
를 호출하여 검색할 수 있는DataTable
가 응답에 포함됩니다. 차트에 전달합니다.
다음 코드는 원형 차트를 그리는 이전 요청을 처리하는 방법을 보여줍니다.
function handleQueryResponse(response) { if (response.isError()) { alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); return; } var data = response.getDataTable(); var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, {width: 400, height: 240, is3D: true}); }
CSV 파일 읽기
CSV (쉼표로 구분된 값) 데이터로 차트를 만들려면 다음 두 가지 방법 중 하나를 사용하세요.
- 데이터를 Google Charts 데이터 표 형식으로 변환합니다.
- 차트를 제공하는 웹 서버에 CSV 파일을 배치하고 이 페이지의 기법을 사용하여 쿼리합니다.
추가 정보
- 쿼리 언어 구문 - 데이터 쿼리를 작성하는 데 사용되는 언어의 구문을 설명합니다.
- 쿼리 클래스 - 쿼리를 래핑하는 클래스의 참조 페이지입니다.
- QueryResponse Class - 쿼리에 응답을 래핑하는 클래스의 참조 페이지입니다.