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


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




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

Ggdoc1


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

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

Ggdoc2

Ggdoc3

Ggdoc4

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

Ggdoc5

  円グラフの表示




Google のドキュメント

Google Visualization API Reference







<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>google 円グラフ</title>
</head>
<body>

<div id="chart_div" style="width: 400px; height: 240px;"></div>

<script charset="utf-8" type="text/javascript" src="http://www.google.com/jsapi"></script> 
<script type="text/javascript">
google.load("visualization", "1", {packages: ["piechart"]});

google.setOnLoadCallback(getGoogleDoc);

var data;

// *********************************************************
// WEB(Google ドキュメント) からデータを取得
// *********************************************************
function getGoogleDoc() {

	// ターゲットとなる WEB 公開 URL
	var target = "http://spreadsheets.google.com/pub?key=";
	target += "0AtJymqpro6gScDZQZmVQZ0RNSkZCb0lqREg1bGNQQ3c&hl=ja&single=true&gid=3&output=html";

	// SQL でデータを取得
	var query = new google.visualization.Query(target);
	query.setQuery("select *");
	// データを取得後に呼び出す関数を指定
	query.send( drawChart );

}

// *********************************************************
// 円グラフ作成
// *********************************************************
function drawChart(response) {

	// エラー処理
	if ( response.isError() ) {
		alert(getDetailedMessage());
		return;
	}

	// テーブル用データ作成
	data = response.getDataTable();

	var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

	chart.draw(data, {width: 600, height: 320, is3D: true, title: '円グラフのタイトル'});
}
</script>

</body>
</html>


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

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



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

// *********************************************************
// 円グラフ作成
// *********************************************************
function drawChart(response) {

	// エラー処理
	if ( response.isError() ) {
		alert(getDetailedMessage());
		return;
	}

	// テーブル用データ作成
	data = response.getDataTable();

	var dataPie = new google.visualization.DataTable();
	dataPie.addColumn('string', '対象');
	dataPie.addColumn('number', '件数');
	dataPie.addRows(7);

	for( i = 0; i < 7; i++ ) {
		dataPie.setValue( i, 0, data.getValue( i, 0 ));
		dataPie.setValue( i, 1, data.getValue( i, 1 ));
	}

	var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

	chart.draw(dataPie, {width: 600, height: 320, is3D: true, title: '円グラフのタイトル'});
}






yahoo  google  MSDN  MSDN(us)  WinFAQ  Win Howto  tohoho  ie_DHTML  vector  wdic  辞書  天気 


[sh_google]
CCBot/2.0 (https://commoncrawl.org/faq/)
24/05/28 22:39:53
InfoBoard Version 1.00 : Language=Perl

1 BatchHelper COMprog CommonSpec Cprog CprogBase CprogSAMPLE CprogSTD CprogSTD2 CprogWinsock Cygwin GameScript HTML HTMLcss InstallShield InstallShieldFunc JScript JScriptSAMPLE Jsfuncs LLINK OldProg OracleGold OracleSilver PRO PRObrowser PROc PROconePOINT PROcontrol PROftpclient PROjscript PROmailer PROperl PROperlCHAT PROphp PROphpLesson PROphpLesson2 PROphpLesson3 PROphpfunction PROphpfunctionArray PROphpfunctionMisc PROphpfunctionString PROsql PROvb PROvbFunction PROvbString PROvbdbmtn PROvbonepoint PROwebapp PROwin1POINT PROwinSYSTEM PROwinYOROZU PROwindows ProjectBoard RealPHP ScriptAPP ScriptMaster VBRealtime Vsfuncs a1root access accreq adsi ajax amazon argus asp aspSample aspVarious aspdotnet aw2kinst cappvariety centura ckeyword classStyle cmaterial cmbin cmdbapp cmenum cmlang cmlistbox cmstd cmstdseed cmtxt cs daz3d db dbCommon dbaccess dnettool dos download flex2 flex3 flex4 framemtn framereq freeWorld freesoft gimp ginpro giodownload google hdml home hta htmlDom ie9svg install java javaSwing javascript jetsql jquery jsp jspTest jspVarious lightbox listasp listmsapi listmsie listmsiis listmsnt listmspatch listmsscript listmsvb listmsvc memo ms msde mysql netbeans oraPlsql oracle oracleWiper oraclehelper orafunc other panoramio pear perl personal pgdojo pgdojo_cal pgdojo_holiday pgdojo_idx pgdojo_ref pgdojo_req php phpVarious phpguide plsql postgres ps r205 realC realwebapp regex rgaki ruby rule sboard sc scprint scquest sdb sdbquest seesaa setup sh_Imagick sh_canvas sh_dotnet sh_google sh_tool sh_web shadowbox shgm shjquery shvbs shweb sjscript skadai skywalker smalltech sperl sqlq src systemdoc tcpip tegaki three toolbox twitter typeface usb useXML vb vbdb vbsfunc vbsguide vbsrc vpc wcsignup webanymind webappgen webclass webparts webtool webwsh win8 winofsql wmi work wp youtube