サンプルを入力して実行してみました。
簡単にデータの一覧と円グラフが表示できて、しかも、フィルタもつけることができます。
DashBoardの機能を使うことで、いろいろなデータを解析するのに役に立つかもしれません。
サンプルを元に、Google Driveにある資料のリストを取得して、リストに出す。
というのを作ってみました。
ソースコードを添付しておきます。
function doGet() {
// Google Driveのリストを取得し、DataTableを生成
var files = DocsList.getFiles();
var dataTable = Charts.newDataTable();
dataTable.addColumn(Charts.ColumnType.STRING, "FileType");
dataTable.addColumn(Charts.ColumnType.NUMBER, "Size");
dataTable.addColumn(Charts.ColumnType.DATE, "Create");
dataTable.addColumn(Charts.ColumnType.DATE, "LastUpdate");
for(var i in files) {
var row = [];
row.push(files[i].getFileType().toString());
row.push(Number(files[i].getSize()));
row.push(files[i].getDateCreated());
row.push(files[i].getLastUpdated());
dataTable.addRow(row);
}
var data = dataTable.build();
// FileTypeでのフィルタ
var typeFilter = Charts.newCategoryFilter()
.setFilterColumnLabel("FileType")
.build();
var tableChart = Charts.newTableChart().build();
var dashboard = Charts.newDashboardPanel()
.setDataTable(data)
.bind(typeFilter, tableChart)
.build();
var app = UiApp.createApplication();
dashboard.add(
app.createVerticalPanel()
.add(typeFilter)
.add(tableChart)
.setSpacing(30)
);
app.add(dashboard);
return app;
}
サンプルでは、日付の列がなかったので、今回は作成日と最終更新日を取得するようにしています。
また、データが定数だったので、このソースコードでは、データを動的に追加するようにもしています。
(定数での挙動と、メソッドの戻り値での挙動で少しハマったので、気をつけて下さい。)
日付の列に関しては、Date型のオブジェクトを渡せば良いので、そんなに難しくはないですが、
文字列と、数値に関しては、それぞれ、StringとNumberに変換する必要があるので
その対応が必要になります。
(定数だと、暗黙型変換でいい感じになるみたい)
オブジェクトだと、Object.toString()を使い、数値だとNumber()を使って型を変換しておきます。
私はこの型変換ではまりました。
今のところ、日付によるフィルタというのは存在しない(?)みたいです。
本当は、期間別のデータを表示してみたりしたかったのですが…。
他にもいろんなグラフが表示できるので試してみて下さい。
0 件のコメント:
コメントを投稿