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.

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