円グラフ

Google Apps Scriptで作る

グラフ本体

ソースコード

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;
}

参考URL

Google ガジェットで作る

ソースコード

<?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ですと、２枚目だけにアクセスできますし、ウェブで公開は全面公開にしているので、１枚目ももちろんアクセスできます。

https://docs.google.com/spreadsheet/pub?key=0AjN10lCzkUqkdHJqaUxkaUdyOUR3VGQwM3VHWTdWcGc&single=true&gid=1

違いはsingle=trueと、アンパサンドを使ってgid=1を明確に指定していることです。この時、single=trueがないと、１枚目のシートも出てきてしまい、１枚目のアクセスされてしまうので、このURLの形式でAPIには渡して上げましょう。

また、今回のチャートは円グラフなので、独特のオプション指定となっています。is3Dは最たるもので、3D円グラフにしてくれます。他にもpieHoleで0～1の間で指定すると、ドーナツ型の円グラフが作れます（３Dと共存不可）。なので、今回はソースコードはis3D指定してますが、実際表示されているチャートはpieHoleを0.4で指定しています。

さらに、パイチャートは特性上、すべてのカラムのデータをデータテーブルに入れたとしても、１カラム目の値しか読みに行きませんので、チャートを作る時には、それを意識して、ダイアログで値をもらって使用するカラムを変えるか？それとも、合計値フィールドを用意して、それをデータテーブルに入れるか？を考慮する必要性があります。

参考URL