How to play nicely with jQuery and Greasemonkey

jQuery & Greasemonkey 提供了一小段 Javascript code, 如何在 Greasemonkey 裡面使用 jQuery.


Code:

// Add jQuery var GM_JQ = document.createElement('script'); GM_JQ.src = 'http://jquery.com/src/jquery-latest.js'; GM_JQ.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(GM_JQ); // Check if jQuery's loaded function GM_wait() { if(typeof unsafeWindow.jQuery == 'undefined') { window.setTimeout(GM_wait,100); } else { $ = unsafeWindow.jQuery; letsJQuery(); } } GM_wait(); // All your GM code must be inside this function function letsJQuery() { alert($); // check if the dollar (jquery) function works }

Using parameters in setTimeout()

DOM:window.setTimeout 的語法:

timeoutID = window.setTimeout(func, delay, [param1, param2, ...]); timeoutID = window.setTimeout(code, delay); 當中:

• timeoutID
是此事件的 ID, 可以使用在 window.clearTimeout
• func
是一個函數, 在延遲了 delay 毫秒後執行
• code
是一個字串 在延遲了 delay 毫秒後執行的函數名稱(不建議使用此方法)
• delay
就是毫秒(千分之一秒), 用來延遲函數執行

注意: 第一個額外傳遞參數的語法, 在 IE 上無法執行.

