Dynamic Measures

Contents[Hide]

1. Overview

This article shows you how to use scripting in showing and hiding measures in the chart using dynamically populated drop down list. This is used if you have the same rows displayed for all the measures you will be using in the chart.

2. Getting Started

As an example, we will be using the data from AdventureWorks2012 DW with Internet Sales Amount, Gross Profit and Internet Tax Amount as measures, and Calendar Year as rows.

AdventureWorks2012 DW Table
AdventureWorks2012 DW Table

The table has been changed into line charts for the measures displayed:

Line Chart
Line Chart
 

Take note of the Script Name of the chart in Properties > Main > Actions > Script Name

Script Name of the Chart
Script Name of the Chart

3. Creating Dynamic Dropdown List

In the menu bar, go to Components, and select Drop Down List. Move the created drop down list, and size it accordingly.

Drop Down List Component
Drop Down List Component

Take note of the Script Name of the drop down list in Properties > Actions > Script Name.

Script Name of the Drop Down List
Script Name of the Drop Down List

Click on the dashboard, and go to Properties > Main> Actions > Ready. Click the plus (+) sign to create a script.

Ready Action Script
Ready Action Script

Click on the script, and on the Script Editor, add the following script, and Build:

// Adding Dynamic Drop Down List
var myView = this.baseViewService.currentView;
var myChart = myView.getAdapters().toEnumerable().first(function (a) {
    return a.name === "chart1";
});
var array = [];
myChart.metricSetBindings[0].dataResult.metricSet.measures.forEach(function(b){
    array.push(b.caption);
});

var text="";
var items = [];
for (index = 0; index < array.length; index++) {
    var item = new dundas.controls.DropDownListItem({
        "value": array[index],
        "caption": array[index]
    });
    items.push(item);
}
dropDownList1.items = items;

Script Editor for Dynamic List
Script Editor for Dynamic List

In the script above, the "caption" of each measure is used to populate the drop down list. If you need to use some other measure property, you can check for available properties using the Browser Developer Tools.

4. Showing and Hiding Measures

Click on the drop down list, and go to Properties > Main > Actions > Selection Changed. Click the plus (+) sign to create a script.

Selection Changed Action Script
Selection Changed Action Script

Click on the script, and on the Script Editor, add the following script, and Build:

// Showing/Hiding Measures
var items = new Array();
var ser = new Array();
items = dropDownList1.items;
ser = chart1.control.series;

for (var i = 0; i < ser.length; i++){
    ser[i].isVisible = false;
}

for (var j = 0; j < items.length; j++){
if (items[j].isSelected == true){
       for (var k = 0; k < ser.length; k++){
           if (items[j].value == ser[j].legendText){
                ser[j].isVisible = true;
                break;
            }
            else {
                continue;
            }
        }
    } 
}

Script Editor for Showing and Hiding Measure
Script Editor for Showing and Hiding Measure

5. Testing the Results

Click View, refresh your browser, and check if the drop down list has all the measures:

New Drop Down List
New Drop Down List

Once the measure is selected, check if the chart changes.

Showing and Hiding Measures
Showing and Hiding Measures

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