Skip to content

Exercise #3_01 | JavaScript APIs with Tableau

Jump to bottom
Genie52 edited this page Jun 19, 2019 · 35 revisions

Welcome to exercise 3! Here we are going to focus on JavaScript and embedding the Tableau Viz inside the HTML page.

Use the Tableau JavaScript API to integrate Tableau visualizations into your own web applications.

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.

First thing we need to do is to reference where is Tableau JavaScript library we will use - you can find it on the server uder /javascripts/api/ path:

<script type="text/javascript" src="http://localhost/javascripts/api/tableau-2.min.js"></script>

In previous exercise you have have managed to receive from Tableau Server trusted ticket that looked something like 'sVeuxoYFS8qcBEu9f1GpFA==:QHABgnFq4tcFWN1sTkP-0pdA'. That is the secret sauce why Tableau visualisations are now loading without asking you for username and password. We will use this ticket when calling Tableau Vizz on a server like this:

url = "http://localhost/trusted/{{tableau_ticket}}/views/Regional/College"

as you already know tableau_ticket variable came from our python code and it is inside curly brackets - {{ }} so we can reference it. That means when HTML page loads this link above will look like this:

url = "http://localhost/trusted/sVeuxoYFS8qcBEu9f1GpFA==:QHABgnFq4tcFWN1sTkP-0pdA/views/Regional/College"

As the next step we will define JavaScript function that will load the Tableau Visualisation from the Tableau Server:

<script type="text/javascript">
function initViz()
{
   var containerDiv = document.getElementById("vizContainer"),
   
   //url to Tableau Visualisation on the server - in this case we are loading College viz
   url = "http://localhost/trusted/{{tableau_ticket}}/views/Regional/College",

   // below we specify some of the options available - in this case just width and height
   // there is much more options we can manage here if we want...
   options =
   {
      height: "700px",
      width: "800px"
   }

   // Create a viz object and embed it in the container div.
   viz = new tableau.Viz(containerDiv, url, options); 
}
</script>

and then we need to make sure to call that initViz() function when HTML page loads. Also with the <div id="some_name_to_reference"> (and in this case is id="vizContainer" we decide where we want our dasboard/viz to show.

<body onload="initViz();">
   <div id="vizContainer"></div>
</body>

Alright that was super quick intro to JavaScript APIs - now lets start playing with the code! As before lets first review the current finished and working example. Go to CMD, folder *C:\LabsTCE19\03 - JavaScript* and start 01-JavaScript.py :

python 01-JavaScript.py

Open localhost:5000 link in browser, login as User01 (any password) and try those filters and selections.

Now let's build this!

Open 01-JavaScript.py in Atom and find the following lines of code:

@app.route('/loginTableauPage')
def loginTableauPage():
    return render_template('loginTableauPage-Finish.html', tableau_ticket = tableau_ticket_return.text, username = username)
    # return render_template('loginTableauPage-Start.html', tableau_ticket = tableau_ticket_return.text, username = username)

as you can see one line is commented with #, change that comment - we want to comment first one that refers to file loginTableauPage-Finish.html and we want to load loginTableauPage-Start.html because this is our starter file we will now edit - so you will do this:

@app.route('/loginTableauPage')
def loginTableauPage():
    # return render_template('loginTableauPage-Finish.html', tableau_ticket = tableau_ticket_return.text, username = username)
    return render_template('loginTableauPage-Start.html', tableau_ticket = tableau_ticket_return.text, username = username)

Don't forget to save the file! Then go back to CMD , press CTRL + C to stop the Flask server and start it again!

python 01-JavaScript.py (of course you knew that already right? :-) )

Then open again localhost:5000, login as User01 and you should see nice big empty space:

And this is our canvas for beautiful art of embedding! 🌹

There is a lot of code we need to cover here so I have prepared a nice file - copy paste code.tx - that has all the code you need and it is clearly marked by sequence numbers like #1, #2, #3, etc that you will follow. Open that file in Atom, including loginTableauPage-Start.html from templates folder so you can start copy/pasting!

Example below (on the left is loginTableauPage-Start.html and on the right copy paste code.tx):

Copy/paste first three elements (so under #1, #2, #3) to HTML file. Stop the Flack server (CRTL + C in CMD window) and start it again. As you can see you will need to do that every time you change the file and you want to see changes applied on your Flask server. There are much better ways to do this in real life but for now we are happy with this :)

Example flow of editing files and reloading:

So when you have copy/pasted code under #1,#2 and #3 the result should be as follows (notice only embedded viz and no filters or buttons):

Amazing stuff!! :) Now that you know the flow here are the rest of the steps:

a) copy/paste #4, #5, #6 and check for results (don't forget the restarting and starting of flask web server)

b) now to finish copy/paste 7a and 7b and check for the result!

c) thats it! - you have a breathtaking embedded tableau web page!

Clone this wiki locally