底下解釋在 IE 上遇到了這種問題應該如何處理
通常要執行 window.setTimeout 時, 都是寫成這樣 window.setTimeout(myFunction, 10000); function myFunction() { // do something } 但是遇到要傳遞參數的時候, 格式就要稍微改變一下了 var arg1 = 'i am a value'; window.setTimeout(function() {myFunction(arg1);}, 10000); function myFunction(arg1) { // do something } 詳細說明, 還可以參考這篇文章

JavaScript:Array:splice

Core JavaScript 1.5 Reference:Global Objects:Array:splice


用途:
改變陣列的內容, 可以在移除舊元素的同時, 加進新的元素.


語法:

array.splice(index, howMany, [element1][, ..., elementN]);

參數:

• index
陣列中哪個位置開始改變的索引值.
• howMany
一個整數, 用來指出要移除多少個元素. 如果 howMany 等於 0, 則沒有任何元素被移除.
• element1, ..., elementN
要加入陣列的元素. 如果沒有指定任何新元素, 則 splice 的作用就是單純的將陣列中的元素移除掉.

說明:
如果移除跟新增的元素個數不同時, 呼叫完此方法後, 陣列的長度會改變.
splice 方法會回傳一個陣列, 裡面包含了被移除的元素. 就算只有一個元素被移除, 回傳的就是包含一個元素的陣列.


範例:
var myArray = ['001', '002', '003', '004']; alert('myArray: ' + myArray); // myArray: 001,002,003,004 var removed = myArray.splice(2, 0, 'aaa'); alert('第一次加入後: ' + myArray); // 第一次加入後: 001,002,aaa,003,004 alert('移除的: ' + removed); // 移除的: removed = myArray.splice(3, 1); alert('第二次移除後: ' + myArray); // 第二次移除後: 001,002,aaa,004 alert('移除的: ' + removed); // 移除的: 003 removed = myArray.splice(2, 1, "bbb"); alert('第三次取代後: ' + myArray); // 第三次取代後: 001,002,bbb,004 alert('移除的: ' + removed); // 移除的: aaa removed = myArray.splice(0, 2, "ccc", "ddd", "eee"); alert('第四次取代後: ' + myArray); // 第四次取代後: ccc,ddd,eee,bbb,004 alert('移除的: ' + removed); // 移除的: 001,002

Google Chart API (6) - Chart Type

目前可用的圖表有:

• Line chart: 折線圖
• Sparkline: 波型圖
• Bar chart: 條形圖
• Pie chart: 餅圖
• Venn diagram: 維恩圖
• Scatter plot: 散點圖
• Radar chart: 雷達圖
• Map: 地圖
• Google-o-meter: Google 指數

Google Chart API (5) - Chart data

在產生圖表之前必須將資料進行編碼, 轉成 Chart API 認識的格式. 使用下列其中一種格式:

• Text encoding: 使用正數浮點數字串, 從 0 ~ 100
  Text encoding with data scaling: 使用任何的正負數浮點數字串與縮放比例參數的組合. 注意這個對 map 無效.
  Allowing five pixels per data point, integers (1.0, 2.0, and so on) are sufficient for line and bar charts up to about 500 pixels. Include a single decimal place (35.7 for example) if you require a higher resolution. Text encoding is suitable for all types of chart regardless of size. Note this type of encoding generally results in the longest URL for a given data set.
• Simple encoding: 使用字母數字(A 到 Z, a 到 z, 0 到 9), 其中 A 代表 0, B 代表 1, 一直到 9 代表 61, 提供 62 個不同數值的轉換.
  Allowing five pixels per data point, this is sufficient for line and bar charts up to about 300 pixels. This type of encoding results in the shortest URL for a given data set.
• Extended encoding: 使用一對字母數字(還有一些其他的稍後討論) 其中 AA 代表 0, AB 代表 1, 一直到兩個句號(..) 代表 4095, 提供了 4,096 個不同的數值轉換.
  Extended encoding is best suited for large charts with a large data range. This type of encoding results in a URL twice the length of simple encoding for a given data set.

Note: 你可能想要計畫性的將資料進行 Simple/Extended 編碼. 可參考 JavaScript snippet for encoding data 這篇說明. 同樣的, 也有好幾位 Chart Group 成員貢獻 API - 可以在 Group 裡面慢慢找或是直接參考 Useful links to API libraries 這個文章.

Text encoding
需要使用這種格式來指定編碼資料
chd=t:<chart data string>
其中 <chart data string> 是由正數浮點數從 0.0 到 100.0, 還有一個負數 -1, 以及分隔符號 | 所組成的.
注意:

• 0.0 = 0, 1.0 = 1, 一直到 100.0 = 100
• 使用 -1 來指定一個無效的數值
• 如果資料多於一組時, 每組資料之間使用 | 符號分隔開來.

舉例: chd=t:10.0,58.0,95.0|30.0,8.0,63.0

注意: 在 text encoding 中, 會以資料裡最大的值, 將資料轉成百分比, 來當比例.

Text encoding with data scaling
需要兩個參數
chd=t:<chart data string>
chds=<data set 1 minimum value>,<data set 1 maximum value>,<data set n minimum value>,<data set n maximum value>
其中:

• <chart data string> 由正負浮點數組合而成
• <data set 1 minimum value> 是第一組資料的下限.
• <data set 1 maximum value> 是第一組資料的上限, 指定 100 時可省略.
• <data set n minimum value> 是第 n 組資料的下限.
• <data set n maximum value> 是第 n 組資料的上限, 指定 100 時可省略.

如果你提供了比資料組別還要少的比例參數, 則剩下的資料組別會延用最後一個比例參數. 所以你可以在單一範圍的圖表上提供只有一對的比例參數.
注意:

• 此參數對於 map 是無效的
• 使用範圍外的值來指定無效的數值
• 如果多於一組資料時, 每組資料使用 | 分隔開來

舉例: chd=t:30,-60,50,120,80&chds=-80,140

Simple encoding
使用這種格式來編碼
chd=s:<chart data string>
其中 <chart data string> 包含了: A ~ Z, a ~ z, 0 ~ 9, 底線(_), 與當分隔符號的逗號(,).
注意:

• 大寫字母 A = 0, B = 1 一直到 Z = 25
• 小寫字母 a = 26, b = 27 一直到 z = 51
• 零(0) = 52 一直到 9 = 61
• 底線(_) 代表指定一個無效的數值
• 如果多於一組的資料時, 使用逗號(,)將每組資料分隔開來

兩組資料範例: chd=s:ATb19,Mn5tz 其中的第一組資料裡面, A 代表 0, T 代表 19, b 代表 27, l 代表 53, 9 代表 61.

注意: 更詳細的介紹請參考 Simple encoding character values

Extended encoding
使用這種格式來編碼
chd=e:<chart data string>
其中 <chart data string>
包含了一對一對的字元: A ~ Z, a ~ z, 0 ~ 9, 連字號(-), 句號(.), 底線(_), 還有當分隔符號的逗號(,).
注意:

• AA = 0, AZ = 25, Aa = 26, Az = 51, A0 = 52, A9 = 61, A- = 62, A. = 63
  BA = 64, BZ = 89, Ba = 90, Bz = 115, B0 = 116, B9 = 125, B- = 126, B. = 127
  .A = 4032, .Z = 4057, .a = 4058, .z = 4083, .0 = 4084, .9 = 4093, .- = 4094, .. = 4095.
• 使用兩個底線(__)來指定無效的數值
• 如果多於一組的資料時, 使用逗號(,)將每組資料分隔開來

注意: 更詳細的介紹請參考 Extended encoding character values

JavaScript snippet for encoding data
這段 JavaScript 可將實際資料編碼成 Simple encoding. 將要編碼的資料放在陣列裡. 其中如果資料是負數時會自動變成底線(_).
Code:
var simpleEncoding = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; function simpleEncode(valueArray,maxValue) { var chartData = ['s:']; for (var i = 0; i < valueArray.length; i++) { var currentValue = valueArray[i]; if (!isNaN(currentValue) && currentValue >= 0) { chartData.push(simpleEncoding.charAt(Math.round((simpleEncoding.length-1) * currentValue / maxValue))); } else { chartData.push('_'); } } return chartData.join(''); }
假如將 maxValue 設定的陣列裡最大的數字稍微大一點, 則在產生圖表時, 最大值跟圖表上方就會保留一小段空間. var valueArray = new Array(0,1,4,4,6,11,14,17,23,28,33,36,43,59,65); var maxValue = 70; simpleEncode(valueArray,maxValue);

Guidelines for granularity
小心不要在一個圖表裡表現過多數量的資料. 如果顯示過去十年的每日資料, 就大於 3600 的值了. 這樣子會在 URL 裡面傳入過多的值, . 在一個 1024 像素寬的螢幕裡面, 每個資料只有四分之一的像素. 底下用幾個範例來說明這個問題點.
20 個資料在 200x100 的圖表裡(每個資料 10 像素): 輕易的分辨每個資料, 在 x 軸上都分的很開

40 個資料(每個資料 5 像素): 稍微不容易分辨每個資料, 在 x 軸上間隔較小

80 個資料(每個資料只有 2.5 像素): 讀取困難, 間隔在 x 軸上壓縮的非常小

Google Chart API (4) - Chart size

使用 chs=<width in pixels>x<height in pixels> 來指定圖表的大小

例如, chs=300x200 產生一個寬 300 像素與高 200 像素的圖表.

除了 map 以外其他所有的圖表最大是 300,000 像素. 另外最大的高度與寬度是 1000 像素. 最大尺寸的例子有 1000x300, 300x1000, 600x500, 500x600, 800x375, 375x800.

而 map 最大的尺寸是寬 440 像素, 高 220 像素.

如果尺寸指定的過小時, 圓餅圖會被剪裁掉一部分. 通常圓餅圖的尺寸建議:

• 二維圓餅圖的寬度大約是高度的兩倍
• 三維圓餅圖的寬度大約是高度的兩倍半再多一點

Google Chart API (3) - Required and optional parameters

使用 Google Chart API 時, 有三項必要參數:

• Chart size
• Chart data
• Chart type

其他所有參數則是選擇性的. 不同的圖表類型的選擇性參數全部列在這邊. 其中 QR Codes 因為沒有選擇性參所以不在清單之中.

Google Chart API (2) - URL format

Google Chart API URLs 必須是這樣子的格式:
http://chart.apis.google.com/chart?<parameter 1>&<parameter 2>&<parameter n>

注意: 每個 URL 必須只有一行.

每個參數之間使用 (&) 符號分隔開來. 你可以指定你所需要的參數, 不論順序. 例如, 這張圖表的 URL:

http://chart.apis.google.com/chart?
chs=250x100
&chd=t:60,40
&cht=p3
&chl=Hello|World


• http://chart.apis.google.com/chart? 是 Chart API 的位址
• & 是分隔參數用的
• chs=250x100 是圖表尺寸的像素
• chd=t:60,40 是圖表的資料
• cht=p3 是圖表的樣式
• chl=Hello|World 是圖表的分類稱呼

你可以將 Chart API 圖案的 URL 使用在 <img> 標籤裡:
<img src="http://chart.apis.google.com/chart?
chs=250x100
&amp;chd=t:60,40
&amp;cht=p3
&amp;chl=Hello|World"
alt="Sample chart" />


注意: 當使用 HTML <img> 時, 要使用 & 來取代 (&) 符號.

Google Chart API (1) - Developer's Guide

Google Chart API 的功用是動態產生圖表. 首先來看看 Chart API 的實際例子, 打開瀏覽器並將複製底下這串網址:
http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World
你應該會看到一個這樣的圖案:


Introduction
Google Chart API 傳回的是 PNG 格式的圖案. 並提供好幾種樣式的圖案: 線性圖, 柱狀圖, 圓餅圖..等. 每種圖案都可以指定尺寸, 顏色, 標籤等屬性.
你可以使用 <img> 標籤在網頁上顯示 Chart API 的圖案.

Google AJAX Feed API (5) - Discovering Feeds

這兩個範例使用 global 方法, google.feeds.findFeeds 與 google.feeds.lookupFeed.

首先使用 google.feeds.findFeeds 來搜尋將結果動態的顯示在 FeedControl. Code:

&lt;html> &lt;head> <script type="text/javascript" src="//www.google.com/jsapi?key=YOUR-KEY"></script> <script type="text/javascript"> google.load("feeds", "1"); var defaultQuery = 'Official Google Blogs'; function findFeeds(query) { google.feeds.findFeeds(query, feedSearchDone); } function feedSearchDone(result) { var el = document.getElementById('feedControl'); if (result.error || result.entries.length <= 0) { el.innerHTML = 'No Results Found'; return; } // Create a feed control var feedControl = new google.feeds.FeedControl(); // Grab top 4.. for (var i = 0; i < 4; i++) { feedControl.addFeed(result.entries[i].url, result.entries[i].title); } feedControl.setLinkTarget(google.feeds.LINK_TARGET_BLANK); feedControl.setNumEntries(2); feedControl.draw(el); } google.setOnLoadCallback(function() {findFeeds(defaultQuery)}); </script> &lt;/head> &lt;body> <div id="feedControl">Loading</div> &lt;/body> &lt;/html> Demo:

Loading

第二個範例使用 google.feeds.lookupFeed, 輸入 Flickr 帳號, 然後動態的展示該帳號的照片.
Code: &lt;html> &lt;head> <script type="text/javascript" src="//www.google.com/jsapi?key=YOUR-KEY"></script> <script src="//www.google.com/uds/solutions/slideshow/gfslideshow.js" type="text/javascript"></script> <script type="text/javascript"> google.load("feeds", "1"); var defaultUser = 'dlc0421'; function newSlideShow(user) { showStatus('Resolving feed for ' + user); var url = 'http://www.flickr.com/photos/' + user; google.feeds.lookupFeed(url, lookupDone); } function lookupDone(result) { if (result.error || result.url == null) { showStatus('Could not locate feed for user'); return; } showStatus('Found Photo Feed'); // We need to switch over from Atom to RSS to get Yahoo Media for slideshow.. var url = result.url.replace('format=atom', 'format=rss_200'); showSlideShow(url); } function showSlideShow(url) { var options = { displayTime: 2500, transistionTime: 800, scaleImages: true, thumbnailTag: 'content', linkTarget : google.feeds.LINK_TARGET_BLANK }; new GFslideShow(url, "slideshow", options); } function showStatus(msg) { var ss = document.getElementById("feeds-5-div-2"); ss.innerHTML = '<div class=\"feed-loading\">' + msg + '</div>'; } google.setOnLoadCallback(function() {newSlideShow(defaultUser)}); </script> &lt;/head> &lt;body> <div id="slideshow">Loading</div> &lt;/body> &lt;/html> Demo:

Loading

^^^^^^^^^^^^現在有問題 不過 GFW 也把 Flickr 擋掉了, 我改天再修理.

Google AJAX Feed API (4) - The FeedControl

這個範例使用了高階的 google.feeds.FeedControl 類別顯示一連串的 feeds. 這個類別類似於 AJAX Search API 中的 SearchControl. 這個範例建了 FeedControl 類別, 然後新增了兩個 feeds, 並且繪製出來.
Code:

&lt;html> &lt;head> <script type="text/javascript" src="//www.google.com/jsapi?key=YOUR-KEY"></script> <script type="text/javascript"> google.load("feeds", "1"); function initialize() { var feedControl = new google.feeds.FeedControl(); feedControl.addFeed("http://www.digg.com/rss/index.xml", "Digg"); feedControl.addFeed("http://feeds.feedburner.com/Techcrunch", "TechCrunch"); feedControl.draw(document.getElementById("feedControl")); } google.setOnLoadCallback(initialize); </script> &lt;/head> &lt;body> <div id="feedControl">Loading</div> &lt;/body> &lt;/html> Demo:

Google AJAX Feed API (3) - Examples

The Basics
示範從單一 feed 取得資料, 並且顯示每個內容的標題.
Code:

var feed = new google.feeds.Feed("http://www.digg.com/rss/index.xml"); feed.load(function(result) { if (!result.error) { var container = document.getElementById("feed"); for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var div = document.createElement("div"); div.appendChild(document.createTextNode((i+1) + '. ' + entry.title)); container.appendChild(div); } } }); Demo:

JSON Result Format
這範例與上面基本範例很類似, 但是它顯示了 AJAX Feed API 最典型的 JSON 屬性. 詳細內容可參考 JSON result format specification.
Code: var feed = new google.feeds.Feed("http://www.digg.com/rss/index.xml"); feed.load(function(result) { if (!result.error) { var container = document.getElementById("feed"); for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var attributes = ["title", "link", "publishedDate", "contentSnippet"]; for (var j = 0; j < attributes.length; j++) { var div = document.createElement("div"); div.appendChild(document.createTextNode(attributes[j] + ': ' + entry[attributes[j]])); container.appendChild(div); } container.appendChild(document.createElement("hr")); } } }); Demo:

XML Result Format
使用 XML DOM 取代 JSON 來讀取 RSS 跟 Atom feed. 兩種 feed 之間最大不同的地方是 RSS 使用 item 而 Atom 則使用 entry.
第一個範例是使用 XML DOM 直接讀取 RSS feed. 範例中使用了 AJAX Feed API 的 getElementsByTagNameNS 來取得 Digg Feed 中 diggCount 這個增設的資料.
Code: var feed = new google.feeds.Feed("http://www.digg.com/rss/index.xml"); feed.setResultFormat(google.feeds.Feed.XML_FORMAT); feed.load(function(result) { var container = document.getElementById("feed"); if (!result.error) { var items = result.xmlDocument.getElementsByTagName("item"); for (var i = 0; i < items.length; i++) { var titleElement = items[i].getElementsByTagName("title")[0]; var title = titleElement.firstChild.nodeValue; var votesElement = google.feeds.getElementsByTagNameNS(items[i], "http://digg.com/docs/diggrss/", "diggCount")[0]; var votes = votesElement.firstChild.nodeValue; var div = document.createElement("div"); div.appendChild(document.createTextNode(title + " (" + votes + " votes)")); container.appendChild(div); } } }); Demo:

第二個範例是使用 XML DOM 直接讀取 Atom feed. 範例中使用了 AJAX Feed API 的 getElementsByTagNameNS 來取得 Google Base Feed 中的資料.
Code: var feed = new google.feeds.Feed("http://www.google.com/base/feeds/snippets"); feed.setResultFormat(google.feeds.Feed.XML_FORMAT); feed.load(function(result) { var container = document.getElementById("feed"); if (!result.error) { var entries = google.feeds.getElementsByTagNameNS(result.xmlDocument, "http://www.w3.org/2005/Atom", "entry"); for (var i = 0; i < entries.length; i++) { var titleElement = google.feeds.getElementsByTagNameNS(entries[i], "http://www.w3.org/2005/Atom", "title")[0]; var title = titleElement.firstChild.nodeValue; var updatedElement = google.feeds.getElementsByTagNameNS(entries[i], "http://www.w3.org/2005/Atom", "updated")[0]; var updated = updatedElement.firstChild.nodeValue; var div = document.createElement("div"); div.appendChild(document.createTextNode(title + " (" + updated + ")")); container.appendChild(div); } } }); Demo:

Combined JSON/XML Result Format
這範例將上面的 XML 重新作一遍, 但是結合 JSON/XML DOM 格式.
Code: var feed = new google.feeds.Feed("http://www.digg.com/rss/index.xml"); feed.setResultFormat(google.feeds.Feed.MIXED_FORMAT); feed.load(function(result) { if (!result.error) { var container = document.getElementById("feed"); for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var votesElement = google.feeds.getElementsByTagNameNS(entry.xmlNode, "http://digg.com/docs/diggrss/", "diggCount")[0]; var votes = votesElement.firstChild.nodeValue; var div = document.createElement("div"); div.appendChild(document.createTextNode(entry.title + " (" + votes + "votes)")); container.appendChild(div); } } }); Demo:

