The Selector container lets users access the Selector on a dashboard page without needing to zoom the chart. This allows users to adjust the information they see, removing or adding elements, or using the available filters directly on the dashboard page. When the story views are created with the same filters or variables, a Selector container can be added to access these items in the dashboard.
The selector enables users to interact with items common to all charts directly on the dashboard
In this article
1. Selector Container
After adding charts to your dashboard that include shared items, e.g., demographic filters, or a time period in the across axis, etc., you can add a selector container to give users access to these shared items directly on the dashboard. Users can click the formatted container and access the Selector with the shared items.
For example, charts on the same dashboard page that all contain the filters Region and Product Category, can be filtered by these options across all the charts once a selector container is added.
Add a Selector Container
- Create the story views ensuring they share the items needed in the Selector.
- Load the dashboard and enter edit mode.
- Add the chart containers for each story view.
- Add a Selector container.
- Customize the container.
- Save your dashboard.
The following example illustrates adding a basic Selector container with no customization. The two charts share the same time periods in the across axis. The Selector allows the user to remove or add time periods.
- In edit mode, add a Selector container
- Labels for the common items in the charts appear in the Selector container
- After saving, viewers can use the Selector title to choose items and APPLY to filter data.
It is good practice to SAVE your changes regularly as you make progress
Creating Custom Selectors
For a user-friendly experience, you can combine the Selector container with Text or Image containers to label or illustrate the filters.
Here's how to create a custom selector:
- With your chart containers in place, add text/image containers for each filter option.
- Add a selector container and switch on the relevant Title in settings.
- Position the selector container over the text/image container.
- Customize the container as needed (see General Settings below).
- Save your dashboard.
In the following example, the story views have been created with the same filters, although they have been cleared, so that charts in the dashboard display with no filters. The charts also share the same down axis (Coffee Type) for which we can create a selector item. As the dashboard selector is setup, we'll make changes to the General settings which you will learn about in the next section.
- In edit mode, position the text containers
- Add the first selector container
- Move and resize it so that it sits over the relevant text
- Expand Titles and turn OFF all titles except the relevant dimension (Across)
- Make the background transparent and turn Visible OFF
- Add the second selector container and repeat the steps, but keep the Filter dimension ON
- After saving, you can access the Selector for each dimension
2. General settings
General settings let you control all the elements of a Selector container. The Content Visibility and Titles are key elements for customizing the selector.
Container Name and Type
Give your container a name, this is useful when you want to manage many containers. The container type currently selected is also displayed here.
- After selecting the container, rename the container in the Name field
- The container type is listed next to Type
Content
With the selector container placed over a text container, you can turn off content visibility to hide the information that shows in the selector container. Make sure the background is transparent and the selector container is placed on top of the text container.
In this example, the across axis, Coffee Type is added to the selector, allowing users to change the categories across both charts. Turning Visible OFF, removes the text, Coffee Type, from the selector container so that users only see the text underneath. When users click the text, the selector opens displaying the available options.
- Place the selector container over the text
- From the Content section, turn Visible OFF
- After saving, click the text to open the selector and see the filtering options
Titles
Titles is where you control the options that are active in the selector. For example, Filtered by provides access to all the filters in the story views. With Down or Across turned on, users can add or remove selections from the corresponding axes. All Titles are ON by default when you add the selector container.
- Create a new selector container for each filter group.
- Expand Titles and disable all areas except the relevant dimension
- After saving, each filter will show options for the relevant dimension only
Note: Although some Titles are not relevant to the story views, it is good practice to turn these OFF in case a story view is updated, for example with a measure. The selector container will automatically be updated and will display the Measure by option if it is on.
Size & Position
Use the size and position options to place your container precisely.
- Width and Height control the size of the container.
- X (from left) and Y (from top) control the horizontal and vertical placement in the dashboard canvas.
- Enter the specific pixel values for width and height of the container
- Enter the X (from left) and Y (from top) values to position the container
- Save
Padding
Use the options under Padding to create extra space around the container's content.
Learn more about Padding.
Arrange
Use the Arrange options to control the layering of containers. When using a selector Container, it needs to sit on top of any related text or image containers.
If a text container is created after the selector container, the text container will sit on top. Use the Send backward option to move the text container below the selector container.
- Position the selector container over the text
- Use Send backward to arrange the text container below the selector container
Using Send backward and Bring forward can sometimes take more than one click, it depends on the order all containers have been placed on the dashboard page. Learn more about layering containers.
Background
The background color of the container can be customized by entering a hexadecimal (hex) value. You can also control the transparency of the background. A value of 0% is fully transparent, while 100% is opaque.
In this example, with the selector container over text, we'll make the container transparent.
- By default, the background is white with 50% opacity
- To remove the background, set the opacity to 0%
- To hide the text in the container, the visibility is also turned OFF
- Save the dashboard
Link
The Link option is not applicable when selector containers are used as filter options. To learn more about the general settings common to all container types, please review the Dashboard Containers article.
Where to from here?
Learn more about Dashboards