Best Practice: Selection Handling in Table and Chart and Open a Details Popup

Learn how to create and open a popup window that contains extra information about the selected element.

Prerequisites

You've already added a table and a chart widget to your canvas and placed them on top of each other.
To follow all functions of this sample use case, you've completed the exercise Best Practice: Switch between Chart and Table and can now enhance your analytic application.

Context

By selecting an item, you open a popup window which displays information about the selected item.

In the table, you will be able to select a measure cell, a dimension cell, or a data cell. In the chart, you will be able to select a dimension cell and a measure/dimension chart bar (here Gross Margin Plan for Lemonade).

You also add two dropdown lists.

The first lets you choose which dimension (Location, Product, Store, or Sales Manager) you want to filter the table or chart on.
The second displays the available hierarchies that can be used to change how the data is displayed.

Note

In this example, only single selection is supported for the table and chart.

Procedure

Create two dropdown lists.
1. Click (Add...) Dropdown and place this widget above your table.
1. Change the name of the dropdown to Dropdown_Dimensions. You do this on the Styling panel under Analytics Designer Properties or on the Layout panel under Canvas Dropdown_1 More Rename.
2. Click (Add...) Dropdown and place this widget above the table next to the other dropdown. Leave some space in between the dropdowns so you can add name labels for them later on.
3. Change the name of the dropdown to Dropdown_Hierarchies. You do this on the Styling panel under Analytics Designer Properties or on the Layout panel under Canvas Dropdown_1 More Rename.
Add the values you want to choose from in the widget.
1. In your Canvas select the Dropdown_Dimensions widget and click Designer.
2. Go to the Builder Panel and under Dropdown Value click .
3. Insert Location_4nm2e04531 as Value 1 and Location as dedicated text.
4. Click and insert Product_3e315003an as Value 1 and Product as dedicated text.
5. Click and insert Store_3z2g5g06m4 as Value 1 and Store as dedicated text.
6. Click and insert Sales_Manager__5w3m5d06b5 as Value 1 and Sales Manager as dedicated text.
7. Set Location as default value.
8. Click Apply to save the changes.
To distinguish the dropdown lists create a label for each of them.
1. Click (Add...) Text and place it on the left side of the widget Dropdown_Dimensions.
2. Doubleclick the label and type Dimension.
3. Change the name of the text widget to Dropdown_Dimensions_Label. You do this on the Styling panel under Analytics Designer Properties or on the Layout panel under Canvas Text_1 More Rename.
4. Click (Add...) Text and place it on the left side of the widget Dropdown_Hierarchies.
5. Doubleclick the label and type Hierarchies.
6. Change the name of the text widget to Dropdown_Hierarchies_Label. You do this on the Styling panel under Analytics Designer Properties or on the Layout panel under Canvas Text_1 More Rename.
In the Layout panel next to Popups click Add Popup.
1. Change the name of the popup to Popup_Details. You do this on the Styling panel under Analytics Designer Properties. Under Popup Size set the size of the popup window to the Width of 800 and the Height of 400.
2. In the Builder under Popup Settings toggle the Enable header & footer button to YES.
3. Enter Details as Title .
4. Under Buttons add your button Cancel. Click and insert BTN_Cancel as ID and Cancel as dedicated text. Then check all three displayed options Emphasized, Enabled and Visible.
5. Click Apply to save the changes.
To be able to display the extra information in the popup, in the Insert panel click on the chart icon.
1. Select the chart widget in your canvas and click Designer. Under Analytics Designer Properties, change the name of the widget to Details_Chart.
2. In the Builder, use the model BestRun_Advanced as Data Source.
3. Under Chart Structure select Trend.
4. Under Measures, add Gross Margin, Gross Margin % Dev, Gross Margin Abs Dev and Gross Margin Plan.
5. Under Time add Time as dimension.
To access the values you can select in the checkbox group, create two script variables that act as global variables, which can be accessed from anywhere in your application.
- The first script variable, called CurrentDimension, holds the current selection from the dimensions dropdown list.
- The second script variable, called CurrentMeasures, is set as array and holds the measures that users currently selected in the checkbox group.
- The third script variable, called CurrentDetailsMeasures, is set as an array and holds the data about the selections made that will be used to display the data in the popup window.
1. On the Layout panel under Scripting, click (Add Script Variable).
2. In the Script Variable panel under Structure, enter CurrentDimension as name and leave type as string.
3. To close the Script Variable panel, click Done.
4. Add a second script variable, and in the Script Variable panel under Structure, enter CurrentMeasures as name, leave type as string, and toggle the Set As Array button to YES.
5. Add a third script variable, and in the Script Variable panel under Structure, enter CurrentDetailsMeasures as name, leave type as string, and toggle the Set As Array button to YES.
6. To close the Script Variable panel, click Done.

Hover over the Dropdown_Dimensions in the Layout panel, click

, and enter this script:

Sample Code

Table.addDimensionToRows(sel);

//Chart
Chart.removeDimension(CurrentDimension,Feed.CategoryAxis);
Chart.addDimension(sel, Feed.CategoryAxis);

