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])

   var chart = Charts.newBarChart()

   var control = Charts.newStringFilter()

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

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

   var panel = uiApp.createHorizontalPanel()

   return uiApp;


MethodReturn typeBrief description
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


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.


String — the id that has been assigned to this object


Gets the type of this object.


String — the object type


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


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


DashboardPanel — the DashboardPanel itself, useful for chaining.

Deprecated methods


Apps Script
Apps Script