Javascript API for Tableau
<p>I have a tableau workbook with </p>

<ul>
<li>2 sheets

<ul>
<li>a bar chart (sheet called BAR)</li>
<li>a pie chart (sheet called PIE)</li>
</ul></li>
<li>2 Dashboards

<ul>
<li>the bar graph full screen (sheet called FULLBAR)</li>
<li>the pie chart full screen (sheet called FULLPIE)</li>
</ul></li>
</ul>

<p>Now im trying to load them into an HTML page with buttons to switch between the dashboards.  I followed the tutorial and it pulls in the initial dashboard (FULLBAR) just fine, however the switching of dashboards is where I run into a problem.</p>

<p>When clicking a link to switch i get this error in the console</p>

<pre><code>Error: Sheet is not found in Workbook
</code></pre>

<p>Here is my code (server obviously XXXX'ed out)</p>

<pre><code>&lt;!doctype html&gt;
&lt;html lang="en"&gt;
    &lt;head&gt;
        &lt;meta charset="utf-8"&gt;
        &lt;title&gt;Proof of Concept&lt;/title&gt;
        &lt;meta name="description" content="Proof of Concept"&gt;
        &lt;meta name="author" content="thisDude"&gt;

        &lt;script type="text/javascript" src="http://xxx.xxx.xxx.xxx:xxxx/javascripts/api/tableau-2.0.0.js"&gt;&lt;/script&gt;

        &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"&gt;&lt;/script&gt; 
        &lt;script type="text/javascript" src="js/bootstrap.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="js/app.js"&gt;&lt;/script&gt;
        &lt;link rel="stylesheet" type="text/css" href="css/bootstrap.css"&gt;
        &lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt;

&lt;/head&gt;
&lt;body&gt;
    &lt;div class='container'&gt;
        &lt;div class='row'&gt;
            &lt;div class='span3 col-xs-6'&gt;&lt;img style="height:39px; width:100px;" src="logo.jpg" &gt;&lt;/div&gt;
            &lt;h2 class='col-xs-6 span7 pagination-centered'&gt;Proof of Concept&lt;/h2&gt;
        &lt;/div&gt;
        &lt;div class='row'&gt;
            &lt;h3 class='offset3 span7 pagination-centered' id='sheetName'&gt;&lt;/h3&gt;
        &lt;/div&gt;
        &lt;div class='row'&gt;

            &lt;!-- All of our work will happen here --&gt;
            &lt;!-- Viz located at http://xxx.xxx.xxx.xxx:xxxx/views/TEST_VIS2/FULLBAR --&gt;
            &lt;ul id = 'menu' class='nav nav-list offset1 span2'&gt;
                &lt;!-- This is the menu where we will add all of our buttons. --&gt;
                &lt;li class='nav-header'&gt;Switching Views&lt;/li&gt;
                &lt;li&gt;&lt;a onClick="switchView('FULLBAR')"&gt;Bar Chart&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a onClick="switchView('FULLPIE')"&gt;Pie Chart&lt;/a&gt;&lt;/li&gt;                
            &lt;/ul&gt;
            &lt;div id='tableauViz'&gt;&lt;/div&gt;
            &lt;script&gt;
            &lt;/script&gt;


            &lt;!-- This is the end of the section where we will do our work. --&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>and my app.js code:</p>

<pre><code>window.onload=function() {
    var vizDiv = document.getElementById('viz');
    var vizURL = "http://xxx.xxx.xxx.xxx:xxxx/views/TEST_VIS2/FULLBAR_1";
    var options = {
        width: '100%',
        height: '500px',
        hideToolbar: true,
        hideTabs: true
    };

    viz = new tableauSoftware.Viz (vizDiv, vizURL, options);
};

function switchView(sheetName) {
    workbook = viz.getWorkbook();
    workbook.activateSheetAsync(sheetName);
    console.log(sheetName);
    console.log(workbook + " workbook var");
    console.log(viz.getWorkbook() + " viz.getWorkbook var");
}
</code></pre>