Embedded analytics in Tableau - Real Business Scenario

Scenario Mode

👤 Your Role: You are a business intelligence analyst at an e-commerce company.

📋 Request: Your manager wants you to create an interactive sales dashboard that can be embedded into the company's internal website. The dashboard should show monthly sales trends, top product categories, and regional sales performance.

📊 Data: You have sales data including Order Date, Sales Amount, Product Category, and Region for the past year.

🎯 Deliverable: An embedded Tableau dashboard with interactive filters for month, category, and region, ready to be integrated into the internal website.

Sample Data

Order Date	Sales Amount	Product Category	Region
2023-01-15	250	Electronics	North
2023-01-20	150	Clothing	East
2023-02-05	300	Electronics	South
2023-02-18	200	Home	West
2023-03-10	400	Clothing	North
2023-03-15	350	Electronics	East
2023-04-01	500	Home	South
2023-04-12	450	Clothing	West
2023-05-05	600	Electronics	North
2023-05-20	550	Home	East
2023-06-15	700	Clothing	South
2023-06-25	650	Electronics	West

1

Step 1: Connect Tableau to the sales data source containing Order Date, Sales Amount, Product Category, and Region.

Use Tableau's 'Connect' feature to import the data table.

Expected Result

Data is loaded and visible in Tableau's data pane.

2

Step 2: Create a calculated field 'Order Month' to extract the month and year from Order Date for monthly trend analysis.

STR(YEAR([Order Date])) + "-" + RIGHT("0" + STR(MONTH([Order Date])), 2)

Expected Result

A new field 'Order Month' showing values like '2023-01', '2023-02', etc.

3

Step 3: Build a line chart showing total Sales Amount by Order Month to visualize monthly sales trends.

Rows: SUM([Sales Amount]), Columns: [Order Month], Mark type: Line

Expected Result

Line chart displays sales trend over months.

4

Step 4: Create a bar chart showing total Sales Amount by Product Category to identify top categories.

Rows: SUM([Sales Amount]), Columns: [Product Category], Mark type: Bar

Expected Result

Bar chart shows sales amounts per product category.

5

Step 5: Create a map or filled map showing total Sales Amount by Region to analyze regional performance.

Use [Region] as geographic role, SUM([Sales Amount]) as size/color

Expected Result

Map visualizes sales distribution across regions.

6

Step 6: Add interactive filters for Order Month, Product Category, and Region to the dashboard.

Add filter controls for [Order Month], [Product Category], and [Region] with multi-select enabled.

Expected Result

Users can filter dashboard views by month, category, and region.

7

Step 7: Arrange the line chart, bar chart, and map on a single dashboard with clear titles and legends.

Use Tableau dashboard layout to place charts side by side or stacked with descriptive titles.

Expected Result

Dashboard is visually clear and easy to navigate.

8

Step 8: Publish the dashboard to Tableau Server or Tableau Online and generate the embed code snippet.

Use 'Share' > 'Embed Code' option to get iframe code for embedding.

Expected Result

Embed code is ready to be inserted into the internal website.

9

Step 9: Test the embedded dashboard on the internal website to ensure interactivity and responsiveness.

Insert iframe embed code into a test webpage and verify filters and visuals work.

Expected Result

Dashboard loads correctly with full interactivity inside the website.

Final Result

North

↓

East

↓

South

↓

West

✓Sales generally increase from January to June with some fluctuations.

✓Electronics and Clothing are the top product categories by sales.

✓Sales are fairly balanced across all regions with South slightly leading.

Bonus Challenge

Add a dynamic tooltip that shows the percentage contribution of each product category to total sales when hovering over the bar chart.

Show Hint

Create a calculated field for percentage: SUM([Sales Amount]) / TOTAL(SUM([Sales Amount])) and add it to the tooltip.

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