サンプルを入力して実行してみました。
簡単にデータの一覧と円グラフが表示できて、しかも、フィルタもつけることができます。
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 件のコメント:
コメントを投稿