Google Visualization API (9) - Gadget Extensions

這邊來討論如何製作視覺效果的 Gadget. 典型的視覺效果 Gadget 會發送查詢到 Google Visualization API 資料來源, 並且將傳回來的資料顯示在 gadget 之中.
iGoogle 和 GoogleSpreadsheets 接受任何人開發的嵌入式 gadget. Visualization Gadget 的用途是從支援 Visualization API 的資料來源讀取資料, 然後顯示在 gadget 之中.

The "Hello World" of Visualization Gadgets
首先示範的是將 Google Visualization 資料顯示在 gadget 之中. 你可以從 Google 下載一個範本來進行修改.

Start with a Gadget Skeleton:

<!--xml version="1.0" encoding="UTF-8"?--> <Module> <ModulePrefs title="Simple Table Gadget"> </ModulePrefs> <UserPref name="_table_query_url" display_name="Data source URL" required="true"/> <Content type="html">&lt;![CDATA[ ]]> </Content> </Module> 這個 gadget 有個名稱為 _table_query_url 的偏好設定, 這是用來指定資料來源 URL 的設定選項. 當 gadgets 是可以自行設定資料來源時, 都要使用這個偏好設定名稱 _table_query_url.

Load the Visualization API: <Content type="html">&lt;![CDATA[ <div id="tablediv">Loading...</div> <script src="//www.google.com/jsapi" type="text/javascript"></script> <script type="text/javascript"> _IG_RegisterOnloadHandler(loadVisualizationAPI); function loadVisualizationAPI() { google.load("visualization", "1", {packages: ["table"]}); google.setOnLoadCallback(initialize); // Set callback to run when API is loaded } function initialize() { // Called when the API is loaded } </script> ]]> </Content> 第一個 script 標籤是載入 google.load 函數, 用來載入其他個別的 Google APIs. 然後使用 _IG_RegisterOnloadHandler 這個 gadget 工具, 在 gadget 完全載入時呼叫 loadVisualizationAPI 函數. 而這個函數則是用來載入 Visualization API 跟它的 packages.

Send the Query: function initialize() { // Create and send the query. var prefs = new _IG_Prefs(); // User preferences table = new google.visualization.Table(_gel('tablediv')); gadgetHelper = new google.visualization.GadgetHelper(); var query = gadgetHelper.createQueryFromPrefs(prefs); query.send(handleQueryResponse); // Send the query with a callback function } google.setOnLoadCallback(initialize); // Set callback to run when API is loaded // Query response handler function. function handleQueryResponse(response) { // Add code here to display the output table. } 這段是使用 createQueryFromPrefs 方法來產生 google.visualization.Query. 這個查詢會自動的從 gadget 喜好設定裡面找出名稱為 _table_query_url 的值來當做資料來源 URL . 建好之後使用 send 方法來向主機讀取資料.

Process the Query Response: function handleQueryResponse(response) { // Default error message handling if (!gadgetHelper.validateResponse(response)) return; var data = response.getDataTable(); table.draw(data, {showRowNumber: true}); } 使用回傳的資料來產生 HTML 表格.

Testing Your Gadget
想要試驗寫好的 gadget, 首先必須將 gadget 存成指定的 XML 格式放在主機上. 上面的範例放在這邊 http://www.google.com/ig/modules/simple-table.xml.
還可以使用 Google Gadget Editor (GGE) 來幫助你建立, 修改 gadget.

Test in Google Spreadsheets:
可以透過 Google Spreadsheets 來測試 Visualization Gadget. 需要這幾個步驟:

1. 建立一個符合 gadget 格式的 spreadsheet.
2. 選擇要顯示的資料範圍.
3. 由工具列上, 點選 'insert' 選擇 'Gadget'
4. Gadget 類型選擇 'Custom', 輸入 gadget XML 的 URL, 然後點擊 'Add'
5. 選擇性的設定 gadget 喜好設定, 然後將 gadget 新增到 spreadsheet 上.

Test in iGoogle:
在 iGoogle 上新增 gadget, 當跳出提示的時候提供資料來源 URL . 如果資料來源是使用 Google spreadsheet, 你可以由這些步驟獲取.

1. 在 spreadsheet 中, 選取資料範圍.
2. 在工具列上選擇 'Insert' 與 'Gadget'
3. 在右上角的地方打開 gadget 選單.
4. 選擇 'Get data source URL'

Automatic Query Refresh
設定 _table_query_refresh_interval 這個刷新間隔時間(秒), 可以讓 gadget 週期性的從資料來源重新獲取資料. 如果要讓使用者設定刷新間隔, 可以在 gadget header 上加上這些: <UserPref name="_table_query_refresh_interval" display_name="Data refresh interval (minutes)" default_value="0" datatype="enum" required="false"> <EnumValue value="0" display_value="None"/> <EnumValue value="60" display_value="1"/> <EnumValue value="300" display_value="5"/> <EnumValue value="1800" display_value="30"/> </UserPref>