Tableau JavaScript API Introduction

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.

The following steps shows how to integrate Tableau Javascript API in your web pages.

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.min.js"></script>

2. Create a div element in the page body where you want to insert the Tableau visualization:

<div id="vizContainer"></div>

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

function initViz() {
    var containerDiv = document.getElementById("vizContainer"),
    url = "https://YOUR-SERVER/views/YOUR-VISUALIZATION";
        
    var viz = new tableau.Viz(containerDiv, url); 
}

4. Call the function when the page is done loading:

initViz();