• Home

Use a drop down list to switch metric sets with scripting

Contents[Hide]

1. Overview

This article shows you how to program a drop down list component to switch the metric sets displayed by a chart.

For example, you may want to set up two or more metric sets, each with a different combination of measures and/or hierarchies. Then add a drop down list to your dashboard to allow users to choose which metric set they want to see in a bar chart.

The basic idea is to add a script (JavaScript code) to handle the drop down list's Selection Changed action.

2. 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
MetricSet1 with OrderQty measure and Product hierarchy on ROWS

MetricSet2 with OrderQty measure and FirstName hierarchy on ROWS
MetricSet2 with OrderQty measure and FirstName hierarchy on ROWS

2.1. Record the IDs of the metric sets

In order to reference the metric sets from script, you'll need to get their IDs.

Go to the EXPLORE window and locate the first metric set.

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

View properties of a metric set
View properties of a metric set

In the Properties dialog, locate the ID field and copy the text to your clipboard. It's a good idea to then paste this text (ID) into Windows Notepad, for example, so you can easily insert the IDs into your eventual script.

Copy the metric set ID
Copy the metric set ID

Similarly, record the ID for MetricSet2.

3. 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.

3.1. Add a drop down list

Next, click the dashboard canvas (to de-select any items), go to the toolbar, and then click Components. From the dropdown toolbar, locate the Drop Down List component and click it.

A drop down list component is added to the dashboard canvas.

Add a drop down list component from the toolbar
Add a drop down list component from the toolbar

3.2. Configure drop down list items

Select the drop down list on the canvas, and then click the Properties tab.

Under Main \ COMMON \ Items, you'll see that the drop down list is configured with a single item by default. Click the item in order to modify it.

Drop down list properties
Drop down list properties


Click the Text tab and set the Caption property to OrderQty by Product. Then go back to the Main tab and set the Value property to Metric Set 1.

Set properties of the first drop down list item
Set properties of the first drop down list item

Click ITEM at the top to go back to the main properties.

Under Main \ COMMON \ Items, click the plus sign button to add a second item. Then click the new item to edit it.

Click the Text tab and set the Caption property to OrderQty by FirstName. Then go back to the Main tab and set the Value property to Metric Set 2.

Set properties of the second drop down list item
Set properties of the second drop down list item

Click ITEM at the top to go back to the main properties.

The drop down list has two items configured now.

Drop down list with two items
Drop down list with two items

4. Add a script

In the Main properties for the drop down list, scroll down to see the ACTIONS section.

Locate the Selection Changed action and expand it.

Click the plus sign button to add a script to handle this action.

Add a script to handle Selection Changed action
Add a script to handle Selection Changed action

Click the newly added script 1 to open the Script Editor.

Script Editor
Script Editor

Copy and paste the following JavaScript code into the Script Editor.

// Check the value of the drop down list.
var metricSetId;
if (dropDownList1.value == "Metric Set 1") {
    metricSetId = "bfd83dd8-82dc-42d2-978d-61c3cc5605ae";
} else if (dropDownList1.value == "Metric Set 2") {
    metricSetId = "b5e042db-1fdb-41d1-a5bd-c1d18dae30ae";
}

// Update the chart with the selected metric set.
chart1.metricSetBindings.length = 0;
chart1.generateMetricSetBinding(metricSetId, true);

If you're performing the steps in this article, you'll need to replace the metric set IDs in the script with the IDs you previously recorded.

Click Build to check for any script errors. (There's no need to save because the Script Editor auto-saves as you type.)

4.1. Re-bind Filters

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

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

// Check the value of the drop down list.
var metricSetId;
//unique name of the hierarchy being filtered
var uniqueName = "Product";
//name of the view parameter for the filter
var parameterName = "viewParameter1"; 
if (dropDownList1.value == "Metric Set 1") {
    metricSetId = "bfd83dd8-82dc-42d2-978d-61c3cc5605ae";
} else if (dropDownList1.value == "Metric Set 2") {
    metricSetId = "b5e042db-1fdb-41d1-a5bd-c1d18dae30ae";
}

// Update the chart with the selected metric set and re-bind the filter to the chart.
chart1.metricSetBindings.length = 0;
//generateMetricSetBinding() returns a promise so that the filter-binding is executed in the done() callback 
chart1.generateMetricSetBinding(metricSetId, true).done(
function (a)
{
    //get viewParameter object
   var viewParameter = dundas.context.baseViewService.currentView.control.viewParameters.toEnumerable().first(
         function(vp) { return vp.name === parameterName;}
   );
   //find the hierarchy's element object
   var element = a.metricSet.elements.toEnumerable().first(
         function(vp) {return vp.uniqueName === uniqueName;}
   );
   //re-bind the filters
   var elementParameterLink = new dundas.view.ElementParameterLink(
         {
             "adapterId": chart1.id,
             "metricSetBindingId": chart1.metricSetBindings[0].id,
             "elementUsageUniqueName": uniqueName,
             "parameterId": element.parameter.id
         }
   );
   viewParameter.clearElementParameterLinks();
   viewParameter.addElementParameterLink(elementParameterLink);
   viewParameter.refreshAllAdapters();
});
  

4.2. 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);

5. Using the drop down list

Switch to View mode, 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
Use the drop down list to switch metric sets

6. See also

 

Dundas Data Visualization, Inc.
500-250 Ferrand Drive
Toronto, ON, Canada
M3C 3G8

North America: 1.800.463.1492
International: 1.416.467.5100

Dundas Support Hours: 7am-6pm, ET, Mon-Fri