Use a Drop Down List to Switch Metric Sets With Scripting

This applies to: Managed Dashboards, Managed Reports

Use Symphony to program a drop down list component to switch the metric sets displayed by a chart. We will use JavaScript that runs in the drop down list's Selection Changed action.

The purpose of this article is to demonstrate how additional custom functionality is possible using Symphony APIs. You can also accomplish a similar result without script by setting up charts in two dashboard layers and using Change Layer actions.

Create Metric Sets

For this example, create two metric sets that will be switched using the drop down list.

MetricSet1 with OrderQty measure and Product hierarchy on Rows MetricSet2 with OrderQty measure and FirstName hierarchy on ROWS

Record the IDs of the Metric Sets

You'll need to get the IDs of metric sets to reference them from a script.

For each metric set, go to the Explore window and locate it in the Metric Sets folder.

Right-click on the metric set, and select Properties from the menu.

View properties of a metric set

In the Properties dialog, locate the ID field and copy the text to the clipboard. You can paste the two IDs into another application now, or copy them the same way later while editing the dashboard.

Copy the metric set ID

Design the Dashboard

Create a new dashboard, then drag the first metric set from the Explore window to the canvas. The metric set appears as a chart visualization named chart1.

Add a Drop Down List

Next, click Components in the toolbar, then select the Drop Down List component. A drop down list component is added to the dashboard canvas.

Add a drop down list component from the toolbar

Configure Drop Down List Items

Select the drop down list on the canvas, and then open the Properties window.

You'll see that the drop down list is configured with a single item by default. Select the item to modify it.

Drop down list properties

Under Animation & Interaction for the drop down, paste the ID from the first metric set into the Valueproperty. Set the Captionproperty to OrderQty by Product.

Click the back button at the top of the properties to go back to the list of items.

Click the + button to add a second item, then click the new item to edit it.

Paste the ID from the second metric set into the Value property and set the Caption property to OrderQty by FirstName.

Set properties of the second drop down list item

Select the back button at the top of the properties to go back to the list of items. The drop down list has two items configured now.

Drop down list with two items

Add a Script

In the properties for the drop down list, go to the Actions tab and select + to add an action.

Add an action for Selection Changed, and choose a Script action. Edit the script action to open the Script Editor, and paste the following JavaScript code.

// Get the metric set ID value from the drop down list.
var metricSetId = dropDownList1.value;
 
// Update the chart with the selected metric set.
chart1.metricSetBindings.length = 0;
chart1.generateMetricSetBinding(metricSetId, true);

Select Build to check for any script errors. Script Editor auto-saves your changes as you type.

Re-Connect Filters

If the metric sets have a filter connected to it, the connection is lost when switching the metric sets. The filter can be re-connected by adding a done() callback to the generateMetricSetBinding() method .

An update to the JavaScript code above will look like this:

// Get the metric set ID value from the drop down list.
var metricSetId = dropDownList1.value;
var parameterName = "viewParameter1"; // the Script Name of the view parameter
var parentView = this.parentView;
 
// Update the chart with the selected metric set.
chart1.metricSetBindings.length = 0;
chart1.generateMetricSetBinding(metricSetId, true).done(function (result) {
 
	// Get the view parameter
	var viewParameter = parentView.control.getViewParameterByName(parameterName);
 
	// Find the metric set's hierarchy usage
	var element = result.metricSet.rowHierarchies[0];
 
	// Re-link the filters
	var elementParameterLink = new dundas.view.ElementParameterLink({
		"adapterId": chart1.id,
		"metricSetBindingId": result.metricSetBinding.id,
		"elementUsageUniqueName": uniqueName,
		"parameterId": element.parameter.id
	});
	viewParameter.clearElementParameterLinks();
	viewParameter.addElementParameterLink(elementParameterLink);
	viewParameter.refreshAllAdapters(null, parentView);
});

Using Table Visualizations

If your two metric sets are visualized as tables (instead of charts), the script portion that updates the table with the selected metric set is slightly different.

// Update the table with the selected metric set.
table1.metricSetBindings.length = 0;
table1.control.columns = [];
table1.control.rowHeaderColumns = [];
table1.generateMetricSetBinding(metricSetId, true);			

Using the Drop Down List

Choose Sandbox View in the toolbar to test the script in a new tab without saving results of running the script, and then use the drop down list to choose which metric set to display in the bar chart.

Use the drop down list to switch metric sets

For more information, see:

SYM-ZenDesk-v25.4.log-161407050.zip
50 KB Download