ArticlesBlog

Community Visualizations: Messages and data updates from Data Studio

Community Visualizations: Messages and data updates from Data Studio


[MUSIC PLAYING] YULAN LIN: Hi. My name is Yulan Lin, and
I’m a developer advocate for Data Studio. In this video,
we’re going to talk about when Data
Studio sends updated messages to your
community visualization. First, let’s remind
ourselves what community visualizations are. To load a community
visualization, you click on this
icon and you can either add a featured
visualization or add one by ID. Here, I’m adding a bar
chart that I filled. A couple things to note here. I’ve chosen which community
visualization I want. Data Studio requests
and loads the code, and then it preloads the
data from my data source with a dimension and a
metric because that’s what I’ve defined in my config. And it also provides
some default styling. Just like any other
chart, I’m able to change the data I choose to
visualize, or the styling, or even resize it. All of these cause data
changes or message updates that my visualization code
needs to be able to handle. So let’s take a look
at the situations where my visualization code
needs to handle message updates from Data Studio. What causes a data
update from Data Studio? So data changes, if I’ve
selected different data, or even maybe switched
out the data source. Style changes. So if I were to look
at that bar chart and decide that I wanted the
bars to be orange instead of black, my
visualization code would need to be able to handle that. Component resize. If my visualization was
made larger or smaller to fit my dashboard,
the component needs to know so that it
can scale the visualization, it can scale the
chart appropriately. And finally, if interactions
are enabled or disabled. So if you go here, you can
choose to apply filter or not, and when the visualization
is acting as a filter, Data Studio also
sends information about exactly how
your visualization is acting as a filter. And all of this is information
that your visualization code needs to be able to handle. What does that look
like in the code? A typical community
visualization is written as a callback. We have this function
dscc.subscribeToData(drawViz), and you define this function
(drawViz) which is called when Data Studio updates your
visualization with new data. When one of those
four conditions is met, something
changes, Data Studio sends an updated message. Your code needs to decide
how to handle that. And so maybe this is
where I would say, oh, we changed the data, so the
chart should look different. Or, oh, the user selected a
different color for the bar. Maybe I should
re-render the chart. All those decisions
and logic should be handled in your visualization. So in summary, there
are four situations where Data Studio
will send an updated message to your
community visualization. Data updates, style
updates, resizes, and interaction
updates, and your code should be able to handle
all of those situations. Thanks for watching, and keep
building cool visualizations. If you want to learn more,
review the documentation at developers.googl
e.com/datastudio/visualization and share what you build
with us using the hashtag #DataStudioDevs.

Comments (3)

  1. Traduçao em portugues

  2. Good Presentation.

  3. Hello

    I am trying to calculate an indicator in Data Studio called WMape = (Abs (Sale-Forcast)) (Sale / Sum (Sale)). The problem I have is to want to dynamically weigh the calculation. This weighted is based on the sale. Anyone who can help me with this calculation please !?

    Thank you!

Comment here