少年幃禿的煩惱: Google Chart API (5)

在產生圖表之前必須將資料進行編碼, 轉成 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 軸上都分的很開