Embedding tableau visualizations on the web

I’m writing this short post because I see that exact phrase come up in the search engine terms of the blog now and again (along with “Hello this is bathtub” but I can’t really help there).

Long story short. I run into problems all the time trying to properly embed Tableau vis into wordpress blog posts. Does it happen outside of wordpress, I don’t know, because I don’t really try to embed Tableau vis outside of wordpress. That said, I have the same problem with d3 vis in wordpress and I’ve been asked several times how do I do it.

iframes.

That’s how.

Here is what I did last time.

<iframe
  style="border: 0px;"
  src="http://public.tableausoftware.com/views/champions/champions?:embed=y&amp;:from_wg=true"
  scrolling="no"
  width="652px"
  height="756px">
</iframe>

so you’ll have to go to HTML mode and type it out. When it’s done, you can safely go back to visual mode if you feel like it.
Let’s go through these lines one by one (btw, they don’t have to appear one line at a time, it’s just for presentation purposes).

Most important, what in on src. That’s simply the link to the page of your tableau vis. And if that’s not clear enough, it goes like this:
http://public.tableausoftware.com/views/ + name of your workbook + / + name of your dashboard or sheet.

Since I want to show a dashboard called champions in a workbook called champions as well, that’s http://public.tableausoftware.com/views/champions/champions.

I’m not sure whether what’s after the dashboard name is important. I’ll leave that as an exercise to figure it out. I’m pretty confident things work without it.

Then the rest.

style=”border: 0px” Yes, because you don’t want an ugly border around your iframe. or do you?

scrolling=”no”. So there’s no scrollbar. Look. Scrollbars in iframes were pretty rad in 1996, but if you want to give that embed feeling, you have to do without them.

height=…px, width=…px. Here’s the tricky part. You have to manually set the size of your visualisation and add a couple of pixels for good measure.

In tableau, when creating dashboards, I have always used the option to size them exactly at a precise size and I recommend you do that too. Then add 2-6 px to each dimension and use that as width and height.

In my experience going through these steps is really less painful than using the “native” embed functionality of tableau vis which sometimes work and sometimes doesn’t. The added bonus is that the resulting html is much more legible than what Tableau generates, which, for the record, is:

<script type="text/javascript" src="http://public.tableausoftware.com/javascripts/api/viz_v1.js"></script><div style="width:654px; height:799px;"><noscript><a href="http:&#47;&#47;www.jeromecukier.net&#47;blog&#47;2012&#47;06&#47;30&#47;tableau-2012-sports-visualization-contest-entry&#47;"><img alt="champions " src="http:&#47;&#47;public.tableausoftware.com&#47;static&#47;images&#47;ch&#47;champions&#47;champions&#47;1_rss.png" style="border: none" /></a></noscript><object width="654" height="799" style="display:none;"><param name="host_url" value="http%3A%2F%2Fpublic.tableausoftware.com%2F" /><param name="site_root" value="" /><param name="name" value="champions&#47;champions" /><param name="tabs" value="no" /><param name="toolbar" value="yes" /><param name="static_image" value="http:&#47;&#47;public.tableausoftware.com&#47;static&#47;images&#47;ch&#47;champions&#47;champions&#47;1.png" /><param name="animate_transition" value="yes" /><param name="display_static_image" value="yes" /><param name="display_spinner" value="yes" /><param name="display_overlay" value="yes" /><param name="display_count" value="yes" /><param name="from_wg" value="true" /></object></div><div style="width:654px;height:22px;padding:0px 10px 0px 0px;color:black;font:normal 8pt verdana,helvetica,arial,sans-serif;"><div style="float:right; padding-right:8px;"><a href="http://www.tableausoftware.com/public?ref=http://public.tableausoftware.com/views/champions/champions" target="_blank">Powered by Tableau</a></div></div>

Yeah. You say &#47; i say %2F. anyway, this is a bit difficult to troubleshoot.

The drawback when using iframes is that you lose the nice static image which is generated for RSS flows and other environments without interactivity. If you don’t know what I’m talking about (if you’re not familiar with that large orange arrow at the center) you’ll have no regrets.

Bonus: d3.

It turns out that the iframe is the simplest solution to have d3 work within wordpress, too. Sure, in theory it is possible to upload a js file as a media file, so you get a url with the date in it or something, which you can link to from the… whatever. It just never works and it’s a pain to maintain.

so instead, use iframes. Make your d3 visualisation into an html file which will have all the necessary links. Then upload the file to a location you know (and possibly dependencies) and you’re all set! set an iframe with the same guidelines as above. To make the process even less painful, I use a plug-in called FileManager which lets me upload and manage files from within my dashboard environment. On another server I use another app also called FileManager (quite a catchy name, apparently) which runs outside of the wordpress environment.

Happy embedding!

 

11 thoughts on “Embedding tableau visualizations on the web

  1. good info. thanks for posting.

    Just last week, I was trying to get d3 on a wordpress site. Having abandoned wordpress for github pages long ago, I didn’t have much luck. Will follow your advice next time!

  2. thanks for the link. Though, in the specific case of a Tableau Public visualization, there’s no damage done, no bandwidth concern and there’s always attribution, so it’s not so bad :)

  3. Hi Jerome – thanks for the solution. As I relatively new to this (trying to embed Tableau vix into WordPress) , could you show me the iframe solution above, as it fits into the whole body of the embedding code?

    Thank you in advance

  4. you should look at one of my posts that contains a tableau dashboard, do view source and copy the code changing the name of the dashboard with your own. It’s been a long time since I last tried this, so it’s entirely possible that Tableau has come up with a better way of doing this since then.

  5. Hi,

    I tried your iframe code and the only thing appearing is the hyperlink to my data stuff at Tableau website. I expected the actual graph to appear and being interactive.

    But also, if I copy the long code provided by Tableau Public the graph on my webpage is static (not interactive), there’s a “Play” sign in the middle of it which does nothing when you click on it and, finally, the graph overlaps on the following text (I place my graph between two paragraphs).

  6. hi, this has been written a long time ago and this might not work anymore… even though my post that uses it still works :)
    can you point me to your page where you have the problem?

Leave a Reply