Class DashboardPanelBuilder

DashboardPanelBuilder

A builder for a dashboard panel object. For an example of how to use DashboardPanelBuilder, refer to DashboardPanel.

For more details, see the Gviz documentation.

Methods

Method	Return type	Brief description
bind(control, chart)	DashboardPanelBuilder	Binds a control to a chart, so that the chart is redrawn whenever the control collects a user interaction that affects the data managed by the dashboard.
bind(controls, charts)	DashboardPanelBuilder	Binds multiple controls to multiple charts, so that the charts are redrawn whenever the controls collect a user interaction that affects the data managed by the dashboard.
build()	DashboardPanel	Builds a dashboard.
setDataTable(tableBuilder)	DashboardPanelBuilder	Sets the data table to use for the dashboard using a DataTableBuilder.
setDataTable(source)	DashboardPanelBuilder	Sets the dashboard's data table, which will be the control's underlying data model.

Detailed documentation

bind(control, chart)

Binds a control to a chart, so that the chart is redrawn whenever the control collects a user interaction that affects the data managed by the dashboard.

For example, when binding a range selector to a chart, a user interaction will be sliding the the range selector to the desired range. The effect on the data will be keeping only the data that's in the chosen range.

Parameters

Name	Type	Description
control	Control	a control to bind
chart	Chart	a chart to bind

Return

DashboardPanelBuilder — this builder, useful for chaining

---

bind(controls, charts)

Binds multiple controls to multiple charts, so that the charts are redrawn whenever the controls collect a user interaction that affects the data managed by the dashboard. When binding multiple controls to a chart (or multiple charts), the data that's displayed in the chart is that which passes the filters of all of the controls (of this specific binding).

For more information about object binding see the Gviz documentation.

Here is an example that shows how multiple controls can be bound to a chart using a dashboard panel:

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 stringFilter = Charts.newStringFilter()
      .setFilterColumnLabel("Name")
      .build();

  var numberRangeFilter = Charts.newNumberRangeFilter()
      .setFilterColumnLabel("Age")
      .build();

  // Create a dashboard panel binding both controls to the chart.
  var dashboard = Charts.newDashboardPanel()
      .setDataTable(data)
      .bind([stringFilter, numberRangeFilter], [chart])
      .build();

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

  var panel = uiApp.createVerticalPanel()
      .setSpacing(50);

  panel.add(stringFilter);
  panel.add(numberRangeFilter);
  panel.add(chart);
  dashboard.add(panel);
  uiApp.add(dashboard);
  return uiApp;
}

Parameters

Name	Type	Description
controls	Control[]	an array of controls to bind
charts	Chart[]	an array charts to bind

Return

DashboardPanelBuilder — this builder, useful for chaining

---

build()

Builds a dashboard.

Return

DashboardPanel — a control object, that can be used as a UI element

---

setDataTable(tableBuilder)

Sets the data table to use for the dashboard using a DataTableBuilder. This is a convenience method for setting the data table without needing to call build().

Parameters

Name	Type	Description
tableBuilder	DataTableBuilder	a data table builder. A new data table will be created instantly as part of this call, so any further updates to the builder won't be reflected in the dashboard.

Return

DashboardPanelBuilder — this builder, useful for chaining

---

setDataTable(source)

Sets the dashboard's data table, which will be the control's underlying data model.

Parameters

Name	Type	Description
source	DataTableSource	the data source to use for the dashboard

Return

DashboardPanelBuilder — this builder, useful for chaining