Data + Science

9/7/2016
Changing the Style in the new Tableau 10 Embed Code

Last year I blogged about Using HTML Style Object Properties with Embedded Tableau Visualizations. I used this technique to style a Tableau viz in various forms; round containers, borders, shadows, oval shapes, rotation and even making tiny versions of the viz. There's nothing new about these stlying features, but as part of Tableau 10, you might have noticed that the embed code has been changed a bit and applying these stlyes is now even easier.

Step 1 - Copy the Tableau embed code

Any Viz on Tableau Public or Tableau Server gives the user the ability to get embed code. Select "Share" and there are two options "Embed Code" and "Link".

Don't be afraid of the code. This is simply a copy and paste operation. Copy the text from the "Embed Code" box.

 
<div class='tableauPlaceholder' id='viz1473257834959' style='position: relative'><noscript><a href='#'><img alt=' ' src='http://public.tableau.com/static/images/Ta/TableauStockPrice/TableauStockPrice/1_rss.png' style='border: none' /></a></noscript><object class='tableauViz'  style='display:none;'><param name='host_url' value='http%3A%2F%2Fpublic.tableau.com%2F' /> <param name='site_root' value='' /><param name='name' value='TableauStockPrice/TableauStockPrice' /><param name='tabs' value='no' /><param name='toolbar' value='yes' /><param name='static_image' value='http://public.tableau.com/static/images/Ta/TableauStockPrice/TableauStockPrice/1.png' /> <param name='animate_transition' value='yes' /><param name='display_static_image' value='yes' /><param name='display_spinner' value='yes' /><param name='display_overlay' value='yes' /><param name='display_count' value='yes' /></object></div>                <script type='text/javascript'>                    var divElement = document.getElementById('viz1473257834959');                    var vizElement = divElement.getElementsByTagName('object')[0];                    vizElement.style.width='1004px';vizElement.style.height='669px';                    var scriptElement = document.createElement('script');                    scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';                    vizElement.parentNode.insertBefore(scriptElement, vizElement);                </script>

Step 2 - Modify the STYLE tag:

This code above is used by many to embed their Tableau visualizations on the web or in a blog. However, we are going to make a few minor adjustments. Copy the code into a simple text editor. The portion of the embed code that we are going to modify is the first STYLE tag, where is shows style='position: relative'.

A few examples of what can be added to the STYLE tag:

     width: 1004px; height: 669px;
     background: #FAF4E7;
     border:3px solid #25A1E0;
     border-radius: 25px;
     box-shadow: 18px 24px 35px #919191;
     transform: scale(.5,.5);
     transform: rotate(7deg);
     transform: rotate3d(1,1,1,30deg);
     border-radius: 50%;

Here is an example:
Original embed code: style='position: relative'
Modified embed code: style='width: 1004px; height: 669px; background: #FAF4E7; border:3px solid #25A1E0; border-radius: 25px; box-shadow: 18px 24px 35px #919191;'

This is step by step what I modified in the embed code from the original style tag.

1.) The width and height are set to match the viz. You can find this at the end of the embed code, example vizElement.style.width='1004px';vizElement.style.height='669px'; Just use the same height and width or adjust as you need.
NOTE - removing the Tableau border on the bottom is frowned upon by Tableau.
2.) I added a border around the viz, a solid border of 3 pixels and the hex color code. border:3px solid #25A1E0;
3.) I created a rounded edge for the border using border-radius: 25px;
4.) I added a drop shadow, specifying how much and the color using box-shadow: 18px 24px 35px #919191;

Step 3 - Embed the viz on your blog or webpage:

Copy the final code from your text editor to your blog or wrap it in an HTML tag and publish as an HTML page. The embedded viz now has a sleek rounded blue border and a little drop shadow. Everything else in the viz functions as any Tableau viz would.

This is just one example of how you can embed a visualization with different style options.

Alternative Approach - Embed in an iframe:

 
<html>
<center>
<iframe src="http://public.tableau.com/views/TableauStockPrice/TableauStockPrice?:embed=y&:display_count=yes&:showTabs=n&:showVizHome=no"  style='width: 1004px; height: 670px; background: #FAF4E7; border:8px solid #25A1E0; border-radius: 15px; box-shadow: 18px 24px 35px #919191;'>
</iframe>
</center>
</html>

In this case, we use the same style methods but apply the formatting to the iframe. The structure for the link is as follows (simply insert the name of your viz and the sheet):
http://public.tableau.com/views/[vizname]/[sheetname]?:embed=y&:display_count=yes&:showTabs=y&:showVizHome=no

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

Jeffrey A. Shaffer
Follow on Twitter @HighVizAbility