WorkoutWednesday S02 E51 – Container Fun!

#WorkoutWednesday Week 51 was one of my favorite so far because layout containers are one of the most important aspects of dashboarding. Having a good understanding of them can enable you to increase the speed and efficiency of your dashboarding process, but also help you overcome visual design challenges that help improve the user experience. Special thanks to Rody Zakovich for his great WW challenge . As you all know by this time, Workout Wednesday is a set of weekly challenges from Rody Zakovich, Luke Stanke, Ann Jackson, Curtis Harris, and a host of guests (Rosario, Donna and Sean) designed to test your knowledge of Tableau and help you kick-start your development. The idea is to replicate the challenge as closely as possible without even seeing the solution.

When you think you have it, leave a comment with a link to your visualization and post a pic on Twitter for others to enjoy.

2017 WorkoutWednesday Challenge: Link

2018 WorkoutWednesday Challenge: Link


Before starting this Workoutwednesday , I would like you to understand how should we design the layout of the overall dashboard?

  • Put the most important view at the top, normally the most important findings from your analysis
  • Structure the interactivity from top to bottom or from left to right
  • Limit the number of views on one dashboard to three or four, if possible
  • Try not to use multiple color themes
  • Try to put filters together
  • If you have one legend for multiple views, put it close to those views
  • Make sure the size for your view is right

Step 1:

#WW 51 challenge is all about working with the containers, and matching the design given by Rody. Before we deep dive into the dashboard creation, look at the existing dashboard by clicking on the image available on WW page and try to figure out the basics of layout.

Step 2:

I followed a wireframe technique and used excel for creating one. Think of wireframe as the skeleton. They loosely shape the final product, giving you a reliable idea of where everything will eventually go. As you can see in the picture below, it is a low-fidelity, simplified outline of your final output. You can usually recognize them by their distinctive block layouts. It usually contains “infographics/icons” that represent charts and “Texts” Placeholders

Step 3:

Let’s break the dashboard design and think how we should use layout containers. A “Layout container” is a type of object. It helps to organize worksheets and other objects on the dashboard. Layout containers usually create an area in the dashboard sheet where views or objects automatically adjust their size and position based on other views or objects in the dashboard. In simple words, it allows you to group objects horizontally or vertically within the dashboard workspace

You can organize your dashboard in several ways to tell a story or highlight/emphasize information. Tableau provides two types of layouts:

• Tiled

• Floating

You can toggle to select whether new objects will be added as Tiled or Floating. Tiled objects will snap into a tiled layout next to other tiled objects or within layout containers.For particularly this challenge , we will only be using Tiled layouts. “No Floating” Layout at all.

Step 4:

Examine the Layout section of the tableau dashboard window and outline the layout container hierarchy accordingly.Below screenshots gives you an ideahow many layout containers there are, whether they are horizontal or vertical, and what dashboard elements are contained within them.

Layout Container 01
Layout Container 02
Layout Container 03
Layout Container 04
Layout Container 05

Step 5:

Start your dashboard design by following the above mentioned steps (Mostly the screenshots). You can add your own layout containers to your dashboard by dragging them from the left side of the screen to the dashboard. Choose a horizontal or vertical container, depending on whether you want worksheet widths or heights to automatically resize, respectively.

Horizontal: The Horizontal object adds a horizontal layout container. This container will accommodate all the views or objects horizontally. Further, the widths of these views or objects will be automatically adjusted to equally fill the width of the container.
Vertical: The Vertical object adds a vertical layout container. This container will accommodate all the views or objects vertically. Further, the heights of these views or objects will be automatically adjusted to equally fill the height of the container.

Look carefully, when you drag worksheets into the just-added containers —a thin blue outline around an existing container indicates that a worksheet will be dropped in that container.

If you noticed carefully, the Pane under the Title has a grey border and we will be using text object for creating the same.Under Objects, drag “TEXT” and place it underneath the title.

Step 6:
We will create three separate sheets based on our requirement
6.1 KPI’s – Select important KPI’s and represent them in the form of BAN’s
6.2 Year Over Year Sales Performance
6.3 Year Over Year Profit Growth

Yearly Sales Growth

Similarly, create other area chart that represents Profit Growth.

Step 7:

Drag the KPI’s,Sales Performance and Profit Performance worksheets and place it on the vertical layout container. By default, it will occupy all the space in that layout container.Remember When a worksheet is first added to a dashboard, any legends, filters, or parameters that were visible in the worksheet view will be added to the dashboard. If you wish to add them in at a later point, select the sheet in the dashboard and click on the little drop-down caret in the upper-right corner.Nearly every object has a drop-down caret providing many options for fine tuning the appearance and controlling the behavior.This is how my Layout looks like.

Step 8:

Once you are done, you should get the following looking worksheet. Your Final dashboard will look like the below image and dont forget to post a pic on Twitter for others to enjoy.
If you have any questions please do not hesitate to contact me on twitter (@rajvivan) or LinkedIn (@rajvivan)

Related Posts


About the Author: Rajeev Pandey

I am a multidisciplinary designer working in data visualization, interaction design and innovation. Expertise in developing Tableau, Web focus based visualization and reporting applications. I have a passion for analyzing, dissecting, and manipulating data sets as well as, building beautiful dashboard. Naturally talented in communicating between technology and business needs. Diverse and experienced in plenty of different domains .I am quick learner who can absorb new ideas and can communicate clearly and effectively.I love creativity and enjoy experimenting with various technologies.

Leave a comment

You must be logged into post a comment.