Device-specific layouts in Tableau - Dashboard Guide

Dashboard Mode - Device-specific layouts

Dashboard Goal

Understand how to create device-specific layouts in Tableau to optimize dashboard views for desktop, tablet, and phone users.

Sample Data: Sales by Region and Category

Region	Category	Sales	Profit
East	Furniture	1000	200
East	Technology	1500	300
West	Furniture	1200	250
West	Office Supplies	800	150
Central	Technology	1700	400
Central	Office Supplies	900	180
South	Furniture	1100	220
South	Technology	1300	280

Dashboard Components

• KPI Card - Total Sales: SUM([Sales]) = 9500
• KPI Card - Total Profit: SUM([Profit]) = 1980
• Bar Chart - Sales by Region: SUM([Sales]) grouped by [Region]
• Pie Chart - Sales by Category: SUM([Sales]) grouped by [Category]
• Table - Detailed Sales Data: Shows Region, Category, Sales, Profit rows

Device-specific layouts:

• Desktop Layout: Shows all components in a grid for full detail.
• Tablet Layout: Shows KPI cards and bar chart stacked vertically, hides pie chart for simplicity.
• Phone Layout: Shows only KPI cards and table with scroll, hides charts for clarity.

Dashboard Layout (ASCII Art)

+----------------------------+----------------------------+
|        KPI: Total Sales    |       KPI: Total Profit    |
+----------------------------+----------------------------+
|        Bar Chart: Sales by Region                   |
+-----------------------------------------------------+
|        Pie Chart: Sales by Category                  |
+-----------------------------------------------------+
|        Table: Detailed Sales Data                    |
+-----------------------------------------------------+


Desktop Layout: All components visible as above.

Tablet Layout:
+----------------------------+
|        KPI: Total Sales    |
+----------------------------+
|        KPI: Total Profit   |
+----------------------------+
|        Bar Chart: Sales by Region                   |
+-----------------------------------------------------+
|        Table: Detailed Sales Data                    |
+-----------------------------------------------------+

Pie Chart hidden on tablet.

Phone Layout:
+----------------------------+
|        KPI: Total Sales    |
+----------------------------+
|        KPI: Total Profit   |
+----------------------------+
|        Table: Detailed Sales Data                    |
+-----------------------------------------------------+

Bar and Pie charts hidden on phone.
  

Interactivity

Filters and device layouts interact as follows:

• Region Filter: Applies to all visible components on all devices, updating sales and profit values and charts accordingly.
• Category Filter: Applies similarly to all visible components.
• Device Layout Selector: Automatically switches layout based on device type (desktop, tablet, phone) to show/hide components for best user experience.

Self Check

If you add a filter to show only Region = East, which components update and how?

• KPI Cards: Total Sales and Profit update to sum only East region data (Sales = 2500, Profit = 500).
• Bar Chart: Shows only East region bar.
• Pie Chart: Shows sales distribution by category only for East region.
• Table: Shows only rows where Region = East.

On phone layout, only KPI cards and table update and remain visible.

Key Result

A Tableau dashboard demonstrating device-specific layouts that adapt component visibility and arrangement for desktop, tablet, and phone users using sales data.