[MUSIC PLAYING]
YULAN LIN: Hello, my name is Yulan Lin,
and I'm a Developer Advocate for Data Studio.
Today I'm going to tell you how to use your community
visualization as a chart interaction filter.
Let's first take a look at Data Studio
and what chart interactions look like without community
visualizations.
So when we're looking at the Data Studio UI--
here I have a pie chart configured--
and I click on a slice, it can filter
the rest of the dashboard.
Now you can actually do the same thing
with a community visualization.
Here we're looking at a bar chart community visualization
that I've built. And if I click on the bar,
it provides this kind of red highlight
and filters the rest of my dashboard.
So how do we configure that in community visualizations?
To make a community viz act as a chart filter,
you have to do two things.
One, you have to add it to your visualization config.
Two is you have to write code for the visualization
to tell Data Studio, hey, apply the filter.
And these are the parameters with which you're
going to apply the filter.
Let's go through these in a little bit more detail.
So in your viz config, there's already
two keys that you're probably familiar with,
the data key and the style key.
Now let's add a third one, interactions,
where you configure the interactions
for your visualization.
In this case, we care about your visualization
acting as a chart filter.
So you're going to provide an ID.
Here I've called it "onClick," but that ID can really
be anything as long as you remember it.
Because we're going to be using it in the code
that we write later.
The other thing you need to consider
is the supported actions key.
That's an array.
And in that array, we're actually
going to put "FILTER" in all caps,
because we want the visualization to be
able to act as a filter.
What does it look like to write code
to tell Data Studio to apply a filter?
Let's say I have a bar chart-- and this
is number of books by language-- and the user has
selected the bar that corresponds to Spanish language
books.
So that user's clicked on a bar.
The visualization has to figure out, well,
which dimension value is associated
with this bar in the bar chart?
And then it has to send a message to Data Studio to say,
I want to filter the rest of the dashboard by this filter,
language equals Spanish.
And so to ask Data Studio to apply a filter,
this is the code that you need to understand.
There's this interaction data object.
And then you say, dscc, which is the helper library
that we've built, send interaction, action ID, filter,
and interaction data.
I'll leave you to review the documentation
to understand action ID and filter,
but I do want to spend some time on interaction data,
because those are the parameters that
dictate how Data Studio will filter
the rest of your dashboard.
Interaction data has two keys--
concepts, which is an array of dimension IDs, and values,
which is an array of values--
or actually, an array of array of values--
that, together, tell Data Studio what
the parameters on applying that filter look like.
To make this more concrete, let's take a look
at that bar chart again.
In the case where I'm clicking on one bar,
my interaction's going to look like concepts.
I'm going to say "languageDimensionId,"
which is the field ID associated with the dimension
I care about--
in this case, language--
and then "values."
In this case, it's Spanish.
And that's the interaction data I'm
going to send to Data Studio to tell Data Studio,
hey, I'm going to filter just by Spanish language books,
or I'm going to filter by both Spanish and English language
books, and change the rest of the dashboard.
So to understand this a little bit more,
let's actually translate that same interaction data object
into an approximate SQL query.
So that interaction data object where I'm selecting only
by Spanish language books looks something like SELECT data
WHERE languageDimensionId is Spanish, all right?
And that's basically what you're telling Data Studio when
you send that interaction data object so that it can filter
the rest of the dashboard.
What about a more complicated filter interaction?
In this case, I have a filter that I
want to apply on a heat map.
And so this heat map has two dimensions and one metric.
I have day of week and time of day.
And I've clicked on Friday afternoon and Monday evening.
And so my concepts, my two dimensions,
are dayOfWeekId and timeOfDayId.
And the values, well, I've clicked on Monday evening,
so I have this first array that corresponds to Monday evening.
And then I've also clicked on Friday afternoon.
So I have this second value, or second array,
that corresponds to Friday afternoon.
And this is the object I send to Data Studio
to tell it to apply a filter so that, if I were
to go back to Data Studio and pull up that heat map,
and I click on--
I think I said--
Monday morning and Friday afternoon,
that's the kind of query or filter
that I'm telling Data Studio to use.
Again, let's look at the approximate SQL,
because I find that really helpful for understanding
what's going on.
The approximate SQL translation of this particular data object
is to SELECT data WHERE the dayOfWeekId is Monday
and the timeOfDayId is evening OR the dayOfWeekId is Friday
and the timeOfDayId is afternoon.
Essentially, I'm saying select all the data corresponding
to Monday evening or Friday afternoon.
So in summary, there's two things
you need to do to configure your community visualization to work
as a chart filter.
One is you need to add interactions
to your visualization config.
Two is you need to write code for the visualization
to tell Data Studio, you should apply a filter.
And not only should you apply a filter,
here are the parameters with which you're going to do so.
I've just shown you how to write code
to make your community visualization act as a chart
interaction filter.
To learn more, you should review the library reference
on our developer documentation as well as
the interactions guide.
[MUSIC PLAYING]
So you should go to developers.googl
e.com/datastudio/visualization, share it on social media using
the hashtag #datastudiodevs, or submit to our showcase.