Google Visualization API (4) - Data Queries

視覺效果用來顯示存放在 DataTable 類別裡面的資料. 除了直接使用 Javascript 來產生 DataTable. 也可以直接向支援 Visualization API 的資料來源查詢取得, 例如, 你可以讀取 Google Spreadsheet 的資料並且使用 Visualization API 來產生視覺效果圖. 底下就要講解如何向支援 Visualization API 的資料來源做查詢取得資料.

Sending a Query
你可以使用 Query 類別向資料來源做查詢動作. 這邊講的資料來源指的是資料來源運用程式認可的 URL. 例如, 要取得 Google Spreadsheet 的資料來源 URL, 必需:

1. 開啟一個試算表.
2. 加入一個 gadget 並且選取需要的資料範圍.
3. 點選 gadget 標題列右上角的箭頭圖案.
4. 選擇 'get query data-source URL'.

Google Spreadsheet 的資料來源 URL, 看起來像 http://spreadsheets.google.com?...&key=123ABC function initialize() { // Replace data source URL on next line with your data source URL var query = new google.visualization.Query('http://spreadsheets.google.com?...&key=123AB'); query.send(handleQueryResponse); // Send the query with a callback function } function handleQueryResponse(response) { // Called when the query response is returned } 查詢回傳的結果預設是整個資料來源的資訊. 以 Google Spreadsheets 為例, 一個資料來源是一群 cells 的集合, 而不是整個 spreadsheet. 你可以重新定義選取範圍, 還有透過 query language 來執行資料處理.
function initialize() { var query = new google.visualization.Query('http://spreadsheets.google.com?...&key=123AB'); query.setQuery('select C, sum(B) group by C'); query.send(handleQueryResponse); // Send the query with a callback function }
Processing the Query Response
當資料來源傳回查詢結果時會呼叫處理函數. 並且傳遞一個類別是 google.visualization.QueryResponse 的參數給這個處理函數. 查詢有成功跟失敗兩種情況, 查詢成功時, 查詢回應裡面會包含 DataTable, 而失敗的時候會包含一些錯誤的資訊, 而且沒有 DataTable.

一般而言, 回應處理函數可以做一些處理:

1. 檢查查詢成功或失敗, 並在需要的時候提出錯誤訊息.
2. 用回傳的資料做視覺效果圖.

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}); }