棒グラフ

Google Apps Scriptで作成する

まずは早速棒グラフから挑戦してみます。まずは表示してみてから検証してみましょう。

グラフ本体

ソースコード

function doGet() {
    //スプレッドシートのIDとシート名を指定

var sheet = SpreadsheetApp.openById("0AjN10lCzkUqkdHJqaUxkaUdyOUR3VGQwM3VHWTdWcGc").getSheetByName("sheet1");

  
    //データテーブルを作成し、カラムを設定する
    var dataTable = Charts.newDataTable();
    dataTable.addColumn(Charts.ColumnType.STRING, "年度");
    dataTable.addColumn(Charts.ColumnType.NUMBER, "売上");
    dataTable.addColumn(Charts.ColumnType.NUMBER, "費用");
  
    
  //特定のレンジを配列として取得
  var varValues = sheet.getRange("A2:D10").getValues();
  
    //配列データをテーブルに格納
    var counter = Number(0);
    for(var i in varValues) {
      var row = []; 
      row.push(String(varValues[counter][0]));
      row.push(Number(varValues[counter][1]));
      row.push(Number(varValues[counter][2]));
      dataTable.addRow(row);
      counter++;
    }
    var data = dataTable.build();

//チャートを作成

    var chart = Charts.newColumnChart()
       .setTitle('費用と売上')
       .setXAxisTitle('年度')
       .setYAxisTitle('単位 (円)')
       .setDimensions(400, 300)
       .setDataTable(data)
       .setColors(["#7FFFD4","#BA55D3"])
       .build();
    
    //チャートを表示する
    return UiApp.createApplication().add(chart);
}

参考URL

Googleガジェットで作成する

Apps Scriptで作成した場合、外部では使用できないという点と、内部であっても、自分以外の人には妙なメッセージが表示される、またスクリプトで時間トリガーが仕掛けられていても、画面が更新されるわけじゃなく、数時間ごとに自動更新をしたいとなると、window.location.reloadなどの関数が使えるガジェットのほうが優位性が高いです。そこで、ガジェットで作成するのですが、GoogleのJavascriptファイルについてはhttps://で指定すること以外にアクセス権を付与しておくなどの注意点があります。

グラフ本体

ソースコード

<?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/a/hmw.gr.jp/spreadsheet/ccc?key=0AjN10lCzkUqkdHJqaUxkaUdyOUR3VGQwM3VHWTdWcGc&usp=drive_web#gid=0');
        query.send(draw);
      }

//返り値を受けてグラフを描画するルーチン

      function draw(response) {
        if (response.isError()) {
          alert('Error in query');
        }

//データテーブルに格納する

        var data = response.getDataTable();
        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));


//グラフオプションの指定

var options = {

title: '売上分析',

legend: {textStyle: {fontSize: 11}},

dataOpacity: '0.4',

hAxis: {title: '年度'},

vAxis: {title: '金額（円）'},

height: 500,

width: 700

        };


//グラフの描画

        chart.draw(data, options);

}

    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    //チャート描画場所
    <div id="chart_div"></div>
  </body>
</html>
]]>
</Content>
</Module>

ポイント

Google Apps Scriptの時とはだいぶソースコードの書き方が異なります。

上記の書き方がテンプレートで、基本的には、スプレッドシートを投げて帰ってきたレスポンスをテーブルデータにそのまま格納するといった形です。この辺りはGoogle Apps Scriptよりも楽かもしれません。

グラフオプションの指定は、変数を用意して、そこへまとめて放り込んでおき、描画時に引数としてdrawメソッドに渡してやるスタイルになります。

オプションの指定はGoogle Apps Scriptの時より簡素ですが、オプション内容はGoogle Apps Scriptより充実しています。

参考URL