Ok, I’ve finally nailed this, I think. Embedding Tableau dashboards within a responsive web page that is.
Here’s a video overview, or keep reading below for an explanation of the process.
Previously when embedding Tableau within my posts I’ve had a fixed dimension for the width of the visualisation, meaning a new version of a dashboard was required to suit each of the typical device screen sizes (desktop, tablet, phone).
By creating different ‘device layouts’ within Tableau, the resulting Embed Code from Tableau Public now appears to support a responsive layout. At least with my experience within WordPress this is the case, and I’ll confess, I’m not a webpage guru by any means.
So, the process is as follows:
- Ensure you have different device layouts for your Tableau Dashboard.
- Publish your dashboard to Tableau Public
- Copy dashboard embed code from Tableau Public
- Paste the embed code into your web page.
Perhaps the most challenging aspect, and certainly most time consuming, is formatting the design of your dashboard for each of the separate device layouts. Tableau has three separate device layouts to generate; one for desktop, one for tablet, and one supporting mobiles.
I find that creating the desktop and tablet layouts is reasonably straightforward, with the tablet layout not differing too much from the desktop layout.
However the phone layout can present some challenges. Pleasingly, Tableau has a feature to generate a sample layout automatically, which depending on your dashboard layout, usually renders ok as a nice starting point.
Occassionally however I’ve found my worksheets are unsuitable for inclusion in the phone layout, often due to the formatting of labels or axes, or that the original chart simply looks best in a landscape format. When this is the case, the worksheet needs to be duplicated and re-worked to create a nicer phone compliant version.
Now the trick to making this new sheet available for inclusion in the phone device layout is to ensure it’s added to the ‘default’ layout first. If the sheet isn’t included in the default layout, then it simply isn’t available for inclusion within the mobile layout.