Interactivity with Variables

Embeddable’s variables make dashboards interactive - so when you change something in one part of the dashboard, it can automatically update another.

How it works:

A user performs an action

e.g. type in a text box, click a button, or select a value from a dropdown.

A Variable gets updated

The dashboard saves what you typed or clicked inside a variable.
Some components create variables automatically when you add them to the Canvas, but you can also create variables manually.

Any connected components and datasets update too

If a variable is connected to a dataset filter, or an input within a component, it will update, causing the data to reload or the component to change in some way.

It’s like magic, but actually just smart automation behind the scenes! 🚀

Example: A simple search input

Here's how to create a simple search input that filters a dataset like so:

Add a Text Input component

Optionally, in the Text Input's Edit panel, set a placeholder text like “Type here to search.”

A "Text Value" variable is created automatically

Each time the user types, the component fires an event that updates this variable.

Connect the variable to the dataset

Open the settings of the dataset you wish to filter (in the bottom right).
Click Add filter.
Select the dimension or field you want to filter on (e.g. “Country”).
Choose “equals” or “contains” and link it to the variable by clicking the link icon on the right.

See It in Action

Switch to Preview mode by switching the preview toggle in the top menu.
Type a keyword into the text input.
Embeddable updates the variable, which automatically refreshes the dataset, showing only matching rows.
Any chart or table connected to that dataset now displays filtered data in real time!

Result: A quick, code-free search feature across your dashboard, powered by a single text input and a variable-based filter.

Example: Click a pie chart 'segment' to filter data

Here's how to filter data when a user clicks the segment of a pie chart.

Create a Variable

Since adding the pie chart doesn’t automatically generate a variable for this type of interaction, you’ll add one yourself.
Click the + icon on the right, give your variable a name (e.g. country), and select a type (simply text in this case).

Set Up the Pie Chart Interaction

Click edit on the pie chart.
Under Interactions, connect the click event to your new variable and then click Done.
Now, whenever someone clicks a slice, the chart fires an event, and Embeddable updates the country variable.

Apply the Variable to a Dataset Filter

In your dataset settings, add a new filter:
- Choose the dimension (e.g., Country) you want to match.
- Set it to “equals” (or “contains,” depending on your need).
- Link it to the country variable.
This way, the dataset only loads rows that match the user’s chosen slice.

Test the Flow

Switch to Preview mode.
Click any pie slice: country updates, causing the dataset to reload with that slice’s data.
Any chart or table using this dataset also updates automatically.

Example: Switch Date Grouping with a Granularity Picker

Here's how to let viewers toggle a chart between daily, weekly, or monthly views.

Add a Granularity Picker Component

Drop the Daterange Picker onto your canvas. You could also add the Granularity Picker.
A "granularity" variable is created automatically. Each time the user selects a granularity, it will update the granularity variable.

Link the variable to the granularity input in your chart

In your time-series chart, you'll find a granularity input.
This should already have a value selected in the dropdown (e.g. "week").
Click the link icon on the right, select your granularity variable, and click Done.

Sit back, and enjoy the ride

Switch to Preview mode and click different granularity options.
Watch your chart instantly switch between day, week, or month.

Example: Change a Pie Chart's Metrics With a Picker

You can also use dimensions and measures as variables. This is useful for components that need to filter data based on user selections, like a dropdown that lets users pick a dimension or measure to display.

In order to facilitate this behavior, we provide six predefined picker components in our starter library that can be accessed in the no-code builder. These components automatically create variables, allowing users to select dimensions or measures that can be used to filter datasets or drive other components.

Dimensions and measures as variables are powerful because they let users dynamically change the data being displayed in charts or tables without needing to write any code. This adds a significant level of interactivity to your dashboards without requiring additional code on your part.

Add a Measure Picker Component

Drop the Measures single select component onto your canvas. This will create a variable called Measure choice. You can also choose which measures you want to include from the Choices multiselect dropdown.
In the right-hand panel, you can set the default value to one of your measures (e.g. "Orders"). This will be the initial measure displayed in the pie chart.

Add a Pie Chart and Connect it to the Picker Variable

Add a Pie Chart component to your canvas.
Set your Slice value to whatever dimension you want to group by (e.g. "Country of Origin").
For the Metric, click the link icon and select the Measure choice variable you created earlier. This will allow the pie chart to dynamically change based on the user's selection in the picker.
Save your changes.

Test the Interaction

Switch to Preview mode.
Note that by default the pie chart will show the measure you set as the default in the picker (e.g. "# of Orders").
Click the dropdown in the Measure choice picker and select a different measure (e.g "# of Customers").
Watch the pie chart update to reflect the new measure, showing the number of customers by country instead of orders.

🚨

It's important to make sure that you use a picker component that matches the type of value your chart is expecting. For example, the Bar Chart's "metric" input expects an array of measures (a list of measures), as it can support displaying multiple measures at once. This means you should use the MultiSelectorMeasure component to select measures for a Bar Chart, rather than the SelectorMeasure which only allows single selections (and may cause errors).

Example: Select Bar Chart x-Axis Values With a Picker

As mentioned above, you can also use Dimensions as variables. This example shows how to use a select component to let users choose which dimension to display on the bar chart's x-axis.

Add a Dimension Picker Component

Drop the Dimensions select component onto your canvas. This will create a variable called Dimension choice. You can also choose which dimensions you want to include from the Choices multiselect dropdown.
In the right-hand panel, you can set the default value to one of your dimensions (e.g. "Country of Origin"). This will be the initial dimension displayed in the bar chart.

Add a Bar Chart and Connect it to the Picker Variable

Add a Bar Chart component to your canvas.
For the x-Axis, click the link icon and select the Dimension choice variable you created earlier. This will allow the bar chart to dynamically change based on the user's selection in the picker.
For the metric, choose a measure (e.g. "# of Orders") that you want to display.
Save your changes.

Test the Interaction

Switch to Preview mode.
Note that by default the bar chart will show the dimension you set as the default in the picker (e.g. "Country of Origin").
Click the dropdown in the Dimension choice picker and select a different dimension (e.g "Product Name").
Watch the bar chart update to reflect the new dimension, showing the number of orders by product instead of country.

Setting Default Values

You can set a default variable value that applies when the dashboard first loads. Simple:

Open the Variable Builder
- In the right-hand panel of the builder, select (or create) a variable.
Assign a Default
- In the “Value” field, pick or type the initial value (e.g., “USA” for a Country variable, or “week” for a granularity).

Passing Variables via Code

If certain values are customer-specific (like “United States” for one client and “Germany” for another), you can also provide variables programmatically when embedding the dashboard in your site. This ensures each user sees the right default context without manually picking it.

Variable types

Each variable is defined with a type - like text, time, or number. When you link a variable to an input or dataset filter, both sides must share a matching type. For instance, you can’t connect a number input to a text variable.

Note: In the future, we plan to offer more flexibility around how different types can interact.

Building dashboards Starter components