Data Studio: Make interactive data visualizations

Bước 1
Go to datastudio.google.com and begin a new report by clicking the blank square with the + icon.

Bước 2
In Data Studio, visualizations are called "reports." To connect our Google Sheet to this report, select Create a New Data Source from the bottom right.

Bước 3
A menu will slide up showing the services we can pull our data from. Scroll to Google Sheets and click SELECT.

Bước 4
In the search box, you’ll see all the Google Sheet files associated with your Google Drive account. (If this is your first time using Google Data Studio, you may need to grant permission to access your Drive account.) Select the spreadsheet and its associated worksheet where the data is stored.

Bước 5
Leave all the Options boxes checked and click Connect.

Bước 1
Let’s rename the visualization. Click on the top left corner where it says Untitled report. Let's call it “Top 50 Highest Grossing Movies in the World.”

Bước 2
Under Type, change the data in row 5 from Number to Date & Time > Year (YYYY). If it's already set as Year (YYYY), leave it.

Bước 3
Select Add to Report, the blue button on the top right. Click again on the same option that will pop up.

Bước 4
Let's make the visualization 630 pixels in width and 800 pixels in height. Click anywhere and type the numbers in the Canvas Size section.

Bước 1
First, select the rectangle tool and drag the mouse cursor across the top of the canvas. Use the text tool to add a title. Use the right pane to format the text.

Bước 2
Go to Add a Chart and click Smoothed line chart.

Bước 3
Resize it to fit nicely below the title, but leave space for the next chart.

Bước 4
To change the dimension, metric and sort for the line chart, double click it. For Dimension, drag and drop Year to replace Title. Next, replace Metric with Worldwide gross.

Bước 5
Under Sort, click Worldwide gross, then click Year.

Bước 6
Change the sort option to Ascending. At the bottom you will see a section called Interactions. Select Apply filter. This will make every click on the line chart an action to filter the table.

Bước 1
Choose Add a chart > Table chart. Resize it to show the first 10 rows in the list.

Bước 2
Let’s set up this table with three metrics in this order: Year, Rank and Worldwide gross. Go to Metrics and add these fields, either by dragging from Available Fields or clicking Add metric.

Bước 3
Next, go to Style > Table Colors to change the color of the header to dark gray.

Bước 4
Go to Table Footer and uncheck Show pagination.

Bước 5
Now, you can add text citing your data source and offering instructions for using the chart. Select Text and add it to the bottom of the table.

Bước 1
To add directional text, such as “Scroll to see more!”, click Text and type your message.

Bước 2
At any time, you can preview your visualization by clicking View. To toggle back and forth between View mode and Edit mode, simply click again.

Bước 3
When you're in View mode, you can click on any point in the line and the table below will automatically display the top 50 movies from that year.

Bước 4
View mode also lets you see the complete visualization you’ve created, including the title, line chart and table chart.

Bước 1
Share this visualization the same way you'd share any other GSuite document.

Bước 2
To embed this interactive visualization on your website, click File > Embed report. Check the Enable embedding box and use the code on your page.