01.
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
02.
<html>
03.
<head>
04.
<meta http-equiv=
"Content-Type"
content=
"text/html; charset=shift_jis"
/>
05.
<title>google 円グラフ</title>
06.
</head>
07.
<body>
08.
09.
<div id=
"chart_div"
style=
"width: 400px; height: 240px;"
></div>
10.
11.
<script charset=
"utf-8"
type=
"text/javascript"
src=
"http://www.google.com/jsapi"
></script>
12.
<script type=
"text/javascript"
>
13.
google.load(
"visualization"
,
"1"
, {packages: [
"piechart"
]});
14.
15.
google.setOnLoadCallback(getGoogleDoc);
16.
17.
var
data;
18.
19.
20.
21.
22.
function
getGoogleDoc() {
23.
24.
25.
var
target =
"http://spreadsheets.google.com/pub?key="
;
26.
target +=
"0AtJymqpro6gScDZQZmVQZ0RNSkZCb0lqREg1bGNQQ3c&hl=ja&single=true&gid=3&output=html"
;
27.
28.
29.
var
query =
new
google.visualization.Query(target);
30.
query.setQuery(
"select *"
);
31.
32.
query.send( drawChart );
33.
34.
}
35.
36.
37.
38.
39.
function
drawChart(response) {
40.
41.
42.
if
( response.isError() ) {
43.
alert(getDetailedMessage());
44.
return
;
45.
}
46.
47.
48.
data = response.getDataTable();
49.
50.
var
chart =
new
google.visualization.PieChart(document.getElementById(
'chart_div'
));
51.
52.
chart.draw(data, {width: 600, height: 320, is3D:
true
, title:
'円グラフのタイトル'
});
53.
}
54.
</script>
55.
56.
</body>
57.
</html>