I am a beginner to apps script so we're probably not off to a great start but here I go...
I am in the process of creating a simple dashboard using cool (but recycled) code from the google team.
Whilst researching ways of improving the way the dashboard displays, I found out that the UI service is being deprecated (I first had to research what deprecated meant).
So now I realise I need to use the HTML service for my dashboard. The question is how do I convert the code below so it works on the HTML Service?
The code often refers to the variable 'app' which refers to the UI Service. I'm not sure if I just need to update that part or if I need to create a HTML file and start again. I hope someone can help me.
function doGet() {
var ss = SpreadsheetApp.openById('1EVpJrmuo7Er_a3Xsoy09VBBfQjEt5Ihdmm3JAWsPTIA');
var data = ss.getDataRange();
var ageFilter = Charts.newNumberRangeFilter().setFilterColumnIndex(4).build();
var transportFilter = Charts.newCategoryFilter().setFilterColumnIndex(2).build();
var statusFilter = Charts.newCategoryFilter().setFilterColumnIndex(7).build();
var monthFilter = Charts.newCategoryFilter().setFilterColumnIndex(0).build();
var nameFilter = Charts.newStringFilter().setFilterColumnIndex(1).build();
// Create a table and pie chart
var tableChart = Charts.newTableChart()
.setDataViewDefinition(Charts.newDataViewDefinition().setColumns([1,2,3,4]))
.setDimensions(1000,500).build();
var pieChart = Charts.newPieChart()
.setDataViewDefinition(Charts.newDataViewDefinition().setColumns([1,4]))
.build();
// Create a dashboard to bind the filters to the charts.
var dashboard = Charts.newDashboardPanel().setDataTable(data)
.bind([ageFilter, transportFilter, statusFilter, monthFilter, nameFilter], [tableChart, pieChart])
.build();
// Create a UiApp to display the dashboard in.
var app = UiApp.createApplication();
var filterPanel = app.createVerticalPanel()
.add(app.createLabel("Fix Tickets"))
.add(app.createHorizontalPanel()
.add(app.createVerticalPanel()
.setSpacing(10)));
var chartPanel = app.createHorizontalPanel();
filterPanel.add(ageFilter).add(transportFilter).add(statusFilter).add(monthFilter).add(nameFilter).setSpacing(10);
chartPanel.add(tableChart).add(pieChart).setSpacing(10);
dashboard.add(app.createVerticalPanel().add(filterPanel).add(chartPanel));
app.add(dashboard);
return app;
}