The show/hide buttons in containers and also in sheets allow us to create drill down functionalities in Tableau dashboards. Actually they make it simple to drill down in more ways than before.

Drill down with fixed sized containers

Here is an example. Given a simple bar chart by category.

Then with the click of a button, we can look into more details such Quarterly Profit and Regional Quarterly Sales.

In some of the earlier drill down techniques, we have to create a drill down with the same chart type or in the same hierarchy. Now we are no longer constrained by such limitations. We can display any kind of details as long as they are put in a container.

Steps to create a collapsible container:

  1. Right click the dropdown menu at top right corner of a container.
  2. Select "Add a show/hide button".
  3. This creates a floating button by default. Uncheck the floating option to make it a tiled one.
  4. Drag and place the button object right under the Category name. This requires a vertical container to contain the Category name and the button. Then this vertical container and the bar are placed in a horizontal container. (See the picture above) Check out the companion workbook for more details.
  5. Edit the button to add images (see below) for opening/closing the container.
  6. Add left paddings to the details container to shift the charts to the right, if you wish.
  7. Add Max Sales per category as a reference line to normalize all the bars.
Voila, this way we have created our first collapsible container in the dashboard. Then place two charts in the container. Click the button (When on desktop, hold Alt (Window) or Option (Mac) while clicking) to open/close the container of details.

Repeat the process for the two other categories. Then we will have a dashboard with drill down functionalities. Below is the fully extended dashboard view.

Drill down with elastic charts

Sometimes, due to filters, we may have a view of variable sizes. Here we are talking about the charts showing the details. Unfortunately, we can't use containers anymore because a container may lead to the appearance of scroll bars. So, instead of containers, we use worksheets directly, which also have Show/Hide buttons. We need to set up the elastic worksheets correctly:
  • Set the page to be Fit Width. Never select Entire View.
  • Uncheck Fix Height in the worksheet's top right corner drop-down menu.
  • Use a Vertical container for the entire dashboard instead of the default Tiled container.
  • Manually set the height of rows.
Check out the companion workbook for more details.

If you have questions, leave a comment or contact me at twitter @aleksoft



0

Add a comment

(Refresh the page if you want to view the gif image multiple times. Or go to Tableau Public and click the button at the top-right corner.)

Jake and I collaborated on a dashboard. He told me that he learnt a way to create an in-place help page in Tableau. He first saw it at a conference somewhere and couldn't recall who the speaker was. So I am blogging here about it but the credit goes to somebody else. If anyone knows who the original creator is, leave a comment below.

The key idea is to float a semi transparent worksheet on top of the dashboard, where a help text box is strategically placed on top of each chart. This way, we can explain how to view each chart and what data points are important, etc. This worksheet is collapsible by a show/hide button. 

Below I would like to show how this worksheet can be constructed.

1. Sheet with a single data mark.

  • Double click the empty space in Marks panel and add two single quotes. Make the null pill a text label. This creates a single null mark.
  • Set the view as "Entire View"

2. Create an show/hide button

  • Go to the target dashboard
  • Drag a floating vertical container to the dashboard, making it cover all the area of interest.
  • Drag the Single Null Mark sheet and drop it into the above container. Hide the sheet title.
  • Create an open/close button for the container and place the button at the top-right corner.

3. Add annotations

  • Format the sheet background opacity as 70% in the layout manager             
  • Select area annotations and place them anywhere of interest. 
  • Write help text and format it to highlight important messages.  
  • The text can serve as functional guide and/or insight guide.

Here is an example. Feel free to download the workbook and explore. Click the "i" button at the top-right corner to view the in-place help. 

0

Add a comment

Blog Archive
Loading
Dynamic Views theme. Powered by Blogger. Report Abuse.