Best Practice: Filtering Table and Chart through Checkboxes (Multi Selection)

Learn how to filter a table or a chart using multiple measures selected from a checkbox group widget.

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: Switching between Chart and Table and can now enhance your analytic application.

Context

Unlike the dropdown widget, the checkbox group widget lets you use multiple measures as filters. In this use case, you add a checkbox group widget where you list all the measures of your data source. On top of that, you add three buttons:

  • Button set selected to filter the table and the chart according to the selected measures of the checkbox group

  • Button remove all to remove all the selected measures rather than deselecting them one by one in the checkbox group

  • Button set all to display all the available measures in your table and chart rather than selecting them one by one in the checkbox group

Procedure

  1. Click Start of the navigation path (Add...) Next navigation step Checkbox GroupEnd of the navigation path and place this widget on the left side of your table.
  2. Change the name of the checkbox group to CheckboxGroup_Measures on the Layout panel under Start of the navigation pathCanvas Next navigation step CheckboxGroup_1 Next navigation step  More Next navigation step RenameEnd of the navigation path.
  3. Remove the initial values Value 1 and Value 2 from the checkbox group value list in the Builder panel: Select these two values one after the other, click , and then click Apply.
  4. Add a label to the checkbox group that indicates to users that they can select measures through the checkboxes.
    1. Click Start of the navigation path (Add...) Next navigation step TextEnd of the navigation path.
    2. Place the text widget on top of the checkbox group.
    3. Enter a text, Measures, for example.
    4. Optional: Resize the text widget.
  5. For easy access to the checkbox group's measures, add the three buttons mentioned above:
    1. Click Start of the navigation path (Add...) Next navigation step ButtonEnd of the navigation path and place it beneath the label.
    2. Repeat the step above for the other two buttons.
    3. Select the first button, click Start of the navigation pathDesigner Next navigation step StylingEnd of the navigation path, and enter Button_setMeasureFilter as name and set selected as text.
    4. Select the second button, click Start of the navigation pathDesigner Next navigation step StylingEnd of the navigation path, and enter Button_removeAllMeasures as name and remove all as text.
    5. Select the third button, click Start of the navigation pathDesigner Next navigation step StylingEnd of the navigation path, and enter Button_setAllMeasures as name and set all as text.
  6. To access the values users 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 AllMeasures, is set as an array and holds all the measures that users can select in the checkbox group.

    • The second script variable, called CurrentMeasureFilterSelection, is set as a string and holds the measures that users currently selected in the checkbox group.

    1. On the Layout panel under Scripting, click (Add Script Variable).
    2. In the Script Variable panel under Structure, enter AllMeasures as name, leave type as string, and toggle the Set As Array button to YES.
    3. To close the Script Variable panel, click Done.
    4. Add a second script variable, and in the Script Variable panel under Structure, enter CurrentMeasureFilterSelection as name, leave type as string, and toggle the Set As Array button to YES.
    5. To close the Script Variable panel, click Done.
  7. To define what will happen when users select a filter value in the checkbox group, create a script object. In this object, write a function that sets the measure filter according to what the user has chosen from the checkbox group.
    1. On the Layout panel under Scripting, click (Add Script Object).
    2. To rename the folder, hover over ScriptObject_1, click Start of the navigation path More Next navigation step RenameEnd of the navigation path, and enter Utils.
    3. To rename the function, hover over function1, click Start of the navigation path More Next navigation step RenameEnd of the navigation path, and enter setMeasureFilter.
    4. Click on the function setMeasureFilter, and when the Script Function panel opens, click (Add Argument).
    5. Enter selectedIds as name of the argument, leave type as string, toggle the Set As Array button to YES, and click Done twice.
    6. To write the script for the function, hover over the setMeasureFilter function in the Layout panel, click , and enter this script in the script editor:
      Sample Code
      // remove Measures
Table.getDataSource().removeDimensionFilter("Account_BestRunJ_sold");
if (CurrentMeasureFilterSelection !==  [""]) {	
	for (var i=0;i<CurrentMeasureFilterSelection.length; i++){	
		Chart.removeMeasure(CurrentMeasureFilterSelection[i], Feed.ValueAxis);
	}	
}

 // add Measures
Table.getDataSource().setDimensionFilter("Account_BestRunJ_sold",selectedIds);
for (i=0;i<selectedIds.length; i++){	
        
		Chart.addMeasure(selectedIds[i], Feed.ValueAxis);
	}	
// save the current selection into global variable
CurrentMeasureFilterSelection = selectedIds;

      With this script you define what happens to the table and the chart when users select filter values in the checkbox group:

      • You remove any already set dimensions of the table or measures of the chart.

      • You add the captured values the users have selected in the checkbox group as new dimensions of the table and as new measures of the chart.

      • You take the currently selected measures and save them in the script variable CurrentMeasureFilterSelection.

  8. Define what will happen when users click the buttons you created.
    1. Hover over the set selected button in the Layout panel, click , and enter this script:
      Sample Code
      Utils.setMeasureFilter(CheckboxGroup_Measures.getSelectedKeys());

      This onClick function script calls the Utils.setMeasureFilter function and passes to it the selected measures of the checkbox group.

    2. Hover over the remove all button in the Layout panel, click , and enter this script:
      Sample Code
      CheckboxGroup_Measures.setSelectedKeys([""]);
Utils.setMeasureFilter([""]);

      This onClick function script removes all the selected measures from the checkbox group itself and passes an empty array to the Utils.setMeasureFilter that updates your table and chart as well as your global variable CurrentMeasureFilterSelection.

    3. Hover over the set all button in the Layout panel, click , and enter this script:
      Sample Code
      CheckboxGroup_Measures.setSelectedKeys(AllMeasures);
Utils.setMeasureFilter(AllMeasures);

      This onClick function script sets the selected keys of the checkbox group to the AllMeasures script variable you defined before and passes the same variable to the Utils.setMeasureFilter function.

  9. 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
      // get all measures from the table data source
var measures = Table.getDataSource().getMeasures();

// define array or the selected Keys
var selectedKeys = ArrayUtils.create(Type.string);

if (measures.length > 0) {
 	for (var i=0;i<measures.length; i++){	
        // add the Measure to checkbox group
		CheckboxGroup_Measures.addItem(measures[i].id,measures[i].description);
		//add the measure to the selectedKeys
		selectedKeys.push(measures[i].id);
		CheckboxGroup_Measures.setSelectedKeys(selectedKeys);
	
		console.log(["CurrentMeasure ", measures]);	
	}	
}

console.log(["selectedKey ", selectedKeys]);
AllMeasures = selectedKeys;
Utils.setMeasureFilter(selectedKeys);

      With this script you make sure that on initialization, you get all the available measures of the table's data source.

      You define a selected keys array of type string and, using a loop, you add the measures to your checkbox group and the selected keys array. You also call on the setSelectedKeys function of the checkbox group and set its selected keys to your array.

      Finally, you set the script variable AllMeasures and the measure filter to the selected keys.

  10. Save the application and click Run Analytic Application.

Results

When you run the application, it looks like this:

If you click the remove all button, all measures are deselected and there is no table or chart (when you click on ).

If you click the set all button, all measures are selected and the table (or chart) looks the same as when you first ran the application.

Let's select a few measures (Gross Margin Plan, Quantity Sold, Original Sales Price abs Dev, and Discount) in the checkbox group and click the set selected button. The table is updated accordingly, (and also the chart when you click on ):