使用OOcharts嵌入Google Analytics資料圖表到你的網站

OOcharts首頁有放幾個Demo,提供免費下載script自行安裝,壓縮檔案內也有寫好的範例。先取得OOId,自動連線到Google Analytics詢問是否同意讀取資料,同意後就會自動建立一個OOId。再來是取得Google Analytics profile id,請參考下圖︰
profile_id

最後開啟範例檔案,輸入相關資料,例如timeline.html︰

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Timeline Example</title>
<!--Load the oocharts script-->
<script src="../oocharts.js" type="text/javascript"></script>
</head>
<body >
<script type="text/javascript">
//Set your ooid
oo.setOOId("輸入ooid");
//load reqs
oo.load(function()
{
//Create a new timeline (aid, startDate, endDate)
var tl = new oo.Timeline("輸入Google Analytics profile id", new Date("輸入讀取資料的開始日期mm/dd/yyyy"), new Date("輸入讀取資料的結束日期mm/dd/yyyy"));
//Add the metric to pull from the visitor count
tl.addMetric('ga:visitors', 'Visits');
//Add metric for bounces
tl.addMetric('ga:bounces', 'Bounces');
//Set Google visualization options for line colors
tl.setOption('colors', ['red', 'orange', 'yellow', 'green']);
//Set Google visualization option for chart title
tl.setOption('title', 'My Timeline');
//draw in the div element with id 'timeline'
tl.draw('timeline');
});
</script>
<div id="timeline"></div>
</body>
</html>

將oocharts.js和timeline.html放到網站根目錄,瀏覽timeline.html測試資料是否能讀取成功。可自行寫CSS配合網站模版嵌入,本站首頁可當做參考︰
oocharts_demo

讀取參數請參考Google Analytics API Dimensions & Metrics Reference,圖表繪製請參考Google Charts Gallery API有提供多種圖表輸出。或者直接到OOcharts官網的Drawing Charts,有實際的範例和代碼說明。

2013/07/23︰OOcharts.org已於昨日正式關閉,新版OOcharts.com需每月收費3美元,新註冊會員有14天試用期。