Link charts to lists | Professional filter

In this article, we will show you how to use a diagram to filter a list per the desired values.

As an example, we use an Excel list of all sales staff in which we have added pivot tables and charts: https://www.dropbox.com/s/az2qafqnkfkwtgk/chart-filter.xlsx?dl=0

From this file, we created the app "oaa doc - use chart as filter in list": https://get.openasapp.net/l/app/6f74412f-73bf-4c23-8b18-71c2f90c5704

Link diagram to list

The definition is: linkinfo=component:COMPONENTNAME,type:filter,data:COLUMNHEADER;

• COMPONENTNAME is replaced by e.g. "list".
• COLUMNHEADER is replaced by the heading of the relevant column.

The circuit diagram shows the sales volume (country from the Pivot table) and the column "Country" of the list on the "List" page. Clicking on one of the parts of our diagram, this list is filtered according to the corresponding values in the "Country" column. The redirect is done automatically.

This redirect and simultaneous filtering is possible because we have added the following definition in the editor of the diagram (in the tab "Advanced"):

linkinfo=component:list,type:filter,data:country;

1. Switch to the tab "Advanced" in the chart editor. (Preview » Click the pencil icon on the chart)
2. Add the definition linkinfo=component:list,type:filter,data:<COLUMN>; replacing <COLUMN> with the name of the desired column.
3. Save the changes by clicking on the check mark.

Make sure that the corresponding columns in your list are correctly labeled and active. We also recommend that you display the column headings. If necessary, you must make the corresponding changes to the editor of your list.

Working with multiple lists and charts

In the lower diagram in our app, the definition was changed because we wanted to filter not only another column but also a different list.

The definition linkinfo=component:list2,type:filter,data:territoryname; is searching for a list with the definition componentname=list2; and filter in the column "territoryname" there.

Reminder:

The definition is: linkinfo=component:COMPONENTNAME,type:filter,data:COLUMNHEADER;

• COMPONENTNAME is replaced by "list2".
• COLUMNHEADER is replaced by the heading of the relevant column. ("territoryname")

Step 1: Adjust the list

In the second list, we have added the definition componentname=list2; first.

1. In the list editor, switch to the "Advanced" tab. (Preview » Pencil icon » Advanced)
2. Add the definition componentname:list2;.
3. Save the changes by clicking on the check mark.

Step 2: Adjust the chart

In the diagram, we have added the definition linkinfo=component:list2,type:filter,data:territoryname;.

1. In the chart editor, switch to the "Advanced" tab. (Preview » Pencil icon » Advanced)
2. Add the definition linkinfo=component:list2,type:filter,data:territoryname;.
3. Save the changes by clicking on the check mark.