Best Practice: Use Filter Line for Filtering Switchable Table and Chart

As an application designer or story developer, learn how to make a filter line apply to both your chart and table, which are switched between each other.

Prerequisites

  • You've already added a table and a chart widget 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 or optimized story.

Procedure

  1. Add a filter line, and place it above the table.
  2. Change the name of the filter line to FilterLine.
  3. In the Builder panel of the filter line:
    1. Under Source Widget, select the table.
    2. Under Dimension Selection, choose + Add Dimension, and select Location, Product, Sales Manager and Store from the dropdown list.
  4. Write the script to ensure that the filters stay the same after table and chart switch:
    1. Hover over the table in Outline, and select Start of the navigation path (Edit Scripts) Next navigation step onResultChangedEnd of the navigation path.
    2. Enter this script in the script editor:
      Sample Code
      console.log('OnResultChanged');
Chart.getDataSource().copyDimensionFilterFrom(
Table.getDataSource(), "Location_4nm2e04531");
Chart.getDataSource().copyDimensionFilterFrom(
Table.getDataSource(), "Product_3e315003an");
Chart.getDataSource().copyDimensionFilterFrom(
Table.getDataSource(),
"Sales_Manager__5w3m5d06b5");
Chart.getDataSource().copyDimensionFilterFrom(
Table.getDataSource(),
"Store_3z2g5g06m4.Store_GEOID");

      The script copies each of the dimension filters added in the filter line.

  5. Save the application or story, and open it in view time.

Results

When you run the application or story, it looks like this:

When you select the filter line, the four measures you've configured appear.

When you select one of the measures, in this example, Location, a window pops up, which lets you choose the members to be included in the table or chart. Let's select San Francisco, Las Vegas and Portland.

The table is updated. The same applies to the chart when you switch to it.