back
Charts Servicesによるデータテーブルとチャートの利用 (6/6)
■スプレッドシートのデータからチャートを生成する
では、このチャート機能をもう少し実用的に使うことを考えてみましょう。スクリプトの中で表示する内容を直接記述していたのでは、汎用的なスクリプトにはなりません。そこで、あらかじめ作成しておいたスプレッドシートからデータを取り出し、それをもとにチャートを作成するサンプルを考えてみることにしましょう。
まず、データを保管するスプレッドシートを作成しておきます。Googleドキュメントで新たに表計算のドキュメントを作り、最初の「シート1」というシートに、左上から順にデータを記述しておきましょう。
下のリストが、サンプルコードです。openByIdの"……ID……"部分には、それぞれのスプレッドシートのIDを指定してください。これで、スプレッドシートの「シート1」のA1～C4までのデータを取り出し、グラフ化して表示をしています。
ここでは、まずSpreadsheetApp.openByIdでスプレッドシートを開き、getSheetByNameでその中から必要なシートを取得しています。今回はサービスとして公開利用する形を考えていますので、ActiveSheetではなく、このように指定のシートをオープンして利用するようにしました。
後は、必要に応じてgetRange().getValueでセルの値を取り出し、データをaddRowしていくだけです。SpreadsheetApp/SheetとCharts Servicesがわかれば、このように連携してデータを処理していくことも簡単に行えます。
ここまでくると、「このチャート、そのままスプレッドシートに貼って使えないの？」と思うかも知れません。残念ながら、今のところは無理なようです。Sheet側にそのための仕組み（メソッド）が用意されていないからです。ただし、Google Apps Scriptは現在も進化中ですから、いずれ可能になるかも知れません。期待して待ちましょう！
まず、データを保管するスプレッドシートを作成しておきます。Googleドキュメントで新たに表計算のドキュメントを作り、最初の「シート1」というシートに、左上から順にデータを記述しておきましょう。
支店名 上半期 下半期数値などはそれぞれ適当に変更してかまいません。ただ、今回は横３列×縦４行の固定データでチャートを作成するので、それにあわせてデータを用意して下さい。
東京 1024 891
大阪 659 478
名古屋 237 395
下のリストが、サンプルコードです。openByIdの"……ID……"部分には、それぞれのスプレッドシートのIDを指定してください。これで、スプレッドシートの「シート1」のA1～C4までのデータを取り出し、グラフ化して表示をしています。
ここでは、まずSpreadsheetApp.openByIdでスプレッドシートを開き、getSheetByNameでその中から必要なシートを取得しています。今回はサービスとして公開利用する形を考えていますので、ActiveSheetではなく、このように指定のシートをオープンして利用するようにしました。
後は、必要に応じてgetRange().getValueでセルの値を取り出し、データをaddRowしていくだけです。SpreadsheetApp/SheetとCharts Servicesがわかれば、このように連携してデータを処理していくことも簡単に行えます。
ここまでくると、「このチャート、そのままスプレッドシートに貼って使えないの？」と思うかも知れません。残念ながら、今のところは無理なようです。Sheet側にそのための仕組み（メソッド）が用意されていないからです。ただし、Google Apps Scriptは現在も進化中ですから、いずれ可能になるかも知れません。期待して待ちましょう！
(by. SYODA-Tuyano.)
※リストが表示されない場合
AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。
function doGet() {
var sheet = SpreadsheetApp.openById("……ID……").
getSheetByName("シート1");
var data = Charts.newDataTable()
.addColumn(Charts.ColumnType.STRING,
sheet.getRange(1, 1).getValue());
for(var i = 2;i <= 3;i++){
data.addColumn(Charts.ColumnType.NUMBER,
sheet.getRange(1, i).getValue());
}
for(var i = 2;i <= 4;i++){
var arr = [sheet.getRange(i, 1).getValue(),
sheet.getRange(i, 2).getValue(),
sheet.getRange(i, 3).getValue()];
data.addRow(arr);
}
data.build();
var chart = Charts.newColumnChart()
.setDataTable(data)
.setTitle("携帯端末販売")
.setDimensions(400, 350)
.setStacked()
.setColors(["#FF9999","#99FF99"])
.build();
var uiApp = UiApp.createApplication().setTitle("サンプルチャート");
uiApp.add(chart);
return uiApp;
}
| << 前へ |