Embedded analytics in Tableau - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to embed a Tableau dashboard using the JavaScript API.

Tableau

var viz = new tableau.Viz(document.getElementById('vizContainer'), '[1]');

Drag options to blanks, or click blank then click option'

A'https://example.com/image.png'

B'https://google.com'

C'https://public.tableau.com/views/SampleDashboard'

D'https://myserver.com/dashboard'

Attempts:

3 left

💡 Hint

Common Mistakes

Using a non-Tableau URL like a website or image link.

The URL must point to the Tableau dashboard to embed, so the server dashboard URL is correct.

2fill in blank

medium

Complete the code to set the width of the embedded Tableau viz to 800 pixels.

Tableau

var options = { width: [1] };

Drag options to blanks, or click blank then click option'

A800

B'800px'

C'800'

Dwidth: 800

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string with 'px' instead of a number.

The width option expects a number, not a string with 'px'.

3fill in blank

hard

Fix the error in the code to correctly apply a filter to the embedded Tableau viz.

Tableau

viz.getWorkbook().[1]('Region', ['West'], tableau.FilterUpdateType.REPLACE);

Drag options to blanks, or click blank then click option'

AapplyFilter

BapplyFilterAsync

CsetFilter

DfilterAsync

Attempts:

3 left

💡 Hint

Common Mistakes

Using synchronous or incorrect method names.

The correct method to apply a filter asynchronously is applyFilterAsync.

4fill in blank

hard

Fill both blanks to initialize the Tableau viz with options to hide tabs and set height to 600.

Tableau

var options = { [1]: true, [2]: 600 };

Drag options to blanks, or click blank then click option'

AhideTabs

BshowTabs

Cheight

Dwidth

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing 'showTabs' with 'hideTabs'.

Using strings instead of numbers for height.

Use hideTabs set to true to hide tabs, and height to set the viz height.

5fill in blank

hard

Fill both blanks to listen for the 'FIRSTINTERACTIVE' event and log a message.

Tableau

viz.addEventListener(tableau.TableauEventName.[1], function() { console.[2]('Dashboard is ready'); });

Drag options to blanks, or click blank then click option'

AFIRSTINTERACTIVE

Blog

Cerror

Dready

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong event names or console methods.

The event name is FIRSTINTERACTIVE and the console method to print is log.