Google Apps Script

Class DashboardPanel

A dashboard is a visual structure that enables the organization and management of multiple charts that share the same underlying data.

Controls are user interface widgets (category pickers, range sliders, autocompleters, etc.) users interact with in order to drive the data managed by a dashboard and the charts that are part of it. For example, a string filter control is a simple text input field that lets the user filter data via string matching. Given a column and matching options, the control will filter out the rows that don't match the term that's in the input field.

The Gviz API defines a dashboard as a set of charts and controls bound together. The bindings between the different components define the data flow, the state of the controls filters views of the data which propagate in the dashboard and are eventually visualized with charts. For more details, see the Gviz documentation.

The dashboard panel has two purposes, one is being a container for the charts and controls objects that compose the dashboard, and the other is holding the data and use as an interface for binding controls to charts.

Here's an example of creating a dashboard and showing it in a UI app:

 
function doGet() {
   // Create a data table with some sample data.
   var data = Charts.newDataTable()
     .addColumn(Charts.ColumnType.STRING, "Name")
     .addColumn(Charts.ColumnType.NUMBER, "Age")
     .addRow(["Michael", 18])
     .addRow(["Elisa", 12])
     .addRow(["John", 20])
     .addRow(["Jessica", 25])
     .addRow(["Aaron", 14])
     .addRow(["Margareth", 19])
     .addRow(["Miranda", 22])
     .addRow(["May", 20])
     .build();

   var chart = Charts.newBarChart()
     .setTitle("Ages")
     .build();

   var control = Charts.newStringFilter()
     .setFilterColumnLabel("Name")
     .build();

   // Bind the control to the chart in a dashboard panel.
   var dashboard = Charts.newDashboardPanel()
     .setDataTable(data)
     .bind(control, chart)
     .build();

   var uiApp = UiApp.createApplication().setTitle("My Dashboard");

   var panel = uiApp.createHorizontalPanel()
     .setVerticalAlignment(UiApp.VerticalAlignment.MIDDLE)
     .setSpacing(50);

   panel.add(control);
   panel.add(chart);
   dashboard.add(panel);
   uiApp.add(dashboard);
   return uiApp;
 }
 

Methods

MethodReturn typeBrief description
add(widget)DashboardPanelAdd a widget to the DashboardPanel.
getId()StringReturns the id that has been assigned to this object.
getType()StringGets the type of this object.
setId(id)DashboardPanelSets the id of this DashboardPanel to be used with UiApp.

Detailed documentation

add(widget)

Add a widget to the DashboardPanel.

The DashboardPanel is a simple panel which contains a single widget in it. A good practice for building a dashboard to place all of its components (the charts and controls that are bound in it) in a complex panel (vertical or horizontal panel for example), and to add that panel to it.

Parameters

NameTypeDescription
widgetWidgetthe widget to add

Return

DashboardPanel — the DashboardPanel itself, useful for chaining.


getId()

Returns the id that has been assigned to this object.

This can be used in conjunction with app.getElementById() to retrieve a reference to this object.

Return

String — the id that has been assigned to this object


getType()

Gets the type of this object.

Return

String — the object type


setId(id)

Sets the id of this DashboardPanel to be used with UiApp.

Parameters

NameTypeDescription
idStringthe new id, which can be used to retrieve the DashboardPanel from app.getElementById(id).

Return

DashboardPanel — the DashboardPanel itself, useful for chaining.

Authentication required

You need to be signed in with Google+ to do that.

Signing you in...

Google Developers needs your permission to do that.