Design a site like this with WordPress.com
Get started

Tableau: Embedded Analytics – Quick Start Guide

Aim:

To display interactive Tableau dashboards on your own website.

What you will need:

  • A text editor
  • A Tableau Public Profile (with a dashboard you want to display)
  • (Optional) Somewhere to publish your page. Here I use a GitHub account.

Quick Start Guide

The code needed to publish a Tableau Public Dashboard is available on GitHub. This code includes a title and buttons to download your viz as a pdf or image.

Create your own copies of the files

  1. Go to this GitHub link.
  2. Open the index.html file.
  3. Highlight and copy the code.
  4. Open a new NotePad file.
  5. Paste the code.
  6. Save the file as index.html (no need to select a file extention. NotePad will recognise .html)
  7. Repeat steps 2 – 5 with the app.js file. Save this file as app.js

Edit index.html

You will need to make two changes to the index.html file. This can be completed within NotePad. Row 4 and Row 14 include the text Add Title Here. Do as it suggests and change this text to a relevant title for you viz.

Edit app.js

You will need to make two changes to the app.js file. This can be completed within NotePad.

In your browser, go to the Tableau Public Dashboard you want to display. At the bottom of this viz, in the right hand corner there will be a share symbol. Click this and copy the link provided.

Paste this link into your app.js NotePad file in Row 6 (Const url = …). Replace the link in the speech marks with your link.

Create a new GitHub repository (repo)

Drag and drop your index.html and app.js files into the repo.

Set up GitHub Pages so you can view your page

Within the repo, go to Settings (the last tab) and Options (this is top of the list so should be open automatically). Scroll down to Git Hub Pages. Select Master Branch from the drop down. This creates a web address to view your repo. The address appears in green above the GitHub Pages Section within settings.

Tweaks and Changes

The size of your dashboard might not be correct when you view the page. You can make changes to this in the app.js file. Make changes to the height and width values in Rows 11 and 12 on GitHub.

[You can edit GitHub pages using the edit icon (pencil). Once you have made changes you will need to Commit these and then reload the web page to see how it looks.]

Resources

If you want to learn more about Embedding Tableau Dashboards:

Advertisement

2 thoughts on “Tableau: Embedded Analytics – Quick Start Guide

  1. Hi Dink Wiz! I’m blogging with wordpress.com. In some cursory research, I found that it may not be possible to embed Tableau workbooks in my blog? But I’m curious to try out this method. May I reach out with any questions, if that’s ok?

    Liked by 1 person

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: