Tableau with JavaScript API and UI integration

With Tableau's JavaScript API you can integrate Tableau visualizations into your own web
applications. The API lets you tightly control your users' interactions and combine functionality that
otherwise couldn't be combined. For example, you can code a single control that filters a group of
marks, selects some of those marks, and presents their data for download.

Here are some of the things that you can do with the JavaScript API:

Display visualizations from Tableau Server, Tableau Public, and Tableau Online in web
pages.

Dynamically load and resize visualizations.

Filter the data displayed in visualizations with HTML controls in the page.

Select marks in visualizations.

Respond to events in visualizations.

Export visualizations to an image or PDF file.

Get Started
1

Create a web page and include the JavaScript API file from the Tableau Server that
hosts your visualizations:
<script src="https://YOUR-SERVER/javascripts/api/tableau-2.js"></script>

Create a div element in the page body where you want to insert the Tableau
visualization:
<div id="vizContainer"></div>

Write a function in a JavaScript file to display the visualization:

2
3
4
5

function initViz() {
var containerDiv = document.getElementById("vizContainer"),
url = "http://YOUR-SERVER/views/YOUR-VISUALIZATION";

var viz = new tableau.Viz(containerDiv, url);

}

Call the function when the page is done loading:

initViz();

Writing your own Java Script API:

The tableau Java script API(JS API) lets you incorporate tableau visuals into the web applications.It
allows customer interactions and enables deep level of control and combine the functionality.For
example, you can code a single control that filters a group of locations and select specific locations in
them and make the data available for the users to download.Let us know few more things that can be
done using JS API

Display visualizations from Tableau server , Tableau public and Tableau online into the web
pages

To load and resize visualizations effectively

Chose marks in visualizations

Export visualizations to image or pdf file

Filter the data for visulaisations with the help of HTML

Reacting to the events in visualizations.

Additional control using passed parameters
Whether you adopt any of the above methods, you can further pass additional parameters to the
complete view.
Tips and Tricks to follow while embedding dashboard
Let us have a quick glance at some of the tips and tricks to be followed while embedding dashboard
using TABLEAU.
Filter formats:

Dimensions : While passing dimension filters ,just list each value by separating them with a
comma. If you want to pass multiple dimension filters separate them with an ampersand. For
example,

Field1=value 1, value 2, value3 & field2=value1, value2

Measures : Measures can be filtered same as the above method by passing distinct
values.However , tableau does not support using greater than or less than logic.

Date/Time : To filter date or time field , time component can be regarded as optional . For
instance,
Date field=yyyy-mm-dd

hh:mm:ss (optional)

Character Limits:
Although there is no limit on number of parameter values to pass on an embedded view , there might
be an URL length restriction imposed by the end users browser.
HTTP Protocol does not impose any limit on URL length as you can notice many modern day
browsers can handle URL length up to 80,000 characters , however internet explorer 8 & 9 have a
maximum character limit of 2,083 characters only.
Therefore, you should be conscious of keeping URLs under this limit to assure compatibility. Note
that the complete URL length does not mean to definitely include passed parameters and resulting
values from it.

Use of trusted ticket authentication:

When an embedded view is being accessed , the authentication mode available on tableau server is
used to know the users identity.To explain , if your server is constructed for local user
authentication , then users must log in through a form provided by the embedded view.This may be a
tiresome process for the user if he had already authenticated into the web application. To overcome
this situation tableau server gives an option of single sign-on method where an already authenticated
user need not log in further into embedded tableau view.He would be in your active directory and
SSPI and would be treated as a licensed tableau server user. However, in all the other situations ,
trusted ticket authentication method is used as an alternative to single sign-on method.
While using trusted ticket authentication method , the web server takes all the responsibility of the
authenticated users.Much before embedding the view ,web server does two POST parameters to
tableau server:

Username

Client_ip

The web server receives unique_id through the form which is further used in the embedded views
URL , as shown:

HTTPS://YOURTABLEAUSERVER.COM/TRUSTED/UNIQUE_ID/T/VIEWS/MYWORKBOO
K/MYDASHBOARD?:EMBED=YES
If you are using java script, <param>tag can be used as:
<param name=ticket
Value=unique_id/>
Once if unique_id is issued , it must be reclaimed within 15 seconds from a machine matching the
client_ip specified ,or else it would become invalid. As soon as tableau server receives the request
that the user has logged in , then trusted ticket URL is resolved to that of a standard request.
Even before web server can make a request of trusted ticket authentication,it must first be on trusted
listof tableau server. This can be achieved using tabadmin command where xxx.xxx.xxx.xxx
indicates an IP address for every trusted web server.
Tabadmin set wgserver.trusted_hosts xxx.xxx.xxx.xxx , xxx.xxx.xxx.xxx.