Overview
Selector elements let users choose which series fields appear in charts, maps, and tables using a wide data format. Unlike filter elements, which control which dataset records (rows) are shown, selectors manage which dataset fields (columns) are displayed in the connected element.
Some of the key features of selector elements include the following:
- They can be displayed as checkboxes, dropdown menus, or legends.
- A single selector element can connect to multiple charts, maps, and tables, but only one selector can control the series fields for any given chart, map, or table.
- Unlike filter elements, selectors are not connected to datasets. They simply display the names of all series fields discovered in the maps, charts, or tables they are connected to.
- Selectors only work with charts and maps that support multiple series fields, such as stacked and grouped bar charts, line and area charts, dot plots, histograms, and bar maps. The chart or map must be set to wide-data rather than long-data format.
Selectors can be added to your visualization by selecting Insert in the Toolbar and dragging a Selector onto the canvas. Alternatively, click the Selector icon that appears when hovering over an empty section.
To configure a selector, use the options available in the Selector tab on the right panel. These options are explained below.
If you are using a chart or map that supports series fields but have selected a long data format, use
Filter elements instead to control which series are displayed.
Setup
Under the Selector tab, in the Setup section, you can configure the following options:
- Name: Enter the selector's name to identify it in the Layers tab and on the canvas.
- Display Style: Choose from "Checkbox", "Dropdown", or "Slider" formats.
- Margin: Specify the space around the selector element in pixels.
- Alignment: Align the selector element to the left, center, or right.
If the selector is displayed in the Checkbox or Legend style, two additional options are available:
- Gap: Set the horizontal gap between checkbox/legend items and the vertical gap between checkbox/legend rows.
- Direction: Choose whether the checkboxes/legend items are displayed in rows (wrapping down) or in a single column.
Selectors let users control the series fields added to wide-format charts and maps. In this example, the selector displays four series fields as clickable legend items underneath a stacked column chart.
Establishing Connections
Under the Selector tab, in the Connections section, you can establish connections between the selector and any charts, maps, and tables that display series in wide data format. Select these items under Target Elements. Once a connection is established, the selector will display all series names found in the connected elements and allow users to select or deselect them by clicking. When series names are repeated across multiple connected elements, they are treated as a single item in the selector (even if they originate from different datasets).
You can also establish connections to selector elements directly on a map, chart, or table that is displaying series in wide data format. Once the map, chart, or table is selected, open the Connections section of the right panel, and choose the selector element that should control its series fields.
Checkbox Settings
Depending on the chosen Display Type, different options will appear in the Settings section. When the selector is being displayed as "Checkboxes," selector items are displayed as checkboxes or radio buttons, and the following options appear:
- Add Label: Place label text above the checkboxes. Optionally, when more information may be needed to explain the selector element, add a Tooltip adjacent to the label text.
- Enable Multiple Values: When this value is selected, multiple checkboxes can be selected by the user. When multiple values are turned off, the checkboxes are displayed in the radio button style, and the end user will only be able to select one at a time.
- Enable Color Formatting: The checkboxes will be colored according to any color formatting found in connected chart or map elements. View the color formatting section for a more detailed explanation.
- Default Values: Choose the checkbox item that will be selected when the page first loads. If Enable Multiple Values has been selected, more than one default value can be specified.
Dropdown Settings
When the selector is being displayed as a "Dropdown," selector items are displayed as dropdown menu items and the following options are available in the Settings section:
- Add Label: Place label text above the dropdown. Optionally, when more information may be needed to explain the selector element, add a Tooltip adjacent to the label text.
- Enable Multiple Values: When enabled, the end user will be able to select multiple dropdown menu items.
- Enable Color Formatting: The dropdown menu items will be colored according to any color formatting found in connected chart or map elements. View the color formatting section for a more detailed explanation.
- Default Values: Choose the dropdown menu item that will be selected when the page first loads. If Enable Multiple Values has been selected, more than one menu item can be specified.
- Placeholder Text: Choose the placeholder text that should appear when the dropdown first loads, unless a default value is specified. Optionally, you can enable Add Placeholder to Menu, which adds the placeholder text as the first dropdown menu item (irrespective of whether a default value is specified).
If you are using placeholder text, ensure that the text corresponds with the selected fallback behavior.
Legend Settings
When the selector is being displayed as a "Legend," selector items are displayed as clickable items in a legend. Multiple values are always enabled, so the user cannot be restricted to clicking on one item at a time. Color formatting is always enabled. The following options are available in the Settings section:
- Add Label: Place label text above the legend. Optionally, when more information may be needed to explain the selector element, add a Tooltip adjacent to the label text.
- Default Values: Choose the legend items that will be selected when the page first loads. If Enable Multiple Values has been selected, more than one menu item can be specified.
Color Formatting
An Enable Color Formatting option is available on selectors that use the "Checkbox" or "Dropdown" display style, and color formatting is always enabled on the "Legend" display style. When formatting colors, the system will attempt to assign colors to the individual checkboxes, dropdown menu items, or legend items based on colors assigned in connected chart or map elements.
Here's how color formatting works:
- The selector element processes color assignments from all connected chart and map elements in the order specified under Target Elements in the Connections section. Earlier connections take precedence over later ones when assigning colors.
- When series names are repeated across multiple connected elements, they are treated as a single item, and color assignment is based on connection order, meaning it is assigned from the first connected element that specifies a color.
Color assignment is based on the order that elements are connected to the selector. In this example, Chart 1 is connected first, so its color assignments take precedence. Since "Spain" is not included as a series in Chart 1, its color is assigned from Chart 2.
Advanced Logic
Selector elements can be further customized in the Advanced Logic section:
- Fallback Behavior: This option determines what happens when no selector values (e.g., checkboxes, dropdown items, or legend items) are selected by the user, or when a dropdown's placeholder value is chosen. You can choose to display either all values ("Select All") or no values ("Select None") in the connected elements.
