Google ドキュメントを使用して、円グラフ(visualization / piechart )を作成する

  新規スプレッドシートを作成するか、新しいシートを作成してデータを準備



シート追加 ( ページ右下 )

Ggdoc1


一般公開して、URL を取得します

WEB ページとしての公開ページ

Ggdoc2

Ggdoc3

Ggdoc4

データをセットしておきます

Ggdoc5



  円グラフの表示



Google のドキュメント

Google Visualization API Reference







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.// WEB(Google ドキュメント) からデータを取得
21.// *********************************************************
22.function getGoogleDoc() {
23. 
24.    // ターゲットとなる WEB 公開 URL
25.    var target = "http://spreadsheets.google.com/pub?key=";
26.    target += "0AtJymqpro6gScDZQZmVQZ0RNSkZCb0lqREg1bGNQQ3c&hl=ja&single=true&gid=3&output=html";
27. 
28.    // SQL でデータを取得
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>

この円グラフのデータを直接書いたサンプル

JavaScript : 誰でもすぐ使える Google 円グラフ





  もうひとつの DataTable を作ってデータ転送する例

01.// *********************************************************
02.// 円グラフ作成
03.// *********************************************************
04.function drawChart(response) {
05. 
06.    // エラー処理
07.    if ( response.isError() ) {
08.        alert(getDetailedMessage());
09.        return;
10.    }
11. 
12.    // テーブル用データ作成
13.    data = response.getDataTable();
14. 
15.    var dataPie = new google.visualization.DataTable();
16.    dataPie.addColumn('string', '対象');
17.    dataPie.addColumn('number', '件数');
18.    dataPie.addRows(7);
19. 
20.    for( i = 0; i < 7; i++ ) {
21.        dataPie.setValue( i, 0, data.getValue( i, 0 ));
22.        dataPie.setValue( i, 1, data.getValue( i, 1 ));
23.    }
24. 
25.    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
26. 
27.    chart.draw(dataPie, {width: 600, height: 320, is3D: true, title: '円グラフのタイトル'});
28.}











  infoboard   管理者用   





フリーフォントWEBサービス
SQLの窓WEBサービス

SQLの窓フリーソフト

素材

一般WEBツールリンク

SQLの窓

フリーソフト

JSライブラリ