Embedding Tableau visualizations into a web page can enhance the user experience and provide a more interactive and dynamic way to display data. The Tableau JavaScript API allows you to embed Tableau content into a web page and provides a way to interact with the visualizations programmatically. This article will explore how to embed Tableau into a web page using the Tableau JavaScript API.
1. Obtaining the Embed Code: To embed Tableau into a web page, you will need to obtain the embed code from Tableau Server or Tableau Online. To do this, follow the steps below:
- Open the visualization you want to embed in Tableau Server or Tableau Online.
- Click the "Share" button and select "Embed Code".
- Copy the embed code provided.
2. Creating the Web Page: Once you have obtained the embed code, you can create the web page where the visualization will be embedded. To do this, follow the steps below:
- Create a new HTML file and paste the embed code into the file.
- Make sure that the web page contains the required script references for the Tableau JavaScript API.
- The required script references are as follows:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://public.tableau.com/javascripts/api/tableau-2.min.js"></script>
3. Initializing the API: After the script references are added to the web page, you can initialize the Tableau JavaScript API by adding the following code:
<script>
function initializeViz() {
var containerDiv = document.getElementById("vizContainer"),
url = "https://public.tableau.com/views/WorldIndicators/GDPpercapita",
options = {
hideTabs: true,
onFirstInteractive: function () {
console.log("Run this code when the viz has finished loading.");
}
};
var viz = new tableau.Viz(containerDiv, url, options);
}
</script>
4. Displaying the Visualization: Finally, you can display the visualization by adding a div element to the web page with an id of "vizContainer" and calling the initializeViz function:
<body onload="initializeViz();">
<div id="vizContainer" style="width:800px; height:700px;"></div>
</body>
In conclusion, embedding Tableau into a web page using the Tableau JavaScript API is a straightforward process. By following the steps outlined in this article, you can easily add dynamic and interactive visualizations to your web pages.
0 Komentar