Dynamic Load


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!