Data + Science

6/11/2015
Using HTML Style Object Properties with Embedded Tableau Visualizations

I recently presented at the Analytics Summit at the University of Cincinnati Center for Business Analytics. As part of my presentation, I mentioned the human appeal of round edges in design. This can be seen in the design of our smart phones, tablets, furniture and in many architectural elements. This got me thinking about Tableau Public visualizations and how they are styled when they are embedded in web pages. The options for styling the parameters in the Tableau embed code is very limited. However, it is possible to add additional styling to the visualization with the HTML Style Object Properties using CSS or a little bit of Javascript. The viz above loads using a rounded border set in the CSS and the buttons utilize Javascript to make changes to the viz styling on the fly.

Here's the basic setup:

First, when copying and pasting your Tableau Public Embed code, add an "id=tabCon" in the first div tag.

Example:

<div id='tabCon' class='tableauPlaceholder'...>

To control the styling in the CSS, add the properties to your stylesheet.

Example:

#tabCon {
    border-radius: 25px; /* creates a rounded edge */
    background: #FFF8D6; /* changes the background color of the container */
	border: 2px solid #4f6e8d; /* adds a solid border with a defined color */
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

To control the styling using Javascript, add the properties in your HTML document with the Tableau Public embed code.

Example:

<script>
function ResetFunction() {
	document.getElementById("tabCon").style.backgroundColor = "#FFF8D6";
	document.getElementById("tabCon").style.borderRadius = "25px";
	document.getElementById("tabCon").style.border = "2px solid #4f6e8d";
	document.getElementById("tabCon").style.transform = "rotate(0deg)";
	document.getElementById("tabCon").style.boxShadow ='0px 0px 0px'
}
function SquareFunction() {
	document.getElementById("tabCon").style.borderRadius = "0px";
}
function RoundFunction() {
	document.getElementById("tabCon").style.borderRadius = "25px";
}
function ReallyRoundFunction() {
	document.getElementById("tabCon").style.borderRadius = "50px";
}
function ColorFunction() {
	document.getElementById("tabCon").style.backgroundColor = "lightblue";
}
function RemoveBorderFunction() {
	document.getElementById("tabCon").style.border = "0px";
}
function ShadowFunction() {
	document.getElementById("tabCon").style.boxShadow ='18px 24px 35px #919191';
}
function RotateFunction() {
	document.getElementById("tabCon").style.transform = "rotate(7deg)";
}
function ShrinkFunction() {
	document.getElementById("tabCon").style.transform = "scale(.5,.5)";
}
function ThreeDFunction() {
	document.getElementById("tabCon").style.transform = "rotate3d(1,1,1,30deg)";
}
function OvalFunction() {
	document.getElementById("tabCon").style.borderRadius = "50%";
}
</script>

Add buttons on the HTML form to dynamically control the properties or just use the function in the HTML. In the example below, I also use class="button" to format the buttons from the CSS. There is a great tool here that will help create custom buttons and create the CSS code.

Example using buttons to call each of the functions:

<center>
<a name="button1">
<br>
<button class="button" type="button" onclick="ResetFunction()">Reset</button>
<button class="button" type="button" onclick="SquareFunction()">Square Container</button>
<button class="button" type="button" onclick="RoundFunction()">Round Container</button>
<button class="button" type="button" onclick="ReallyRoundFunction()">Really Round Container</button>
<button class="button" type="button" onclick="ColorFunction()">Color Outside Container</button>
<button class="button" type="button" onclick="RemoveBorderFunction()">Remove Border</button>
<button class="button" type="button" onclick="ShadowFunction()">Shadow</button>
<button class="button" type="button" onclick="RotateFunction()">Rotate</button>
<button class="button" type="button" onclick="ShrinkFunction()">Shrink</button>
<button class="button" type="button" onclick="OvalFunction()">Oval</button>
<button class="button" type="button" onclick="ThreeDFunction()">3D Rotate</button>
</a>
</center>

To call a function directly, simple use the name of the function. Example, RoundFunction().

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

Jeffrey A. Shaffer
Follow on Twitter @HighVizAbility