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