Embedded analytics in Tableau - Dashboard Guide

Dashboard Mode - Embedded analytics

Business Question

How can we embed interactive sales analytics into a website to help users explore sales performance by region and product category?

Sample Data

Order ID	Region	Product Category	Sales	Order Date
1001	East	Furniture	250	2024-01-15
1002	West	Technology	450	2024-01-20
1003	East	Office Supplies	150	2024-02-05
1004	South	Furniture	300	2024-02-10
1005	West	Office Supplies	200	2024-03-01
1006	North	Technology	500	2024-03-15
1007	South	Technology	350	2024-03-20

Dashboard Components

• KPI Card: Total Sales - Sum of all sales.
  Formula: SUM([Sales])
  Result: 2200
• Bar Chart: Sales by Region - Shows total sales per region.
  Formula: SUM([Sales]) grouped by [Region]
  Results:
  • East: 400
  • West: 650
  • South: 650
  • North: 500
• Pie Chart: Sales by Product Category - Shows sales distribution by category.
  Formula: SUM([Sales]) grouped by [Product Category]
  Results:
  • Furniture: 550
  • Technology: 1300
  • Office Supplies: 350
• Data Table: Sales Details - Shows all orders with columns Order ID, Region, Product Category, Sales, and Order Date.

Dashboard Layout

+----------------------+-----------------------+
|      Total Sales      |    Sales by Region    |
|       (KPI Card)      |      (Bar Chart)      |
+----------------------+-----------------------+
|  Sales by Product Cat |    Sales Details      |
|      (Pie Chart)      |      (Data Table)     |
+----------------------+-----------------------+

Interactivity

The dashboard includes filters embedded in the website:

• Region Filter: Selecting a region updates the Bar Chart, Pie Chart, KPI Card, and Data Table to show only sales from that region.
• Product Category Filter: Selecting a product category updates all components to show data only for that category.
• Date Range Filter: Users can select a date range to filter orders; all components update accordingly.

These filters are embedded as interactive controls on the webpage, allowing users to explore sales data dynamically without leaving the site.

Self Check

Try this: Apply a filter for Region = East. Which components update and what changes occur?

• The KPI Card updates to show total sales for East region: 400.
• The Bar Chart highlights or filters to show only East region sales.
• The Pie Chart updates to show sales distribution by product category only for East region: Furniture (250), Office Supplies (150).
• The Data Table filters to show only orders from East region (Order IDs 1001 and 1003).

Key Result

An embedded sales analytics dashboard showing total sales, sales by region and product category, and detailed order data with interactive filters.

Practice

1. What is the main purpose of embedded analytics in Tableau?

easy

A. To display live Tableau dashboards inside other applications or websites

B. To create static images of dashboards for reports

C. To export data from Tableau to Excel

D. To design dashboards only for Tableau Desktop

Solution

1. Step 1: Understand embedded analytics concept

   Embedded analytics means putting live Tableau visuals inside other apps or websites.

2. Step 2: Identify the correct purpose

   Only To display live Tableau dashboards inside other applications or websites describes embedding live dashboards, others describe unrelated tasks.

3. Final Answer:

   To display live Tableau dashboards inside other applications or websites -> Option A

4. Quick Check:

   Embedded analytics = live dashboards inside apps [OK]

Hint: Embedded analytics means live dashboards inside other apps [OK]

Common Mistakes:

• Confusing embedded analytics with exporting data
• Thinking it creates static images only
• Assuming it only works inside Tableau Desktop

2. Which HTML tag is commonly used to embed a Tableau dashboard into a webpage?

easy

A. <embed>

B. <iframe>

C. <script>

D. <div>

Solution

1. Step 1: Recall embedding methods

   Tableau dashboards are often embedded using the <iframe> tag to load live content.

2. Step 2: Compare options

   <embed> is less common, <script> is for JavaScript code, and <div> is a container but not for embedding external content.

3. Final Answer:

   <iframe> -> Option B

4. Quick Check:

   Embedding uses iframe tag [OK]

Hint: Use <iframe> tag to embed live dashboards [OK]

Common Mistakes:

• Using <embed> which is less flexible
• Confusing <script> with embedding tag
• Thinking <div> embeds content directly

3. Given this Tableau JavaScript API snippet:

var vizDiv = document.getElementById('tableauViz');
var vizURL = 'https://public.tableau.com/views/SampleDashboard';
var options = { width: '800px', height: '600px' };
var viz = new tableau.Viz(vizDiv, vizURL, options);

What will this code do?

medium

A. Create a new Tableau workbook on the server

B. Export the dashboard as an image file

C. Embed a Tableau dashboard with 800x600 pixel size inside the element with id 'tableauViz'

D. Display an error because 'tableau.Viz' is not a valid function

Solution

1. Step 1: Understand the JavaScript API usage

   The code creates a new Tableau visualization inside the HTML element with id 'tableauViz' using the given URL and size options.

2. Step 2: Analyze the options and function

   The 'tableau.Viz' constructor embeds the dashboard with specified width and height, no export or server workbook creation occurs.

3. Final Answer:

   Embed a Tableau dashboard with 800x600 pixel size inside the element with id 'tableauViz' -> Option C

4. Quick Check:

   tableau.Viz embeds dashboard in element [OK]

Hint: tableau.Viz creates embedded dashboard in specified element [OK]

Common Mistakes:

• Thinking it exports or creates new workbooks
• Assuming 'tableau.Viz' is invalid
• Ignoring the size options

4. You embedded a Tableau dashboard using an iframe, but it does not resize properly on mobile devices. What is the most likely cause?

medium

A. The iframe lacks responsive design settings like width in % or viewport meta tag

B. The Tableau dashboard URL is incorrect

C. The iframe tag is missing the src attribute

D. The Tableau JavaScript API is not loaded

Solution

1. Step 1: Identify responsive design issue

   Improper resizing on mobile usually happens when iframe uses fixed pixel width instead of relative units or lacks viewport meta tag.

2. Step 2: Eliminate other causes

   Incorrect URL or missing src would prevent loading, not just resizing; missing API affects JS embedding, not iframe resizing.

3. Final Answer:

   The iframe lacks responsive design settings like width in % or viewport meta tag -> Option A

4. Quick Check:

   Responsive iframe needs relative width and viewport tag [OK]

Hint: Use % width and viewport meta for responsive iframes [OK]

Common Mistakes:

• Blaming URL or src attribute for resizing issues
• Confusing iframe with JavaScript API embedding
• Ignoring responsive design principles

5. You want to embed a Tableau dashboard in your company portal and ensure it is accessible to screen readers and keyboard users. Which approach best supports accessibility?

hard

A. Export the dashboard as a PDF and upload it to the portal

B. Embed the dashboard using a simple iframe without any additional attributes

C. Use an image snapshot of the dashboard with alt text

D. Use Tableau JavaScript API to embed the dashboard and add ARIA labels and keyboard navigation support

Solution

1. Step 1: Understand accessibility needs

   Screen readers and keyboard users require semantic markup and ARIA labels, which simple iframes or images lack.

2. Step 2: Choose embedding method supporting accessibility

   The Tableau JavaScript API allows adding ARIA attributes and keyboard controls, improving accessibility over static or iframe embeds.

3. Final Answer:

   Use Tableau JavaScript API to embed the dashboard and add ARIA labels and keyboard navigation support -> Option D

4. Quick Check:

   JS API + ARIA = better accessibility [OK]

Hint: Use JS API with ARIA labels for accessible embeds [OK]

Common Mistakes:

• Assuming iframe alone is accessible
• Using static images or PDFs instead of live dashboards
• Ignoring keyboard navigation needs