Google AJAX Feed API (2) - Introduction

Javascript 與 XMLHttpRequest 使用 Same-Origin Policy (SOP). 根據這個規則, 只允許 script 從相同主機的來源存取資料. 這是為了防止使用者遭受到某些種類的 scripting 攻擊, 但同時也限制了開發者撰寫基於 AJAX 的混搭. Google AJAX Feed API 提供一個 workaround 的方法來取得 web 上特殊類型的資料: syndication feeds. 請看 security notes 有更多的細節關於 AJAX Feed API 如何作安全性處理.

The "Hello, World" of the Google AJAX Feed API
接下來的範例將取得 Digg RSS Feed 並且顯示文章標題給使用者看.

&lt;html> &lt;head> <script type="text/javascript" src="//www.google.com/jsapi?key=YOUR_KEY_HERE"></script> <script type="text/javascript"> google.load("feeds", "1"); function initialize() { var feed = new google.feeds.Feed("http://www.digg.com/rss/index.xml"); feed.load(function(result) { if (!result.error) { var container = document.getElementById("feed"); for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var div = document.createElement("div"); div.appendChild(document.createTextNode(entry.title)); container.appendChild(div); } } }); } google.setOnLoadCallback(initialize); </script> &lt;/head> &lt;body> <div id="feed"></div> &lt;/body> &lt;/html> 你可以由 Google 下載這個範例, 但是必須將 key 換成你自己的 Google API key.

