Getting Started Guide
- Filter and set parameters on load - This is useful for loading the viz with the correct context given where the user is in your application or choices they have made.
- Create custom interfaces for interacting with the view - You can add your own dashboard controls that have the look and feel of your embedding application. Add HTML controls to filter the data displayed, select marks, or export images or data in various file formats.
Let’s walk through the steps for embedding a Tableau visualization (the viz) in a web application.
- Add an HTML element to hold your Tableau viz
- Add code to initialize the API and to use API methods to interact with the viz
- Call the function to initialize and display the viz
tableau-2.min.js) from the Tableau (that is, the Tableau Server, Tableau Cloud, or Tableau Public instance) that hosts your visualizations.
Now that you have the library, for the next step, you need to add a
<div> element to your HTML page to host the Tableau visualization. In this case, we create a
div element called
vizContainer in the page
body where you want to insert the Tableau visualization. You can set the width and height for the
<body> <div id="vizContainer" style="width:800px; height:700px;"></div> </body>
Viz object as follows:
var viz = new tableau.Viz( /* params omitted */ );
Creating a new
Viz object generates the HTML code necessary to embed a Tableau visualization in your web application. To instantiate a new
Viz object, call the
Viz constructor and pass a reference to the
div container on the HTML page. You also provide the URL of the visualization on Tableau Server, Tableau Cloud, or Tableau Public, and you can specify a set of options.
Pro Tip - Getting the URL to the viz
To find the URL for a view on Tableau Server or Tableau Cloud, click Share on the toolbar and select Copy Link from the Share View dialog box. For Tableau Public, copy the URL for the view from the address bar in your browser.
initViz()) to initialize the
Viz object. This function embeds a Tableau view in the
div element called
vizContainer. For the URL, the example specifies a visualization on Tableau Public. In addition, this code sets a couple of options for the
This example also specifies the
onFirstInteractive() callback function. This is a function that is called once the Tableau view has been initialized and loaded. You can use the callback to call other functions, such as functions that add event listeners, or functions that set up interactive filters, or functions that perform other actions, based upon activity taken by users of your web application. In this example, the function writes a message to the console. If you open the debugging tools for your browser, you will see this message in the console window after the Tableau viz has loaded.
After you create your function to create and initialize the
onload event attribute to the HTML
<body> element to call your function when the HTML page is fully loaded (all script files, images, and resources).
For example, to use the
intitViz() function we defined in the previous step, you might have HTML code that looks like the following.
<body onload="initViz();"> <div id="vizContainer" style="width:800px; height:700px;"></div> </body>
When the HTML page loads in the browser, the
initViz() function gets called and creates the new
Viz object and loads the interactive Tableau visualization. That’s all there is to it!
Here’s what it looks like:
Here’s the complete source code for the web page:
Last updated: 14 September, 2021