仪表板进入StackPanel

时间:2013-10-11 15:39:06

标签: google-apps-script dashboard stackpanel

我收到'对象类型与列类型不匹配'错误并且不确定为什么......不确定我的代码中是否有错误(超过可能)或者它是否只是不接受仪表板。我认为我的错误与数据源有关,以及我如何从电子表格中提取数据。

function doGet() {
  var app = UiApp.createApplication().setTitle('DHS: Kurzweil Calendar');

  //Create stack panel
  var stackPanel = app.createStackPanel().setSize('100%', '100%');
  var info = about(app);
  var p1 = app.createVerticalPanel().setId('vrtPanel1').add(info);
  var cal = calendar(app);
  var p2 = app.createVerticalPanel().setId('vrtPanel2').add(cal);
  var form = formBuild(app);
  var p3 = app.createVerticalPanel().setId('vrtPanel3').add(form);

  //add widgets to each stack panel, and name the stack panel
  stackPanel.add(p1, 'About the Lab');
  stackPanel.add(p2, 'Lab Calendar');
  stackPanel.add(p3, 'Lab Scheduling');

  //Add the panel to the application
  app.add(stackPanel);
  return app;
}

function about(app){
  return app.createHTML('<br />' + 
                        '<p>The Kurzweil Lab at Davie High School supports <i>20 independent student workstations</i> and is designed for the specific use of Kurzweil software.  The lab\'s main objective is to support students who have a Read-Aloud accommodation on their Individual Education Plan (IEP).  If a student does not have a Read-Aloud accommodation, but has another accommodation like: Separate Setting, Extended Time, or English as a Second Language (ESL) then they are welcome in the lab as long as the lab is not full.  If the lab reaches capacity and Read-Aloud students need to use Kurzweil, the student(s) without a Read-Aloud accommodation or who are refusing their Read-Aloud accommodation will be asked to go back to their classroom so that the teacher can make other arrangements for that student.</p>' + 
                        '<p>During non-testing situations the Kurzweil Lab can be scheduled by EC teachers to help with study skills, individual projects, or other work that requires the use of a computer lab.</p>', true);
}

function calendar(app){
  // Create Data Source
  var ss = SpreadsheetApp.openById('0Aur3owCpuUY-dGJIOGZ1LXhqT2FNMGVXSGNJazFnUmc');
  var datasource = ss.getSheetByName('Schedule').getRange(1,1,ss.getLastRow(),ss.getLastColumn());

  // Create Charts and Controls
  var dateFilter = Charts.newCategoryFilter()
      .setFilterColumnLabel("Date").build();
  var teacherFilter = Charts.newCategoryFilter()
      .setFilterColumnLabel("Teacher").build();
  var subjectFilter = Charts.newCategoryFilter()
      .setFilterColumnLabel("Subject").build();
  var periodFilter = Charts.newCategoryFilter()
      .setFilterColumnLabel("Period").build();
  var typeFilter = Charts.newCategoryFilter()
      .setFilterColumnLabel("Type").build();
  var tableChart = Charts.newTableChart().build();

  //Create and bind Dashboard
  var dashboard = Charts.newDashboardPanel()
      .setDataTable(datasource)
      .bind([dateFilter, teacherFilter, subjectFilter, periodFilter, typeFilter], [tableChart])
      .build();

  //Create Application
  dashboard.add(app.createVerticalPanel()
                .add(app.createHorizontalPanel()
                     .add(dateFilter).add(teacherFilter).add(subjectFilter).add(periodFilter).add(typeFilter)
                     .setSpacing(70))
                .add(app.createHorizontalPanel()
                     .add(tableChart)
                     .setSpacing(10)));

  //Add the panel to the application
  app.add(dashboard);
  return app;
}

1 个答案:

答案 0 :(得分:0)

你只是忘了你改变了构建UI的每个函数返回数据的方式......如果你还记得your first post about stackPanels我们将调用更改为

  var cal = calendar(app);

然后

  var p2 = app.createVerticalPanel().setId('vrtPanel2').add(cal);

所以我们显然希望得到一个Ui对象(一个小部件)作为回报。

您只需更改function calendar(app){的结尾,如下所示:

  ...
  dashboard.add(app.createVerticalPanel()
                .add(app.createHorizontalPanel()
                     .add(dateFilter).add(teacherFilter).add(subjectFilter).add(periodFilter).add(typeFilter)
                     .setSpacing(70))
                .add(app.createHorizontalPanel()
                     .add(tableChart)
                     .setSpacing(10)));

  //Add the panel to the application
  return dashboard;// return the dashboard itself, not the app.
}

编辑:这绝对是简单的事实......我的回答是正确的,但显然没有包括仪表板建设的问题。

经过一些研究(我之前从未使用过图表服务),我来到这个没有错误的代码,但我绝对不确定它会返回你想要的...

尽管如此,它应该可以帮助您找到自己的方式。 (如果看起来不对,请不要责怪我; - )

function calendar(app){
  // Create Data Source
  var ss = SpreadsheetApp.openById('0Aur3owCpuUY-dGJIOGZ1LXhqT2FNMGVXSGNJazFnUmc');
  var sh = ss.getSheetByName('Schedule');
  var datasource = sh.getRange(1,2,sh.getLastRow(),sh.getLastColumn()).getValues();
  Logger.log(datasource)
  var dataTable = Charts.newDataTable();
  for( var j in datasource[0] ){
  dataTable.addColumn(Charts.ColumnType.STRING, datasource[0][j]);
  }
  for( var i = 1; i < datasource.length; ++i ){
  dataTable.addRow(datasource[i].map(String));
  }
var dashboard = Charts.newDashboardPanel().setDataTable(dataTable);  // Create Charts and Controls
  var dateFilter = Charts.newCategoryFilter()
      .setFilterColumnLabel("Date").setDataTable(dataTable).build();
  var teacherFilter = Charts.newCategoryFilter()
      .setFilterColumnLabel("Teacher").setDataTable(dataTable).build();
  var subjectFilter = Charts.newCategoryFilter()
      .setFilterColumnLabel("Subject").setDataTable(dataTable).build();
  var periodFilter = Charts.newCategoryFilter()
      .setFilterColumnLabel("Period").setDataTable(dataTable).build();
  var typeFilter = Charts.newCategoryFilter()
      .setFilterColumnLabel("Type").setDataTable(dataTable).build();
  var tableChart = Charts.newTableChart().setDimensions(1000, 600).setDataTable(dataTable).build();

  //Create and bind Dashboard
  var dashboard = Charts.newDashboardPanel()
      .setDataTable(dataTable)
      .bind([dateFilter, teacherFilter, subjectFilter, periodFilter, typeFilter], [tableChart])
      .build();

  //Create Application
  var dashBoardPanel = app.createVerticalPanel()
  dashBoardPanel.add(app.createHorizontalPanel()
                     .add(dateFilter).add(teacherFilter).add(subjectFilter).add(periodFilter).add(typeFilter)
                     .setSpacing(30));
  dashBoardPanel.add(tableChart);

  //Add the panel to the application
  return dashBoardPanel;
}

编辑2 :要将第一列作为日期,您必须稍微修改填充for loops的{​​{1}},以便您只能将其转换为字符串第二栏。

我是这样做的:

dataTables

enter image description here