//Details_Chart remove dimension filter
Details_Chart.getDataSource().removeDimensionFilter(CurrentDimension);

// write filter information into the browser console
console.log(['CurrentDimension: ',CurrentDimension]);
console.log(['Selection: ', sel]);

// save the current selection (dimension) into a global variable
CurrentDimension = sel;

// get hierarchies from the current dimension
var hierarchies = Table.getDataSource().getHierarchies(CurrentDimension);
var flag = true;

// remove all current items form the Dropdown_Hierarchies
Dropdown_Hierarchies.removeAllItems();

// loop
for (var i = 0; i < hierarchies.length; i++) {
	if (hierarchies[i].id === '__FLAT__') {
 	 Dropdown_Hierarchies.addItem(hierarchies[i].id,'Flat Presentation');
	 }
 	else {
 	Dropdown_Hierarchies.addItem(hierarchies[i].id,hierarchies[i].description);
 	if (flag === true) {
 	 var hierarchy = hierarchies[i].id;
	 flag = false;
		}
	}
}
// write hierarchy information to browser console
console.log(['Hierarchy: ', hierarchy]);
console.log(['Current Dimension: ',CurrentDimension]);

// set Flat Hierarchy as Default
Dropdown_Hierarchies.setSelectedKey('__FLAT__');

// Table
Table.getDataSource().setHierarchy(CurrentDimension,'__FLAT__');

// Chart
Chart.getDataSource().setHierarchy(CurrentDimension,'__FLAT__');

// Details_Chart
Details_Chart.getDataSource().setHierarchy(CurrentDimension, '__FLAT__');

This onSelect function first gets the selected element of the list. It then replaces any already set dimensions in table and chart by the newly selected dimenson. This dimension is also added to the details chart in your popup window. It writes the filter information in the browser's console and saves the selection in the script variable CurrentDimension.

To set the available hierarchies for the selected dimension, the script loops through the available hierarchies of the data source in relation to the current dimension to push all available hierarchies in the dropdown list.

Finally, the default hierarchy for table, chart and details chart is set to flat presentation.

Hover over the Dropdown_Hierarchies in the Layout panel, click

, and enter this script:

Sample Code

var sel = Dropdown_Hierarchies.getSelectedKey();

// set hierarchy for Table
Table.getDataSource().setHierarchy(CurrentDimension,sel);

// set hierarchy for Chart
Chart.getDataSource().setHierarchy(CurrentDimension,sel);

// set hierarchy for Details Chart
Details_Chart.getDataSource().setHierarchy(CurrentDimension, sel);

This onSelect function simply sets the hierarchy of table, chart and details chart to the selected element in the dropdown list.

In the Layout panel, next to the Table click

, and enter this script:

Sample Code

var sel = Table.getSelections();

console.log(['Table Selection: ', sel]);

Details_Chart.getDataSource().removeDimensionFilter(CurrentDimension);

var Popup_show = false;

if (sel.length > 0) {
	var selection = sel[0];

	for (var dimensionId in selection) {
 		var memberId = selection[dimensionId];

 		if (dimensionId === '@MeasureDimension') {
			// Measure
 			console.log(['Selection Measure: ',dimensionId]);
 			console.log(['Selection Member: ', memberId]);

			 // remove current measure
			 console.log(['CurrentMeasures: ',CurrentMeasures]);

			 for (var i = 0; i < CurrentMeasures.length;i++) {
				Details_Chart.removeMeasure(CurrentMeasures[i],Feed.ValueAxis);
				Details_Chart.addMeasure(memberId,Feed.ValueAxis);

		 }

//		Details_Chart.addMeasure(memberId,Feed.ValueAxis);
 		CurrentDetailsMeasures.push(memberId);
 		Popup_show = true;
 	}
 	// Dimension
	else {
 		console.log(['Selection Dimension: ',dimensionId]);
 		console.log(['Selection Member: ', memberId]);

		Details_Chart.getDataSource().setDimensionFilter(dimensionId, memberId);
 		Popup_show = true;
	 }
	 }
}

if (Popup_show === true) {
 Popup_Details.open();
}

This onSelect function captures the selection made in the table and writes it into the console.

Until the selected element is determined, the popup window is set invisible. The script loops over the table, captures whether it was a measures, dimension or data cell and then pushes this information unto the Details Chart. Then the selected measures are saved in the variable CurrentDetailsMeasures.

Finally, the visibility of the popup is set to true and the popup window opens.

In the Layout panel, next to the Chart click

, and enter this script:

Sample Code

var sel = Chart.getSelections();
console.log(['Chart Selection: ', sel,CurrentMeasures]);
var Popup_show = false;

