Animate your Tableau dashboards on the Web

In this tutorial you will learn how to animate your Tableau dashboards on the Web. This will require basic understanding of Tableau — basic HTML and Javascript knowledge will also be helpful.

Background

Tableau dashboard developers have long wanted to show how things change over time in their views. In Tableau desktop this is possible using the Pages shelf and clicking the play button. The problem however, is that this functionality does not work on Tableau Server or Tableau Public…that is, until now.

Prerequisites

1. Tableau workbook that can be modified by changing a filter or parameter value
2. Tableau Server or account on Tableau Public
3. Web Server to host animated viz (optional)

Setup

1. Make sure your viz will look good when the parameter value is changed. (I’m saying parameter, but it could also be just a field in your data set that is being used in your viz).
2. Publish your viz to Tableau Server or Tableau Public. Keep in mind that anything on Tableau Public can be viewed by anyone, so be careful when publishing sensitive data.
3. Copy animate.html from here (html) to your Web server
4. Inside animate.html, add your URLs to the locations array starting at line 25 (examples included in html)
5. Publish your animate.html to a Web server of your choice. You may also fork this repository and use github’s pages as a free hosting of sorts.
6. Browse to your new animated map, tweak any settings that might not be right, like the time spent on each viz (setInterval parameter in animate.html).

I offer plenty of Tableau training on Pluralsight, in addition to this series of tips and tricks. In case you missed out on some of my colleagues earlier posts in the series, you can catch up here:

• Get notified when your Tableau Server extract has issues
• Analyze usage on your Tableau workbooks/dashboard by augmenting the ‘nviews' field

Examples

• ps-data.github.io/tableau-animation/map.html
• ps-data.github.io/tableau-animation/internet-usage.html
• ps-data.github.io/tableau-animation/housing-prices.html
• ps-data.github.io/tableau-animation/magic-quadrant.html

Enjoy!

Ben

*previously posted on pluralsight.com