Dynamic Load

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


<!DOCTYPE html>

    <title>Dynamic Load</title>

    <script type="text/javascript"
    <script type="text/javascript">
        var vizList = ["http://public.tableau.com/views/RegionalSampleWorkbook/Flights",

        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.

            var vizURL = vizList[vizCount];
            viz = new tableau.Viz(vizDiv, vizURL, options);

<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>


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