Including the AJAX Feed API on Your Page
引用 AJAX Feed API, 需要同時引用 Google AJAX APIs 標籤與呼叫 google.load("feeds", "1");
<script type="text/javascript" src="//www.google.com/jsapi?key=YOUR_KEY_HERE"></script> <script type="text/javascript"> google.load("feeds", "1"); </script>
JSON and XML Result Formats
AJAX Feed API 回傳兩種格式的 feeds: JSON 和 XML. 預設是使用 JSON 格式.
AJAX Feed API JSON 格式是一種精簡且規範的版本. 它使用一組共通的 JSON 屬性, 映射到 Atom 與 RSS 屬性上, 像是 title, description, 和 summary, 使用統一的方法來存取 Atom 與 RSS. 舉例來說, JSON 格式在回傳 RSS 屬性 description 時, 使用 JSON 的 content 屬性, 跟 Atom 一樣. 同樣的, RSS 的 pubDate 回傳時是使用 JSON 的 publishedDate 屬性. JSON 格式對於存取標準的 RSS 與 Atom 時是非常好用的, 你不需要考慮到兩種格式之間的差異. 其他細節部分可以參考 JSON result format specification.

如果你使用 setResultFormat 來指定回傳 XML 格式, AJAX Feed API 將會回傳完整的 XML 結果來取代 JSON 結果. 你可以使用瀏覽器內標準的 XML DOM 函數來取得 XML 文件. XML 格式在需要取得 feed 額外拓展元素的時候非常有用, 像是 digg:diggCount. 其他細節部分可以參考 XML result format specification.

你也可以同時取得 JSON 與 XML 格式. 請看 combined XML/JSON example 這範例使用 JSON 取得 feed 的內容, 但是使用 XML DOM 去取得 Digg 的 digg:diggVotes.

Google AJAX Feed API (1) - What is the Google AJAX Feed API?

使用 Google AJAX Feed API 只需要藉由 Javascript 就可以取得任何公開的 Atom 或是 RSS, 更輕易的將資料內容與其他 APIs 混搭在一起.
Google AJAX Feed API 讓開發更加的簡單, 只需要短短幾行的程式碼, 免除複雜的伺服器端代理. 輕鬆快速的整合在網站上.

Loading...

Feed Control wizard: 可以不需要寫任何程式碼, 將 feed control 加在網頁或是部落格上.
Developer guide 與 Example Projects: 可以學習到 AJAX Feed API.

Google Visualization API (10) - Reference

API Reference
http://code.google.com/apis/visualization/documentation/reference.html
目前有四個可以使用, 全部都在命名空間為 google.visualization.* 底下:

• DataTable: 存放資料的二維表格. 每欄都有各自的資料類型.
• GadgetHelper: helper 類別用於簡化在 Gadgets 中寫 Google Visualization API 的功能.
• Query: 傳遞到資料來源的查詢.
• QueryResponse: 由資料來源傳回來的查詢結果.

Query Language Reference (Version 0.6)
http://code.google.com/apis/visualization/documentation/querylanguage.html
查詢是一段符合查詢語法的字串. 向資料來源要資料時預設是空白查詢, 這代表傳回所有的資料內容.
查詢字串可以使用兩種方法向資料來源取得資料: 在 Javascript 中設定查詢字串, 或是將查詢字傳加在資料來源 URL 後面.
Setting the Query from JavaScript:
呼叫 google.visualization.Query 裡面的 setQuery 方法. var query = new google.visualization.Query(DATA_SOURCE_URL); query.setQuery('select deptname, sum(salary) group by deptname'); query.send(handleQueryResponse); Setting the Query in the Data Source URL:
在資料來源 URL 之後, 加上 tq 參數. 這邊要注意的是查詢字串必須使用 Javascript 的 encodeURIComponent 編碼過. http://spreadsheet.google.com/tq?key=ABCDE&tq=select%20deptname%2C%20sum(salary)%20group%20by%20deptname

select deptname, sum(salary) group by deptname

Visualization Gallery
http://code.google.com/apis/visualization/documentation/gallery.html
所有使用的視覺效果通通都可以在這邊查詢到使用方法.

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>

Google Visualization API (8) - Creating Visualizations Events

Triggering an Event
在視覺效果中可以呼叫 google.visualization.events.trigger 來觸發事件. 這個功能需要幾個參數:

1. 視覺效果來源(通常使用 this)
2. 事件名稱(string)
3. 事件明細(Object). 一個指定事件明細的選擇性 map(name/value)

底下這個例子示範視覺效果如何處理 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); };
Event Listeners
使用 google.visualization.events.addListener() 可以為視覺效果註冊事件. 這個方法需要一個物件, 一個聆聽事件, 一個被呼叫的方法. 底下這些示範每一次這在表格列上點擊時會出現提醒. 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'); }
The Select Event
支援選取的視覺效果應該具備:

1. 當使用者選取視覺效果時必須觸發一個名為 'select' 的事件. 這個事情不需要其他屬性.
2. 提供 getSelection() 方法. 這方法回傳使用者選取的 data 的索引. 回傳值是一個陣列, 裡面的每個內容都有 row 跟 column 屬性. 而 row 跟 column 就是資料在 DataTable 裡面的索引值.
3. 提供 setSelection(selection) 方法. 這方法也是回傳選取的陣列. 當這方法呼叫的時候, 視覺效果應該在顯示上表示出被選取的項目. 實作 setSelection() 時不可以觸發到 select 事件.
   視覺效果可以忽略部分的選取. 例如一個表格限定只選取一整列時, 就可以忽略每一格或是每一欄的選取.

Google Visualization API (7) - The "Hello World" of Creating Visualizations

示範如何製作一個將資料顯示在表格裡面的視覺效果:

// Class constructor. Parameter container is a DOM element. function MyTable(container) { this.containerElement = container; } // Main drawing logic. // Parameter data is of type google.visualization.DataTable. // Parameter options is a name/value map of options. MyTable.prototype.draw = function(data, options) { // Create an html table var showLineNumber = options.showLineNumber; // Boolean configuration option. var html = []; html.push('<table border="1">'); // Header row html.push('<tr>'); if (showLineNumber) { html.push('<th>Seq</th>'); } for (var col = 0; col < data.getNumberOfColumns(); col++) { html.push('<th>' + this.escapeHtml(data.getColumnLabel(col)) + '</th>'); } html.push('</tr>'); for (var row = 0; row < data.getNumberOfRows(); row++) { html.push('<tr>'); if (showLineNumber) { html.push('<td align="right">', (row + 1), '</td>'); } for (var col = 0; col < data.getNumberOfColumns(); col++) { html.push(data.getColumnType(col) == 'number' ? '<td align="right">' : '<td>'); html.push(this.escapeHtml(data.getFormattedValue(row, col))); html.push('</td>'); } html.push('</tr>'); } html.push('</table>'); this.containerElement.innerHTML = html.join(''); } // Utility function to escape HTML special characters MyTable.prototype.escapeHtml = function(text) { if (text == null) return ''; return text.replace(/&/g, '&amp;amp;').replace(/&lt;/g, '&amp;lt;') .replace(/>/g, '&amp;gt;').replace(/"/g, '&amp;quot;'); } 視覺效果圖示一個類別(Javascript 函數), 建構的時候傳入一個產生效果時要放置的 DOM. function MyTable(container) { this.container = container } 視覺效果還必須有個 draw 方法, 定義在視覺效果類別的原型上. 這個方法接受兩個參數:

