function doGet(){ //スプレッドシート名とレンジの取得 var sheet = SpreadsheetApp.openById("0AjN10lCzkUqkdHJqaUxkaUdyOUR3VGQwM3VHWTdWcGc").getSheetByName("sheet2"); var data = sheet.getRange('A1:H10').getValues(); //データテーブルの生成 var dataTable = Charts.newDataTable(); //月名をカラムとして構築 dataTable.addColumn(Charts.ColumnType.STRING, data[0][0]); for(var i=1; i<data.length-1; i++){ dataTable.addColumn(Charts.ColumnType.NUMBER, data[0][i]); } //配列データをテーブルに格納 var counter = 1; for(var i=0;i<data.length-1;i++){ var row = []; row.push(String(data[counter][0])); row.push(Number(data[counter][1])); row.push(Number(data[counter][2])); row.push(Number(data[counter][3])); row.push(Number(data[counter][4])); row.push(Number(data[counter][5])); row.push(Number(data[counter][6])); row.push(Number(data[counter][7])); dataTable.addRow(row); counter++; } var varTable = dataTable.build(); //チャートの作成 var chart = Charts.newPieChart() .setDataTable(varTable) .setTitle("高級魚介類の売上") .setDimensions(650, 550) .set3D() .build(); //円グラフを作成する var app = UiApp.createApplication().setTitle("円グラフテスト"); app.add(chart) return app;}<?xml version="1.0" encoding="UTF-8" ?><Module><ModulePrefs title="sample1" /><Content type="html"><![CDATA[<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title> Google Visualization API Sample </title> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> //corechartのパッケージをロード
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(initialize); function initialize() { // The URL of the spreadsheet to source data from. var query = new google.visualization.Query( 'https://docs.google.com/spreadsheet/pub?key=0AjN10lCzkUqkdHJqaUxkaUdyOUR3VGQwM3VHWTdWcGc&single=true&gid=1'); query.send(draw); } function draw(response) { if (response.isError()) { alert('Error in query'); } var data = response.getDataTable(); var chart = new google.visualization.PieChart(document.getElementById('chart_div'));//グラフオプションの指定
var options = {
title: '高級魚介類１月の売上',
is3D: true,
chartArea:{left:100,top:30,width:"70%",height:"75%"},
height: 500, width: 700 };//グラフの描画
chart.draw(data, options); }
</script> </head> <body style="font-family: Arial;border: 0 none;"> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body></html>]]></Content></Module>今回、この円グラフを作るために、違うデータを２つ目のシートに作って挿入してます。
しかし、ここで問題が。これまでのようなURLですと、gidを変えても１枚目のシートが参照されてしまいます。また、gidはシートの増減で歯抜けになったり変わったりするので、扱いに注意です。さて、どうやって２枚目にアクセスするのか？ウェブで公開の際に２枚目のシートだけ公開することもできるのですが、この場合１枚目が今度はアクセスできなくなってしまいます。ということで、２枚目だけ公開の時のURLを使います。今回ですと下のようなURLですと、２枚目だけにアクセスできますし、ウェブで公開は全面公開にしているので、１枚目ももちろんアクセスできます。
違いはsingle=trueと、アンパサンドを使ってgid=1を明確に指定していることです。この時、single=trueがないと、１枚目のシートも出てきてしまい、１枚目のアクセスされてしまうので、このURLの形式でAPIには渡して上げましょう。
また、今回のチャートは円グラフなので、独特のオプション指定となっています。is3Dは最たるもので、3D円グラフにしてくれます。他にもpieHoleで0～1の間で指定すると、ドーナツ型の円グラフが作れます（３Dと共存不可）。なので、今回はソースコードはis3D指定してますが、実際表示されているチャートはpieHoleを0.4で指定しています。
さらに、パイチャートは特性上、すべてのカラムのデータをデータテーブルに入れたとしても、１カラム目の値しか読みに行きませんので、チャートを作る時には、それを意識して、ダイアログで値をもらって使用するカラムを変えるか？それとも、合計値フィールドを用意して、それをデータテーブルに入れるか？を考慮する必要性があります。