Best Practice: Filtering Table and Chart through Dropdown (Single Selection)

1. Click (Add...)  Dropdown.
2. Change the name of the dropdown to Dropdown_Measures.

   You do this on the Styling Panel under Analytics Designer Properties, or on the Layout panel under Canvas  Dropdown_1   More  Rename.

3. Add a label to the dropdown that indicates to users that they can select measures through the dropdown.
   1. Click (Add...)  Text.
   2. Place the text widget to the left of the dropdown.
   3. Enter a text, Selected Measure, for example.
   4. Optional: Resize the text widget.
4. To let users select a value from the dropdown, add a script variable that acts as a global variable, which can be accessed from anywhere in your application.
   1. On the Layout panel under Scripting, click (Add Script Variable).
   2. In the Script Variable panel under Structure, enter CurrentMeasureFilterSelection as name, leave type as string and enter [Account_BestRunJ_sold].[parentId].&[Gross_MarginActual] as default value.
   3. To close the Script Variable panel, click Done.

   This script variable definition lets Gross Margin appear as the default value in the dropdown when running the application.

5. To define what will happen when users select a filter value from the dropdown, create a script object. In this object, write a function that sets the measure filter according to what the user has chosen from the dropdown.
   1. On the Layout panel under Scripting, click (Add Script Object).
   2. To rename the folder, hover over ScriptObject_1, click More  Rename and enter Utils.
   3. To rename the function, hover over function1, click More  Rename and enter setMeasureFilter.
   4. Click on the function setMeasureFilter, and when the Script Function panel opens, click (Add Argument).
   5. Enter selectedId as name of the argument, leave type as string and click Done.
   6. To write the script for the function, hover over the setMeasureFilter function, click and enter this script in the script editor:
      Sample Code

      Table.getDataSource().removeDimensionFilter("Account_BestRunJ_sold");
      if (CurrentMeasureFilterSelection !== "") {
      	Chart.removeMeasure(CurrentMeasureFilterSelection, Feed.ValueAxis);
      }
      Table.getDataSource().setDimensionFilter("Account_BestRunJ_sold",selectedId);
      Chart.addMeasure(selectedId, Feed.ValueAxis);
      

      With this script you define what happens to the table and the chart when users select a measure from the dropdown:

      You remove any already set dimensions of the table or measures of the chart and add the captured value as the new dimension and measure of the table as well as the chart.

Define how to pass the captured value to the setMeasureFilter function by creating an onSelect function of the dropdown widget.

6. To open the onSelect function, hover over the dropdown widget in the Layout panel, click and enter this script:
   Sample Code

   Utils.setMeasureFilter(Dropdown_Measures.getSelectedKey());

   This script gets the selected value of the dropdown and passes it to the setMeasureFilter function as parameter.

7. Define what will happen when the analytic application is first run by creating the onInitialization function of the canvas itself.
   1. Hover over the Canvas in the Layout panel, click and select onInitialization.
   2. Enter this script in the script editor:
      Sample Code

      var measures = Table.getDataSource().getMeasures();
      var selectedKey = "";
      if (measures.length > 0) {
       	for (var i=0;i<measures.length; i++){	
              // Measure
      		Dropdown_Measures.addItem(measures[i].id,measures[i].description);
      		if (selectedKey === "" && i === 0) {
      			selectedKey = measures[i].id;
      			Dropdown_Measures.setSelectedKey(selectedKey);
      			console.log(["selectedKey ", selectedKey]);
      		}		
      		console.log(["CurrentMeasure ", measures]);	
      	}	
      }
      Utils.setMeasureFilter(selectedKey);
      

      With this script you make sure that on initialization, you load all the available measures of the table into your dropdown.

      After doing that, you set the selected key to the first measure in that list and then you set your measure filter to that first measure in your list.

8. Save the application and click Run Analytic Application.