1. 包含要顯示資料的 DataTable
2. 選擇參數(Object), 這個參數可以是 null. 使用 name/value 的方式來定義
每個參數都應該有預設值, 用於沒有特別指定的情況時使用.

MyTable.prototype.draw = function(data, options) { // Process data and options and render output into the container element. }
Including Your Visualization in a Web Page
將視覺效果的 Javascript code 存放在可取得的地方, 接下來的例子我們假設是儲存在 http://www.mydomain.com/myvis.js &lt;html> &lthead> <script type="text/javascript" src="//www.google.com/jsapi"></script> <script type="text/javascript" src="//www.mydomain.com/myvis.js"></script> <script type="text/javascript"> google.load("visualization", "1"); google.setOnLoadCallback(drawVisualization); // Set callback to run when API is loaded function drawVisualization() { // Called once the Visualization API is loaded var data = new google.visualization.DataTable(); data.addColumn('string', 'Task'); data.addColumn('number', 'Daily Hours'); data.addRows(5); data.setCell(0, 0, 'Work'); data.setCell(0, 1, 11); // Add more data rows and cells here var vis = new MyVisualization(document.getElementById('mydiv')); vis.draw(data, {showLineNumber: true}); } </script> &lt/head> &ltbody> <div id="mydiv"></div"> &lt/body> &lt/html>
Avoiding Namespace Conflicts
製作視覺效果的時候應該盡量避免跟其他 Javascript 的命名或是 CSS 規則, 產生衝突.

避免使用全域變數. 可以建立一個獨立的命名空間存放所有資料. Google 的所有視覺效果都使用 google.visualization 這個命名空間. var acme = {}; // Namespace, single global variable acme.MyChart = function(container) { // ... } acme.MyChart.prototype.draw = function(data, options) { // ... } 如果需要使用到 CSS, 不要編寫 CSS 規則, 這可能會影響到其他的視覺效果. 舉例來說, td {color: blue;} 會直接影響到畫面上其他 <td>, 並非只限於你的視覺效果圖.

克服這種問題還有個解決方法, 將整個視覺效果內容使用有 class 名稱的 div 包裝起來, 而所有的 CSS 規則使用在這個 class 名稱底下. 例如, 底下這範例的 CSS 規則只在 class 是 "acme-visualization" 底下的 <td> 上有作用. .acme-visualization td { color: blue; } 而視覺效果應該寫在這裡面: <div class="acme-visualization"> // ... </div>
Documentation and Samples
留下文件與做個範例可以讓視覺效果更方便其他人使用.

• 寫下所有支援的選項; 每個選項名稱; 預期的類型, 以及預設值.
• 寫下所有支援的方法. draw 方法是所有視覺效果共有的, 但是每個視覺效果都可以擁有各自額外的方法.
• 寫下所有可處發的事件; 每個事件名稱和屬性以及每個事件觸發的時機.
• 製作一個範例, 描述如何使用視覺效果, 以及如何使用它支援的選項參數, 事件, 方法.
• 清楚的描述視覺效果的資料策略. 大部分的視覺效果在瀏覽器中直接處理資料, 但是有些必須送資料到主機上, 例如建立一個圖案或是地圖. 如果你送資料到主機的話:
  • 清楚的定義傳送什麼資料.
  • 提醒資料會在主機上存放多久.
  • 記載什麼樣的資料會被誰取用. E.g.: Company XYZ, etc.
  • 當資料被紀錄下來時會放多久.

Troubleshooting
如果程式碼不起作用時, 有幾種方法可能可以協助你解決問題:

• 檢查排版. 記住 Javascript 是區分大小寫的語言.
• 使用 JavaScript debugger. 在 Firefox 中, 你可以使用 JavaScript console, Venkman Debugger, 或是 Firebug add-on. 在 IE 中, 你可以使用 Microsoft Script Debugger.
• 在 Google Visualization API 討論群組中搜尋你的問題. 如果你無法找到能夠回答你問題的文章時, 將你的問題發表在討論群組上面, 並附上一個能夠表明問題的網頁.

Google Visualization API (6) - Code Examples

Table Example

* 這裡有範例 當你看到這行字 表示程式出錯了 *

function drawTable() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Name'); data.addColumn('number', 'Salary'); data.addColumn('boolean', 'Full Time'); data.addRows(5); data.setCell(0, 0, 'John'); data.setCell(0, 1, 10000, '$10,000'); data.setCell(0, 2, true); data.setCell(1, 0, 'Mary'); data.setCell(1, 1, 25000, '$25,000'); data.setCell(1, 2, true); data.setCell(2, 0, 'Steve'); data.setCell(2, 1, 8000, '$8,000'); data.setCell(2, 2, false); data.setCell(3, 0, 'Ellen'); data.setCell(3, 1, 20000, '$20,000'); data.setCell(3, 2, true); data.setCell(4, 0, 'Mike'); data.setCell(4, 1, 12000, '$12,000'); data.setCell(4, 2, false); var table = new google.visualization.Table(document.getElementById('table_div')); table.draw(data, {showRowNumber: true}); google.visualization.events.addListener(table, 'select', function() { var row = table.getSelection()[0].row; alert('You selected ' + data.getValue(row, 0)); }); } Gauge Example

* 這裡有範例 當你看到這行字 表示程式出錯了 *

<script> var gaugeData = new google.visualization.DataTable(); gaugeData.addColumn('number', 'Engine'); gaugeData.addColumn('number', 'Torpedo'); gaugeData.addRows(2); gaugeData.setCell(0, 0, 120); gaugeData.setCell(0, 1, 80); var gaugeOptions = {min: 0, max: 280, yellowFrom: 200, yellowTo: 250, redFrom: 250, redTo: 280, minorTicks: 5}; var gauge; function drawGauge() { gauge = new google.visualization.Gauge(document.getElementById('gauge_div')); gauge.draw(gaugeData, gaugeOptions); } function changeTemp(dir) { gaugeData.setValue(0, 0, gaugeData.getValue(0, 0) + dir * 25); gaugeData.setValue(0, 1, gaugeData.getValue(0, 1) + dir * 20); gauge.draw(gaugeData, gaugeOptions); } </script> <input type='button' value='Go Faster' onclick='changeTemp(1)' /> <input type='button' value='Slow down' onclick='changeTemp(-1)' /> Intensity Map Example

* 這裡有範例 當你看到這行字 表示程式出錯了 *

function drawIntensityMap() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Country'); data.addColumn('number', 'Sales'); data.addColumn('number', 'Expenses'); data.addRows(4); data.setCell(0, 0, 'US'); data.setCell(0, 1, 10000); data.setCell(0, 2, 8000); data.setCell(1, 0, 'CA'); data.setCell(1, 1, 7000); data.setCell(1, 2, 5000); data.setCell(2, 0, 'CN'); data.setCell(2, 1, 8000); data.setCell(2, 2, 12000); data.setCell(3, 0, 'GB'); data.setCell(3, 1, 7000); data.setCell(3, 2, 15000); var imap = new google.visualization.IntensityMap(document.getElementById('intensitymap_div')); imap.draw(data, {}); }

Google Visualization API (5) - Using Gadgets

Google Visualization API gadgets 可以使用一種簡便的方式存取資料來源. 對開發者而言, 這代表可以寫一次應用程式然後重複使用在多種不同資料來源上. 對使用者而言, 則是可以擁有多種不同的選擇來處理資料.

Using Visualization Gadgets
Starting from Google Spreadsheets

1. 在 spreadsheet 工具列選擇, 'Insert' / 'Gadget'.
2. 從清單裡面挑選一個 gadget.
3. 選取資料範圍. 選擇性的做些選項設定.

Starting from iGoogle
視覺效果 gadgets 會提醒你填入支援 Google Visualization API 的資料來源 URL. 例如, 由 Google Spreadsheet 取得:

1. 開啟 spreadsheet.
2. 新增 gadget, 並選取資料範圍.
3. 點擊 gadget 右上角的方向圖示.
4. 選擇 'get query data-source URL'.
5. 複製-貼上 URL 到 'data-source URL' gadget 裡面.

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

Google Visualization API (3) - Using Visualizations Events

Event Listeners
Google Visualization API 處理事件的時候是使用 google.visualization.events 這個命名空間裡的共用函數去註冊 event listeners. 每一個實作 Visualization API 的視覺效果都會有一些觸發的事件. 例如 OrgChart 就有一個 select 事件.
使用 google.visualization.events.addListener() 可以為某個物件加上指定的 event listeners. 例如, 底下個範例就是在每次 click 表格的時候出現提醒對話框.

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

* 這裡有範例 當你看到這行字 表示程式出錯了 *

The Select Event
某些視覺效果的觸發事件是該視覺效果獨有的, 也有些事件是視覺效果共同有的. select 事件就是一個通用事件, 每個可被選取的視覺效果應該使用同樣的方法來處理選取事件.
支援選取的視覺效果有底下這些特性:

1. 當使用者選取視覺效果上的資料時, 會觸發名稱為 'select' 的事件.
2. 提供 getSelection() 方法. 使用者選取資料的時候會傳回該資料的索引. 而這個方法傳回資料陣列, 每個項目裡有 row 和 column 屬性的物件. row 和 column 代表 DataTable 裡的索引.
   如果 row 和 column 都代表選取了 cell, 如果只有 row 代表選取一整列, 如果只有 column 代表選取一整欄
3. 提供 setSelection(selection) 方法, 可以傳入陣列, 裡面的每個項目都有 row 和 column 的屬性. 呼叫這個方法的時候, 視覺效果應該在外觀上指出新的選取項目. 實作 setSelection() 時候不會觸發 select 事件

這個範例會再選取 table 的時候, 跳出提醒對話框: var table = new google.visualization.Table(document.getElementById('table_div')); table.draw(data, options); google.visualization.events.addListener(table, 'select', selectHandler); function selectHandler() { var selection = table.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); }

