Did you know that around 6 out of every 10 BI developer always faces problem when it comes to embed visualization in a webpage?

Yes, most of the BI developer or the one who creates visualization by using tool like Tableau, Qlikview, PowerBI, JasperSoft etc. feels helpless when there is a requirement of integrating reports/dashboards into webpage.

As most of the visualization tools provides simple drag and drop functionality, or ad-hoc creation of reports, so it is less likely that every BI developer should know some of the web technologies like HTML, CSS, JS(JavaScript), jQuery etc.

In this post I’ll share how JS will help Tableau developers to reach milestones in customizing their visualizations, also this post will help you to start you journey with JS.

Before continuing with this blog, i would like the readers to go through this blog to understand very basics of HTML, CSS and JS.

When we publish a report/viz to server(Tableau Public/Online/server) you will find below bar either on the top or at the bottom (see this example:click here)

There are two options available when you click on share button

a) Embed Code

b) Link

A) Embed Code:-

You will see some kind of code is there, this code will help you to embed your interactive Tableau visualization into web pages, blogs, wiki pages, web applications, and intranet portals



Embedded views update as the underlying data changes, or as their workbooks are updated on Tableau Server or Tableau Online.

If you want to embed the visualization, you just need to copy paste above code into the division of HTML page where you wish to see it.

B) Link:-



If you are work with a website or application like power-point presentation that doesn’t support embedded, interactive Tableau views , you can link to PNG or PDF versions of them.

Also, you can use the link in iframe source to have the interactive view of Tableau viz in you website.

[1] If you’re familiar with scripting, you can also use links to automatically convert multiple views into PNGs, PDFs, or even CSVs. The resulting files can be shared with people who lack Tableau Online or Tableau Server accounts, incorporated into presentations, or archived for future reference.

When you link to any of these formats, they always load the latest data available on the server. But be aware that CSVs of dashboards link to only one sheet—the one whose title is first in alphabetical order.

With the help of a Tableau content owner or site administrator, ensure that your audience has permission to access the content. (If you’re using a script to process multiple files, only you need access.) For links to PNG and PDF files, users need the Download Image/PDF permission. For links to CSVs, users need the Download Full Data permission.



Replace the end of a view’s browser URL with the appropriate file extension. For example, change http://”server-name”/#/views/”workbook-name”/sheet ?:iid=7 to http://”server-name”/#/views/”workbook-name”/sheet .png



If you want to filter a view, add a question mark after the file extension, followed by URL parameters that reflect the view’s data structure. For example, change http://”server-name”/#/views/”workbook-name”/sheet.png to http://”server-name”/#/views/”workbook-name”/sheet.png?Region=South&Department=Sales [1]



In our future blogs on Tableau & JS we’ll cover below topics:-

What is in the Embed code and how it works? Can we customize Embed code? If yes,then how and what kind of customization and some use-cases? How we can use link into iframe and how to customize that as well and some use-cases? What is JS API of Tableau( with new features) and how it is different from Embed-code and Link?

Thanks for reading this, I hope this will be useful to you.

Love to hear your feedback, query if any.

Don’t forget to subscribe for more upcoming Thought Articles.