Dynamic Load


Important changes for the Tableau JavaScript API

As of February 2024, the Tableau JavaScript API is deprecated. Use the Embedding API v3 instead for embedding interactive views into web pages and applications. For guidance on embedding Tableau views, see the Tableau Embedding API v3 Help(Link opens in a new window).

Dynamically load and remove visualizations. Click the Previous and Next buttons to display other visualizations in a predefined list.

 


<!DOCTYPE html>
<html>

<head>
    <title>Dynamic Load</title>

    <script type="text/javascript"
        src="https://public.tableau.com/javascripts/api/tableau-2.min.js"></script>
    <script type="text/javascript">
        var vizList = ["http://public.tableau.com/views/RegionalSampleWorkbook/Flights",
            "http://public.tableau.com/views/RegionalSampleWorkbook/Obesity",
            "http://public.tableau.com/views/RegionalSampleWorkbook/College",
            "http://public.tableau.com/views/RegionalSampleWorkbook/Stocks",
            "http://public.tableau.com/views/RegionalSampleWorkbook/Storms"];

        var viz,
            vizLen = vizList.length,
            vizCount = 0;

        function createViz(vizPlusMinus) {
            var vizDiv = document.getElementById("vizContainer"),
                options = {
                    hideTabs: true
                };

            vizCount = vizCount + vizPlusMinus;

            if (vizCount >= vizLen) {
            // Keep the vizCount in the bounds of the array index.
                vizCount = 0;
            } else if (vizCount < 0) {
                vizCount = vizLen - 1;
            }

            if (viz) { // If a viz object exists, delete it.
                viz.dispose();
            }

            var vizURL = vizList[vizCount];
            viz = new tableau.Viz(vizDiv, vizURL, options);
        }
    </script>
</head>

<body onload="createViz(0);">
    <div id="vizContainer" style="width:800px; height:700px;"></div>
    <div id="controls" style="padding:20px;">
        <button style="width:100px;" onclick="javascript:createViz(-1);">Previous</button>
        <button style="width:100px;" onclick="javascript:createViz(1);">Next</button>
    </div>
</body>

</html>

Back to top
Thanks for your feedback!Your feedback has been successfully submitted. Thank you!