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.
