Building a Charts Dashboard – Apps Script Tutorial

Building a Charts Dashboard – Apps Script Tutorial


ERIC KOLEDA: Hello
and welcome. I’m Eric Koleda, and today,
we’re going to be doing an Apps Script tutorial walk
through for the tutorial Building a Charts Dashboard. If you want to follow along
and you’re watching on YouTube, click the link below
and you can go at your own pace along with us. So charts dashboards are a way
to have multiple charts tied together on the same
data source. And Google Apps Script allows
you to build and serve these quite easily. So let’s get started. The first thing we’re going
to need to do is create a new script. To do that, we’ll visit
script.google.com. And if it’s your first time
visiting this URL, you’re going to be presented
with a little interstitial welcome page. Just click through to
start scripting and you’ll be right here. So the tutorial breaks
the script out in the different pieces. And we’re just going to compile
those together. Or if you want, you can take the
whole script, which is at the end of the tutorial. So the first bit here is about
creating the data source. Any chart is going to need
to have some data. And in a charts dashboard, all
of the charts share the same data source. In this case, we’re just hand
building this data out of an array of names and genders
and some other data. But we can also get this data
from a spreadsheet or any other data source you have. Next up, it’s around creating
the actual charts and controls objects. Controls are the little widgets
that allow you to adjust the dashboard. And then there’s the chart
itself, which, in this case, is a pie chart and
a table chart. The next little bit of code
here, if we move on, is actually binding it
all together. So we’re going to copy
and paste this. Charts in a dashboard all need
to be bound together to the same data source. And there’s just a little bit
of configuration to do that. Lastly, we need to actually
create the UI app that’s going to serve this charts dashboard
and then return that as a result of this doGet method,
which is how you build a web app in Apps Script. So with all of this code
pasted in, we’re now ready to go. So I’m going to save my code. And I need to give my
project a name. So I’m going to call
it Dashboard. And now, we need to publish
this as a web app. So in the documentation here for
this tutorial, we link you off to the guide on how to do
publishing of a web app. But we can just follow along
and do it right now. Before you actually publish your
web app, you need to give a version to your script. This helps you ensure that
whoever uses your script is using the stable version that
you meant for them to use. So I’ll just create– First version is the
label I’m going to give to this new version. Now that that’s done, we can
actually deploy this web app. We pick the version 1. We choose who it runs as, which
in this case, is going to be me, and then who has
access to it, and I’ll say, for right now, just myself. And here’s the URL of your
published web app. If we paste that into a new
window, we’ll see that here is our finished charts dashboard. So we have the same data set
being displayed in both the pie chart and the table chart. And using the controls
above, we can actually do some filtering. So for instance, if we want to
take out the people who are older in age, we can
drag this down. And you’ll see that both
of the charts updated automatically. Likewise, we can filter by
gender using this gender toggle for just the female– and we can X that out– or just the male viewers. We hope you enjoyed
this tutorial. If you want to learn more
about charts dashboards, there’s more information on our
developer documentation. And come back for
other tutorial walkthroughs in the future. Thank you and goodbye.

3 thoughts on “Building a Charts Dashboard – Apps Script Tutorial

  1. @Google Developers  I believe UiApp  is deprecated. Can you please share the same example with HTML service ?

Leave a Reply

Your email address will not be published. Required fields are marked *