A fairly common request is being able to have Tableau dashboards up on a TV. A slightly less common, but still useful request is to have those dashboards either refresh periodically/refresh automatically, or rotate to an entirely new dashboard. This post will provide one simple approach to doing the latter! Let’s dive in.
Here is what we are going after: http://tableauit.s3-website-us-west-2.amazonaws.com/
The first thing to do is grab the URL’s of all the dashboards you need. They can be found in the “share” section of the viz. For more advanced users familiar with our REST API, you can check out this blog for how you can programmatically pull URLs.
Once you have your desired dashboards, you can create a new array of all the URLs:
var myVizList = ['ShipmentDashboard_0/ShipmentOverview','InfographicStyleDash/Dashboard2','TheTrilogyShowdown/TrilogyShowdown','Inc_50002015/Dashboard1'];
I went ahead and made a base URL to tack it onto, but this part is totally optional.
var urlBase = 'https://public.tableau.com/views/';
Next, we go through the basic load viz function. The only difference here is we want to pass in which viz in our array we want to start with:
function initializeViz(url) {
var vizDiv = document.getElementById("viz");
var vizUrl = urlBase + myVizList[url];
var vizOptions = {
hideTabs: true,
hideToolbar: true
}
viz = new tableau.Viz(vizDiv, vizUrl, vizOptions);
}
var p = 0;
$(document).ready(initializeViz(p));
Finally, we will use the setInterval method to periodically dispose of the old viz and build the new! Disposing of the old viz is a key piece that is easily overlooked. Without that step, Tableau will throw an error that a viz already exists.
setInterval(function rotater(){
viz.dispose();
if (i < myVizList.length-1) {
i +=1
} else {
i = 0
}
initializeViz(i);
}, 20000);
That’s all the code we need to set up a simple webpage for rotating through dashboards. If you are not familiar with JavaScript, the only thing you need to tweak from this code is the list of URLs; and optionally, the interval timing. The timing works in milliseconds, i.e. 20000 = 20 seconds.
Feel free to grab the JavaScript code here and the HTML here.
Take a look at this older post on integrating bootstrap to quickly add some nicer formatting to the page.
tableau it! 