2016-11-11 5 views
1

スプレッドシートからGoogle Appsスクリプトを使用して円グラフを作成しようとしていて、これまでのところ何も機能していません。円グラフにGoogle Apps ScriptとUiApp()を埋め込む

ここで私が今持っているコードです:

コード:私はそれを駆け抜けるhttps://script.google.com/macros/s/AKfycbyQMz3dSYqNLBEusCs4-_lB8u9wvy-P9Q_HXKn-oCH8b3gqgb4E/exec

function doGet() { 

var ss = SpreadsheetApp.openById('1lmmpJs2Bz3EfQWExB4KXq_uJWoLlq1PMCahy6w4ipcE'); 
var data = ss.getDataRange(); 

/* Build filters to analyze charts */ 
var neighborhoodFilter = Charts.newCategoryFilter().setFilterColumnIndex(2).build(); 
var attendanceFilter  = Charts.newCategoryFilter().setFilterColumnIndex(3).build(); 

var pieChart = Charts.newPieChart() 
       .setDataViewDefinition(Charts.newDataViewDefinition().setColumns([2,3])) 
       .build(); 


var dashboard = Charts.newDashboardPanel().setDataTable(data) 
       .bind([neighborhoodFilter, attendanceFilter], [pieChart]) 
       .build(); 

var app   = UiApp.createApplication(); 
var filterPanel = app.createVerticalPanel(); 
var chartPanel = app.createHorizontalPanel(); 
filterPanel.add(neighborhoodFilter).add(attendanceFilter).setSpacing(10); 
chartPanel.add(pieChart).setSpacing(10); 


dashboard.add(app.createVerticalPanel().add(filterPanel).add(chartPanel)); 
app.add(dashboard); 
return app; 
} 

はそれをここで見ることができるWebアプリケーションとして展開されていますデバッガなどすべて正常に動作します。

また、わかりやすくするために、これは作成しようとしている大規模なダッシュボードからの単純なスニペットで、2つのグラフが表示されます。

それは便利だ場合は、ここで私が使用しようとしているコードの全体の一部(この例では、予想通り、テーブルチャートは、移入)です:

コード:リンクすることができ

function doGet() { 

var ss = SpreadsheetApp.openById('1lmmpJs2Bz3EfQWExB4KXq_uJWoLlq1PMCahy6w4ipcE'); 
var data = ss.getDataRange(); 

/* Build filters to analyze charts */ 
var nameFilter   = Charts.newStringFilter().setFilterColumnIndex(1).build(); 
var neighborhoodFilter = Charts.newCategoryFilter().setFilterColumnIndex(2).build(); 
var attendanceFilter  = Charts.newCategoryFilter().setFilterColumnIndex(3).build(); 
var transportationFilter = Charts.newCategoryFilter().setFilterColumnIndex(4).build(); 
var travelFilter   = Charts.newCategoryFilter().setFilterColumnIndex(5).build(); 
var companyFilter  = Charts.newNumberRangeFilter().setFilterColumnIndex(6).build(); 

/* Build charts and dashboard object */ 
var tableChart = Charts.newTableChart() 
       .setDataViewDefinition(Charts.newDataViewDefinition().setColumns([1,2,3,4,5,6])) 
       .build(); 


var pieChart = Charts.newPieChart() 
       .setDataViewDefinition(Charts.newDataViewDefinition().setColumns([2,3])) 
       .build(); 

var dashboard = Charts.newDashboardPanel().setDataTable(data) 
       .bind([neighborhoodFilter, attendanceFilter, nameFilter, transportationFilter, travelFilter, companyFilter], [tableChart, pieChart]) 
       .build(); 

var app   = UiApp.createApplication(); 
var filterPanel = app.createVerticalPanel(); 
var chartPanel = app.createHorizontalPanel(); 


filterPanel.add(neighborhoodFilter).add(attendanceFilter).add(nameFilter).add(transportationFilter).add(travelFilter).add(companyFilter).setSpacing(10); 
chartPanel.add(pieChart).add(tableChart).setSpacing(10); 

dashboard.add(app.createVerticalPanel().add(filterPanel).add(chartPanel)); 
app.add(dashboard); 
return app; 
} 

は、ここに作業テーブルの図表を見てください:https://script.google.com/macros/s/AKfycbwn66EMbZsrCNyuRCYMk6ERyXhKGNt3_m1i5VIj_ITzWxAnb1vw/exec

助けていただければ幸いです。ありがとうございました。

答えて

0

あなたはそれを注意取りたいかもしれません:

UIサービスがdeprecated on December 11, 2014ました。ユーザーインターフェイスを作成するには、代わりにHTML serviceを使用します。

幸いにも、チュートリアル "Converting from UiApp + Chart Service to Html Service + Google Visualization API"があります。 Google Appsのスクリプトのユーザーのために

、データを視覚化するための2つの選択肢があります。

  1. はチャート+ UiAppを使用して続行します。非推奨で、エディタでの自動補完はサポートされていませんが、UiAppは引き続き機能します。それは実際にシャットダウンされるという発表はまだありません...まだ。
  2. Googleの推奨に従ってください。では、代わりにというHtmlServiceを使用しています。 A feature requestは、HtmlServiceでサポートされているチャートを持つことを拒否しました。したがって、このように単純に推薦するには、Googleの他のCharts offering(Google Visualization APIまたはGViz)を使用するという追加要件が必要です。

が、これは

を役に立てば幸い
関連する問題