Javascript API for Tableau

1
votes

I have a tableau workbook with

  • 2 sheets
    • a bar chart (sheet called BAR)
    • a pie chart (sheet called PIE)
  • 2 Dashboards
    • the bar graph full screen (sheet called FULLBAR)
    • the pie chart full screen (sheet called FULLPIE)

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.

When clicking a link to switch i get this error in the console

Error: Sheet is not found in Workbook

Here is my code (server obviously XXXX'ed out)

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

        <script type="text/javascript" src="http://xxx.xxx.xxx.xxx:xxxx/javascripts/api/tableau-2.0.0.js"></script>

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

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

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


            <!-- This is the end of the section where we will do our work. -->
        </div>
    </div>
</body>
</html>

and my app.js 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");
}
2
javascripttableau-api

2 Answers

2
votes

Found out the answer --

I initially had published to the server with the option "Show Sheets as Tabs" DESELECTED. My javascript was also using hideTabs: true.

Doing this causes the JS api to not know the names of the sheets.

By selecting the option during publishing "Show Sheets as Tabs", the API was able to correctly switch visualizations. The js option "hideTabs: true" still keeps the visual tabs hidden.

0
votes

I have three sheets in my tableau public account. I have created two buttons and describe as java script file as below.

function switchView(sheetName) { var workbook = viz.getWorkbook(); workbook.activateSheetAsync(sheetName); } ` No action is performed after clicking on button.