How interactivity works in Embeddable

Let's create a TextInput component that allows users to filter the chart data by what they type into the text box.

dVNKM6lgwn.gif

To use this TextInput component in our dashboard, we simply add it to our canvas.

96Sb7lqTcR.gif

Let’s first try using it to control the title of our chart. We do this by creating a variable of type Text, and then linking this variable to the title input for our chart.

PFjITtEEzO.gif

But we want our text input component to control the variable, so we add an "interaction" to our text input component, so that whenever the Change event fires (i.e. the user types something into the input box) then we update the variable.

27mNdNeB13.gif

Now when we switch to "Preview mode" and type into our box, it updates the title.

AYiMGikDGe.gif

But let's do something more interesting: let's have the variable control which data to display. Remember that our charts are populated by data from our dataset. So what we can do is apply a filter to our dataset, so that the data from the dataset is filtered by the value set to the variable.

P3BZEwkM3j.gif