* 這裡有範例 當你看到這行字 表示程式出錯了 *

這個範例是兩個 chart 之間的選取效果: var table = new google.visualization.Table(document.getElementById('table_div')); table.draw(data, {}); var org = new google.visualization.OrgChart(document.getElementById('org_div')); org.draw(data, {}); google.visualization.events.addListener(table, 'select', function() { org.setSelection(table.getSelection()); }); google.visualization.events.addListener(org, 'select', function() { table.setSelection(org.getSelection()); });

* 這裡有範例 當你看到這行字 表示程式出錯了 *

* 這裡有範例 當你看到這行字 表示程式出錯了 *

Google Visualization API (2) - The "Hello World" of Using Visualizations

先來一個最基本的 pie chart:

&lt;html> &lt;head> <script type="text/javascript" src="//www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["piechart"]}); google.setOnLoadCallback(drawChart); // Set callback to run when API is loaded function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Task'); data.addColumn('number', 'Hours per Day'); data.addRows(5); data.setValue(0, 0, 'Work'); data.setValue(0, 1, 11); data.setValue(1, 0, 'Eat'); data.setValue(1, 1, 2); data.setValue(2, 0, 'Commute'); data.setValue(2, 1, 2); data.setValue(3, 0, 'Watch TV'); data.setValue(3, 1, 2); data.setValue(4, 0, 'Sleep'); data.setValue(4, 1, 7); var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, {width: 400, height: 240, is3D: true, title: 'My Daily Activities'}); } </script> &lt;/head> &lt;body> <div id="chart_div"></div> &lt;/body> &lt;/html> 上面的 code 會產生底下這個例子. 而且這個 chart 是可以互動的, 試著點上面的圖案看看.