if (sel.length > 0) {

	Details_Chart.getDataSource().removeDimensionFilter(CurrentDimension);

 	// remove the current measures
 	for (var i = 0; i < CurrentMeasures.length; i++) {
 	Details_Chart.removeMeasure(CurrentMeasures[i],Feed.ValueAxis);
 	}
 
	for (i = 0; i < sel.length; i++) {
		var selection = sel[i];

			for (var dimensionId in selection) {
 				var memberId = selection[dimensionId];
 	
			if (dimensionId === '@MeasureDimension') {
 				// Measure
 				console.log(['Add Selection Measure: ',dimensionId]);
 				console.log(['Add Selection Member: ',memberId]);
 
				Details_Chart.addMeasure(memberId,Feed.ValueAxis);
 				CurrentDetailsMeasures.push(memberId);
 				Popup_show = true;

	 		}
 			// Dimension
 			else {
 				console.log(['Selection Dimension: ',dimensionId]);
 				console.log(['Selection Member: ',memberId]);

				Details_Chart.getDataSource().setDimensionFilter(dimensionId, memberId);
 				Popup_show = true;
 			}
 		}
 	}
}

if (Popup_show === true) {
 	Popup_Details.open();
}

This onSelect function gets the selected element of the chart and saves it in the variable sel.

The popup window is set invisible. The script removes the current measures from the Details_Chart and replaces the measure or dimension filter. Then the selected measures are saved in the variable CurrentDetailsMeasures.

Finally, the visibility of the popup is set to true and the popup window opens.

To write the script for the button Cancel, hover over Popup_Details in the Layout panel, click , and enter this script:
Sample Code
```
// remove the current measure selection and set all default measures for the details chart

for (var i = 0; i < CurrentDetailsMeasures.length; i++) {
	Details_Chart.removeMeasure(CurrentDetailsMeasures[i], Feed.ValueAxis);
}

CurrentDetailsMeasures = ArrayUtils.create(Type.string);

for (i = 0; i < CurrentMeasures.length; i++) {
	Details_Chart.addMeasure(CurrentMeasures[i], Feed.ValueAxis);
}

// close the popup
Popup_Details.close();
```
This opens the OnButtonClick script of the popup widget.

This script removes the content of the variable CurrentDetailsMeasures from the Details_Chart and set the default measures from the CurrentMeasures script variable as the measure of the details chart.

Lastly, the popup window closes after you click the button.

Define what will happen when the analytic application is first run by creating the onInitialization function of the canvas itself.

Hover over the Canvas in the Layout panel, click and select onInitialization.

Enter this script in the script editor:

Sample Code

// get hierarchies from the current dimension
var hierarchies = Table.getDataSource().getHierarchies(CurrentDimension);
var flag = true;

// loop
for (var i = 0; i < hierarchies.length; i++) {
	if (hierarchies[i].id === '__FLAT__') {
 		Dropdown_Hierarchies.addItem(hierarchies[i].id, 'Flat Presentation');
 	}
 	else {
 		Dropdown_Hierarchies.addItem(hierarchies[i].id, hierarchies[i].description);
 		if (flag === true) {
 		var hierarchy = hierarchies[i].id;
 		flag = false;
 		}
 	}
}
// write hierarchy information to browser console
console.log(['Hierarchy: ', hierarchy]);
console.log(['Current Dimension: ', CurrentDimension]);

// set Flat Hierarchy as Default
Dropdown_Hierarchies.setSelectedKey('__FLAT__');

//Table
Table.getDataSource().setHierarchy(CurrentDimension, '__FLAT__');

//Chart
Chart.getDataSource().setHierarchy(CurrentDimension, '__FLAT__');

//Details_Chart
Details_Chart.getDataSource().setHierarchy(CurrentDimension, '__FLAT__');

//fill global Variable CurrentMeasures
CurrentMeasures.push('[Account_BestRunJ_sold].[parentId].&[Gross_MarginActual]');
CurrentMeasures.push('[Account_BestRunJ_sold].[parentId].&[Gross_MarginPlan]');
CurrentMeasures.push('[Account_BestRunJ_sold].[parentId].&[Gross_Margin_Abs]');
CurrentMeasures.push('[Account_BestRunJ_sold].[parentId].&[Gross_Margin_Percent]');

With this script you make sure that on initialization, you load the hierarchies into Dropdown_Hierarchies and set the default hierarchy to flat presentation.

After doing that, you fill the script variable CurrentMeasures with the available measures of gross margin: Actual, Plan, Absolute and Percent.

Save the application and click Run Analytic Application.

Results

When you run the application, it looks like this:

If you click on the dimension data cell Los Angeles, this popup window appears. It gives an overview of the measures Gross Margin Actual, Plan, Absolute and Percent for the location Los Angeles over time.

When opening the browser's console you can always see the current selection printed here.

If you click on the measure cell Gross Margin Actual, this measure is shown in the popup window in relation to the Time factor.

You can also select an individual data cell. If you change the dimension to Store and click the data cell at the crossover of Gross Margin Plan and Country Fair Foods, the popup shows Gross Margin Plan in relation with Time and with a store filter of Country Fair Foods.

If you change the dimension to Location, the hierarchy to States and choose Nevada, this popup window will appear.

If you switch to the chart, select Product as dimension and choose Lemonade, the popup shows all the measures over time for this product.

Click on the measure Gross Margin Abs Dev in regard to the dimension Orange with pulp.

The popup will then look like this.

Note

You can always check what filter is being utilized by clicking on Filter.