Home | About | Services | Contact | Insights
7/7/2015 (unedited)
Embedding Multiple Containers with Embedded Tableau Visualizations


Last month I posted instructions on Using HTML Style Object Properties with Embedded Tableau Visualizations. In this post, I use the same technique, but I put one container on top of another container.

Here's the basic setup:

First, we need to know the size of the Tableau Public Viz. We get this from the embed code. In my example above, the embed code under "Share" shows the following line of code.

Example:


Embed the entire embed code as you would normally. We will then add another embed code before the Tableau embed code. This will be another container with an image inside. For this container, use the same dimensions for width and height as the Tableau container, but add "position: relative; top: 10px;" to the style. Insert the link to the image you wish to embed in the "src=" and add the width and height for the image. In my example I made the image fit the entire Tableau viz. Also add id="tabcon2". This is used in the CSS to manage the container styles.

Example embed code for bottom container:


Next we need to modify the Tableau embed code. The idea is to move the container up and on top of the image container. To do this we will change this to an absolute position and apply a negative top position to move it up and on top of the first container. We also add the id="tabCon". Again, this is necessary to control it via CSS.

Example of the Tableau embed code modified:


The last step is to adjust the tabCon and tabCon2 containers in the CSS file. The key here is to make the top container, tabCon, 50% transparent. We do this by adding "opacity: 0.5;". Then we can see the bottom container, the image, through the top container.

Here is the example code for the CSS file:


The end result should be the Tableau Public Viz overlaid on top of another container with an image. In addition to an image, this can also be done with one Tableau Viz on top of another Tableau Viz. However, keep in mind that the top viz needs to be somewhat transparent so that you can see the bottom container and the bottom container will not allow any interaction, for example clicking, highlighting or tooltips. This is because the Tableau viz on top will be covering anything underneath it.

We can combine this double container with last month's post, using the HTML style object properties to style the top container. Here's an example of what that might look like.

Here is an example of placing one Tableau viz on top of another.

WARNING - Be careful using this technique. This effect could create problems with your visualizations, making it hard for the reader to see the visualization or distracting the reader from the data. For example, in the viz above, the bar charts are difficult to read with the busy image in the background and the opacity of the bars. This technique will require the right kind of balance and use case to be useful in practice.

I hope you find this technique interesting. If you have any questions feel free to email me at Jeff@DataPlusScience.com

Jeffrey A. Shaffer
Follow on Twitter @HighVizAbility