Including the Visualization API on Your Page
使用 Visualization API 需要引用 Google AJAX APIs script tag 還有呼叫 google.load("visualization", "1");, 以及使用 packages 屬性來指定你要使用的 visualization 名稱: <script type="text/javascript" src="//www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["piechart"]}); function drawChart() { // Called once the Visualization API is loaded } google.setOnLoadCallback(drawChart); // Set callback to run when API is loaded </script> 如果要引用多種 visualization package 的話: google.load("visualization", "1", {packages:["piechart", "table", "linechart"]}); 在 Visualization Gallery 可以找到每個 visualization 的名稱, 文件以及載入的指示.

Creating a DataTable
所有 visualization 的資料都是使用 DateTable class 建立的. DataTable 是一個二維的表格, 由 rows, columns, cells 組成. 每個 column 都有定義資料類型. var data = new google.visualization.DataTable(); data.addColumn('string', 'Task'); data.addColumn('number', 'Hours per Day'); data.addRows(5); data.setValue(0, 0, 'Work'); // Row 0, column 0 data.setValue(0, 1, 11); // Row 0, column 1 data.setValue(1, 0, 'Eat'); // Row 1, column 0 data.setValue(1, 1, 2); data.setValue(2, 0, 'Commute'); data.setValue(2, 1, 2); data.setValue(3, 0, 'Watch TV'); data.setValue(3, 1, 2); data.setValue(4, 0, 'Sleep'); data.setValue(4, 1, 7);
Adding a Visualization
建構 visualization 的時候必須提供一個 DOM element 參數, 用來指定繪製的時候要出現在哪. 並且呼叫 draw 方法將圖案繪製在指定的容器裡. draw 方法需要兩個參數: 一個是 DataTable, 另外一個是選擇性參數. var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, {width: 400, height: 240, is3D: true, title: 'My Daily Activities'}); 當資料或是選擇的參數改變的時候, draw 方法可以多次呼叫.

Google Visualization API (1) - What is the Google Visualization API?

Google Visualization API 可以讓你把各種有結構性的資料來源, 在多種 visualizations 的選擇裡顯示出來. 而且還提供了一個平台讓開發者可以創造, 分享, 重複使用這些 visualizations.

AJAX Libraries API (2) - Introduction

Using google.load()
使用 google.load(), 指定 library 名稱, 和 version 來載入.

google.load("jquery", "1.2.3"); google.load("prototype", "1.6"); google.load("scriptaculous", "1.8.1"); google.load("mootools", "1.11"); google.load("dojo", "1.1.1");
Versioning with google.load()
版本系統, 可以視你的需要來指定版本, 可以精確的指定或是使用萬用字元. 舉例來說, 如果有一組版本: 1.9.1 1.8.4 1.8.2 指定 "1.8.2" 版本, 這是完整的指定版本方式. 如果指定 "1.8" 就會取得 1.8.4, 因為這是 1.8 裡面最高的版次. 同樣的指定 1, 將會取得 1.9.1.
這種規則適用於 google.load 還有直接的使用 script urls.

AJAX Libraries API (1) - What is the AJAX Libraries API?

AJAX Libraries API, 提供了一些受歡迎的 open source Javascript libraries 的 hosting 服務. 透過 google.load() 方法, 來取得這些 Javascript libraries, 包括:

• jQuery
• prototype
• script.aculo.us
• MooTools
• dojo

Google AJAX Language API (3) - Examples

Language Translation
1. 翻譯 javascript string

google.language.translate("Hello world", "en", "es", function(result) { if (!result.error) { alert(result.translation); } });

Language Detection
2. 判斷 javascript string 語言 var text = "&#191;Dónde está el baño?"; google.language.detect(text, function(result) { if (!result.error) { var language = 'unknown'; for (l in google.language.Languages) { if (google.language.Languages[l] == result.language) { alert(l); break; } } } });

Source Detection during Translation
3. 這個例子跟基本的翻譯範例很像, 這是示範翻譯時不知道來源語言的情況. 只要來源語言指定一個空字串, 系統會在一次呼叫裡面偵測並且翻譯完畢 google.language.translate("Hello world", "", "es", function(result) { if (!result.error) { alert(result.translation); } });

Some Additional Samples
4. 顯示 confidence 與 reliability factors

Result here

5. 不同語言間的翻譯

>>

Result here

Google AJAX Language API (2) - Introduction

這個範例會示範如何偵測一段文字, 並且把他翻譯成英文.

&lt;html> &lt;head> <script type="text/javascript" src="//www.google.com/jsapi"></script> <script type="text/javascript"> google.load("language", "1"); function initialize() { document.getElementById('hello_button').addEventListener('click', function() { var text = document.getElementById("hello_text").value; google.language.detect(text, function(result) { if (!result.error && result.language) { document.getElementById('hello_language').innerHTML = result.language; google.language.translate(text, result.language, "en", function(result) { var translated = document.getElementById("hello_translation"); if (result.translation) { translated.innerHTML = result.translation; } }); } }); }, false); } google.setOnLoadCallback(initialize); </script> &lt;/head> &lt;body> <input id='hello_text' type='text' value='你好, 很高興見到你.'/> <input id='hello_button' type='button' value='Translate'/> <div id="hello_language"></div> <div id="hello_translation"></div> &lt;/body> &lt;/html>

jQuery.noConflict();

解決 jQuery 與 protoype 的衝突方法, 依照這個順序 include .js:

<!-- jQuery --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script> <script language="javascript"> var $jq = jQuery.noConflict(); </script> <!-- protoype --> <script src="//ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js" type="text/javascript"></script> 1. 先把 jQuery include 進來.
2. 緊接著加上一行 var $jq = jQuery.noConflict();
3. 再把 prototype include 進來.
4. 最後你可以使用

• jQuery
• $jq
• (function($) {/* code here, you can use $ */})(jQuery);

來操作 jQuery 的 selector

Google AJAX Language API (1) - What is the Google AJAX Language API?

AJAX Language API, 可以利用 Javascript 來翻譯和判斷網頁上面文字的語言.