How to create an interactive data portal

Part 1: Google Data Studio

This tutorial will teach you how to take time-series data from many
field sites and create a shareable online map, where clicking on a field
location brings you to a page with interactive graphs. Part 1 covers
how to make interactive graphs in Google Data Studio.

How to cite:
Beganskas, S. (2020). Tutorial: How to use Google Data Studio and ArcGIS Online to create an
1 interactive data portal, HydroShare, DOI: 10.4211/hs.9edae0ef99224e0b85303c6d45797d56
 What you need to get started
Download the example dataset for this tutorial at
https://tinyurl.com/yxct25p7 or by clicking the button below:

Download dataset here

The example dataset includes minimum and maximum daily air and stream
temperatures from four creeks in southeastern Oregon, adapted from a
USGS data release: https://doi.org/10.5066/P924MOCB

This tutorial can be completed with the example dataset or with your
own data. If you are using the example data, download the files and
2 save them locally on your computer.
 What you need to get started

Whether you are working with your own data or

the example dataset, for Part 1 you will need:

1. Time-series data from multiple locations

(ExampleTimeSeriesData.xlsx)

2. A Google account

3
Step 1: Organize data in Google Sheets

Go to sheets.google.com and create a new Google Sheets document.

Click here

4
Step 1: Organize data in Google Sheets

Be sure to give the document a name

For this tutorial, you can directly copy and paste

data from ExampleTimeSeriesData.xlsx into the
new Sheets document. It is a lot of data, so it may take
a few minutes to finish after you hit paste. (If the page
becomes unresponsive, click Wait.)

Otherwise, add your own data to the Sheet.

To successfully link with Data Studio, your data need

to be organized in a specific way. The next few
slides will cover data organization.
5
Step 1: Organize data in Google Sheets

The data need to be organized in a specific way.

y-values: only one column of y-values can be

plotted at a time in Data Studio.
For this application put all y-values in a single column. However, more
advanced applications may use multiple columns of y-values.

metrics: to plot multiple curves on the graph at

once, identify each row with the metric name.
In this example, there are four metrics for daily data:
Max Water Temp, Min Water Temp, Max Air Temp, and Min Air Temp

site metrics x-values y-values

6 names
Step 1: Organize data in Google Sheets

The data need to be organized in a specific way.

x-values: each x-value needs to appear once for

each series being plotted

site names: include data for all sites together in

the same column and indicate the site name in
each row

Note: These columns can appear in any order.

Additional columns can be added as needed with
more information about the data.
site series x-values y-values
7 names
Step 1: Organize data in Google Sheets

The data need to be organized in a specific way.

Important notes:
• Only the first row can contain column headers.
• The y-value column header should be exactly as you
want the y-axis label on the plot to appear.
In the example to the right, the column header is
Temperature (°C), including the units.

• After you link this sheet to Google Data Studio, any

changes you make to the data (adding new data,
changing or deleting existing data) will automatically
be synced to the plot, however changing the
column headers will disrupt the link. site series x-values y-values
8 names
Step 2: Create a data report and link the data

Go to datastudio.google.com and create a new data report.

Click here
9 You may need to agree to Google Data Studio’s terms of service.
Step 2: Create a data report and link the data

A data source
is required.
Click here
Select Google
Sheets.

10
Step 2: Create a data report and link the data

If the name of your

Sheets document
appears in the list
of recent Sheets,
select it. Otherwise,
click Open from
Google Drive and
type the name into
the search bar.

11
Step 2: Create a data report and link the data

Ensure the box

“Use first row
as headers” is
checked. Then
click Add.

12
Step 2: Create a data report and link the data

Name the report

with your first field
site name by typing
where Untitled
Report appears.

Delete the default

table that appears
by clicking on it and
hitting delete or
backspace on your
keyboard. This will
clear space for more
interesting plots/data!
13
Step 3: Insert a time series chart

Click insert from

the menu at the
top of the screen,
then Time series.

Draw a rectangle to define the

shape/location of the chart (you
can change this later).
14
Step 3: Insert a time series chart

Whenever you
click on the chart
to select it,
a menu will
appear on the
right side of the
screen with two
tabs at the top,
DATA and STYLE.

15
Step 3: Insert a time series chart

In the DATA tab, find the Filter section near the bottom. You may need to use the
scroll wheel on your mouse (or two fingers on your trackpad) to reach it.

Click ADD A FILTER. In the Create Filter window, type the name of your first field site.
A series of drop-down menus will appear: select Include, then your site name
column header, then Equal to (=). Finally, type the name of the field site again
and click save. This creates a filter that selects only data from that field site.

16
Step 3: Insert a time series chart

Click on the chart to select it. On the right-hand menu, scroll back to
the top of the DATA tab and:
Ensure the date (x-value) column header is selected for Date
Range Dimension and Dimension.
Select the metric column header for Breakdown Dimension.
(this setting divides the data into multiple curves to plot)

