This article explains how Creators can add interactive filters to dashboards using Selector Containers, Text Containers for custom links with Filter URLs, Global Filters for project-wide filtering or Text Containers withGlobal Filter URLs for custom links. A Media Assets Sheet can also be added to automatically update images or media based on your filter selection.
In this article
- Dashboard Interactive Filters Options
- Filter Dashboards by Axis and Elements
- Project-Wide Filtering with Global Filters
- Using Media Assets with Filters
1. Dashboard Interactive Filter Options
As a Creator, you can build an interactive dashboard for users to explore data, compare segments, and find
insights without leaving the page.
Before setting up filters, let have a look at the different options that allow users to interact with a dashboard:
| Filtering Method | How Users Interact with Filters |
| Selector Container | Selector containers allow users to select and apply filters using the Selector that controls all or specified charts on a page. |
| Text Container with Filter URLs | A text container with a filter URLs that specify an axis and element allows users to click a link and view the dashboard page with predefined filters. |
| Global Filters | With global filters enabled for the project, they can be used to apply filters on the dashboard. Users can select the global filter they need or have it preset to specific filter or subset of filters. |
| Text Container with Global Filter URLs | Use a text container and add an HTML link with global filter URLs to allow users to click the link and see the dashboard page with predefined global filters. You can add filter URLs on top of the existing global filters. |
| Media Assets Sheet + Filters | Combine filters with Media Assets Sheet to dynamically display different images, logos, or visual content as users click on filter selections. |
2. Filter Dashboards by Axes and Elements
a. Dashboard Filters with Selector Container
A Selector Container provides a drop-down menu that allows users to filter multiple dashboard containers from a single control. This is the easiest way to add interactive filtering when all charts share the same filter options.
Use the Selector Container when:
- All dashboard charts use the same filter dimensions
- Users need a simple drop-down filter
- Multiple charts should update together
Create Selector Filters
- Save all stories with the same filters; they can be in any dimension as long as they share the same axes.
- Open the dashboard in Edit Mode and add a Selector container.
- Position and resize the container, then set all relevant options in General Settings > Titles
- Save the dashboard.
If clicking the selector title doesn't open the menu, load the stories and apply the same filters to all charts.
By default, the Selector Container shows the Filtered By text. To customize, turn off Visible under Content to hide it, then position the Selector Container over text identifying the filter menu.
The example below shows how the Selector Container stays on top but is invisible. When a user clicks on a custom label to filter the view, the Selector opens.
- In dashboard edit mode, add Selector container
- Move and resize the container over the text
- In Settings > Titles, disable all except Filtered By
- Set background opacity and turn Visible OFF under content
- After saving, select filters and click APPLY
b. Filter URLs with a Text Container
Filter URLs provide more control over the user experience by allowing Creators to build custom filter controls. Instead of using a drop-down menu, Filter URLs are created using hyperlinks within a Text Container.
- Creating custom navigation experiences
- Only a small number of filter options exist
- Filters should be created using HTML code as a link
- Users can click once and view a predefined filter path
Create custom filter link
- Open the dashboard in Edit Mode and add a Text container.
- Create an <a> tag and specify the URL path with dashboard ID, filter axis and filter element
following this format: #/dashboard/DashBoardID/filter:AxisLabel.ElementLabel
To learn more in details, see Dashboard Interactive Filters.
Filter URLs affect only charts with filters in the story. Ensure all charts on the page share the same filters to see the custom link work correctly.
Including a visual indicator for applied filters can help make the user experience more intuitive. The examples below show how interactive filters with different containers can improve usability by allowing dynamic sorting and better organization of content.
- This dashboard includes stories with the same filters, but none are active
- Click the link text below each image to filter data by area
3. Project-Wide Filtering with Global Filters
Unlike dashboard page-level filters, which only affect content on the current dashboard page, global filters can apply the same filter selection across multiple stories and dashboards. When global filters are enabled, dashboard creators can let users filter content via the Global Filter menu or by setting up a custom link with global filter URLs in a text container.
a. Filter using the Global Filter Menu
To create a dashboard view that uses the Global Filter menu:
- Create an analysis and turn Global Filters ON.
- Save the story with Filters On.
- Add the story to a dashboard.
- The Global Filter menu automatically becomes available on the dashboard.
In the example below, users can change filters using the Global Filter menu. To achieve this, Global Filters are enabled without selecting a specific filter value, and the story is saved with filters enabled.
- Create an analysis and enable the Global filter
- Save the story using Save With filter On
- Add the story to the dashboard and save; the Global Filter menu appears automatically (in orange)
- Users can click the Global Filter menu to apply filters
b. Filter URLs with Global Filters
Global filter URLs work similarly to Filter URLs but operate at the Global Filter level. To create a more guided dashboard experience with custom navigation links that apply global filters, you can add them anywhere on the page and incorporate the brand design, instead of relying on the Global Filter menu.
- Add a Text Container in dashboard edit mode.
- Create an <a> tag and specify the URL path with dashboard ID, filter axis and filter element with format:
#/dashboard/DashBoardID/gfilter:AxisLabel.ElementLabel - Save and click on the custom link to applies global filters, shown in orange in the filter menu.
🔗 Learn more about Global Filters URLs.
To ensure consistent results, save all stories used on the dashboard with Global Filters enabled. Stories that are not configured to use Global Filters may display different results.
Using Media Assets with Filters
Filters can also control the display of images and other media items. This lets dashboards update both data and visual content at the same time, making the experience more intuitive since you can immediately see which filter is active.
In this example below, we first upload a media asset sheet to the project. The dashboard uses custom links with filter URLs to show Social Media Trends. Selecting a social media platform displays its logo, and the applied data filter is clearly shown on the dashboard.
- This dashboard has filter buttons with URLs from a text container
- The Media Asset Sheet is uploaded to the project
- Clicking filters shows only relevant data
🔗 Learn more about setting up media assets in Display Media Items in Dashboards.
Where to from here?
Learn more about adding links to your dashboards