7/25/2019 Tableu With Javascript API and UI

1/4

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 unctionality that

otherwise couldn't be combined. !or e"ample# you can code a single control that ilters a group o

mar$s# selects some o those mar$s# and presents their data or download.

%ere are some o the things that you can do with the JavaScript API&

isplay visualizations rom Tableau Server# Tableau Public# and Tableau (nline in web

pages.

ynamically load and resize visualizations.

!ilter the data displayed in visualizations with %T)* controls in the page.

Select mar$s in visualizations.

+espond to events in visualizations.

,"port visualizations to an image or P! ile.

Get Started

- reate a web page and include the JavaScript API ile rom the Tableau Server that

hosts your visualizations&

- reate a divelement in the page bodywhere you want to insert the Tableau

visualization&

- Write a unction in a JavaScript ile to display the visualization&

2 !uctioiitiz#$ %

& varcotaier'iv = docu(et.)et*le(et+y,d#"vizCotaier"$

url = "http://YOUR-SERVER/vies/YOUR-VISUALIZATION"0

1

7/25/2019 Tableu With Javascript API and UI

2/4

varviz = etableau.iz#cotaier'iv url$0

3

- all the unction when the page is done loading&

iitiz#$0

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

usingTABLEAU.

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,

http://mindmajix.com/tableau-online-traininghttp://mindmajix.com/tableau-online-training

7/25/2019 Tableu With Javascript API and UI

3/4

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 . Forinstance,

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 daybrowsers 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

7/25/2019 Tableu With Javascript API and UI

4/4

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, tag can be used as:

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.

https://yourtableauserver.com/trusted/unique_id/t/views/myworkbook/mydashboard?:embed=yeshttps://yourtableauserver.com/trusted/unique_id/t/views/myworkbook/mydashboard?:embed=yeshttps://yourtableauserver.com/trusted/unique_id/t/views/myworkbook/mydashboard?:embed=yeshttps://yourtableauserver.com/trusted/unique_id/t/views/myworkbook/mydashboard?:embed=yes