Select the y-value column header for Metric.

(this setting is the value plotted for each Breakdown Dimension)

The chart
should be
looking much
better now!
17
Step 4: Spruce up the chart!

In the STYLE tab, use the scroll arrow on

the right to find different tools. Some
examples to get you started:

Change series colors by clicking on Manage

dimension value colors. One color should
appear for each metric. Click on each color to
change it.

Select how data gaps are displayed under

General

Format axes under Axes, including ticks, axis

titles, and min/max.

Change axis font size under Grid. The axis

font size setting controls the size of x and y axis
18 titles and labels.
Step 4: Spruce up the chart!

Add interactive chart options

1. Dynamic date range:

Insert -> Date range
Draw a box (or click a location) for the button to be located.

2. Dynamic metric control:

Insert -> Filter control
Draw a box (or click a location) for the button to be located

Click in the upper right corner to toggle into viewer

mode and test out the dynamic controls. When you’re done,
click to toggle back into editor mode.
19
Step 4: Spruce up the chart!

Add interactive statistics (scorecards)

Insert -> Scorecard

Draw a box (or click a location) for the scorecard.

This will calculate and display a value based on the data in

the chart.

The following slides will walk through two examples:

1. Maximum water temperature displayed.
2. Average maximum air temperature displayed.
20
Step 4: Spruce up the chart!

Example 1. Maximum water temperature displayed.

Under metric, select Temperature (°C). Then click on the small square next to
that and select Max. These selections mean that it will calculate the maximum
temperature value displayed.

Use a filter to only consider water temperatures. Click ADD A FILTER and
create a filter called Water, only including data for which the metric field
contains the term Water.

Don’t forget to add the Mine Creek (site name) filter as well.

21
Step 4: Spruce up the chart!

Example 2. Average maximum air temperature displayed.

Under metric, select Temperature (°C). Then click on the small square next to
that and select Avg. These selections mean that it will calculate the average
temperature value displayed.

Use a filter to only consider daily maximum air temperatures. Click ADD A
FILTER and create a filter called Max Air Temp, only including data for which
the metric field equals Max Air Temp.

Don’t forget to add the Mine Creek (site name) filter as well.

22
Step 4: Spruce up the chart!

Formatting interactive statistics (scorecards)

Click on the statistic to select it. In the STYLE tab:

Under Primary Metric, set the decimal precision.

Under Missing Data, select what to display when

there is no number to show.

Under Labels, format the font and alignment.

Check the box “Hide Metric Name” to add
your own label & units using Insert text.
(see next slide)
23
Step 4: Spruce up the chart!

Add text, images, and/or other design elements to the page

In the Insert menu, you can choose:

Text: Add text, such as a chart title, text

to explain the dynamic statistics, or links
to other pages
Insert a link
Image: Add a photo of the field site into text

Line, Rectangle, Circle: Add a box or line to

delineate certain text/elements from others

24
Step 4: Spruce up the chart!

Miscellaneous notes about designing a Data Studio page:

1. Control the size of the page under the LAYOUT tab (visible on
the right of the screen when nothing is selected).

2. Right-click on any item and

use the Order tool to help
you edit features.
For example, if a box is in front of text
you will not be able to edit the text.

3. Within a text box, the mouse

cannot be used to move the
cursor to a specific spot.
Instead, use the arrow keys
25 on the keyboard.
26
Step 5: Copy the Data Studio report for each site

If you want to use the same formatting and design for multiple sites, you can make a
copy of this Data Studio report.

Click File -> Make a copy…

Choose a data source for the copied report.

(It will likely be the same source as the old report.)

27
Step 5: Copy the Data Studio report for each site

1. Rename the Data Studio report.

2. Select the chart and delete the filter

for the old field site by clicking on the x.
Add a new filter with the new site name.

3. For all dynamic statistics and other chart elements, change the filter from the old
site to the new site as necessary.

4. Update any text / images / links that need to be relevant to the new site.

5. Repeat for all field sites.

28
29
30
31
32
Step 6: Share the Data Studio pages

For each Data Studio report you created: 3. Click Copy and then Save.
If you do not click Save, the sharing
1. Click Share in
settings will not take effect.
the upper right.

2. Click Manage access.

Then choose the most
appropriate sharing settings.
Check the Disable downloading…
box to prevent others from
downloading your data.
4. Share this link with others
as desired (we will use it in
Part 2 of this tutorial).
33
 Wrapping up

This tutorial just covers the basics! Google Data Studio has
many additional capabilities, and there are resources available
online for how to use specific tools not covered here.

Part 2 of this tutorial covers how to link these DataStudio

pages to an interactive map.

This project is led by Temple University and funded by the William Penn Foundation.

34