Back

Explore Courses Blog Tutorials Interview Questions

closed Embedding tableau views in webpage using HTML/JavaScript

0 votes
2 views
in BI by (17.6k points)

I understand to the point that it is possible to embed the tableau view using an HTML code that looks something like this:

<script type="text/javascript" src="http://tableau/javascripts/api/viz_v1.js">

<div id="tableau_view" class="tableauPlaceholder" style="width:1028px; height:804px;">

  <object class="tableauViz" width="1028" height="804" style="display:none;">

    <param name="host_url" value="http%3A%2F%2Ftableau%2F" />

    <param name="site_root" value="" />

    <param name="name" id="wbName" value="view_0&#47;view_0" />

    <param name="tabs" value="no" />

    <param name="toolbar" value="yes" />

  </object>

</div>

What I want to do is to generate a page with a dropdown menu that contains the value of the "name" parameter. Basically, when I select a value in the dropdown, that would refresh the segment of the page with the tableau viz that is associated with the selected value. I have been struggling with this for a while, as I am still learning JavaScript myself.

This is what I have right now:

<html>

<head>

<meta charset="utf-8">

<title>Tableau Test</title>

<script type="text/javascript" src="http://tableau/javascripts/api/viz_v1.js">

    function selectViz() {

        var mylist=document.getElementById("tableau_workbook");

        var wbName=document.getElementByName("name");

        wbName.setAttribute("value",mylist.options[mylist.selectedIndex].value);

     }

</script>

</head>

<body>

    <form>

    <!-- Dropdown Menu, the value corresponds with those found in the "name" parameter in the tableau view code -->

    <select id="tableau_workbook" onchange="selectViz()" >

        <option>Choose Workbook</option>

        <option value="view_0&#47;view_0">bioapps_single</option>

        <option value="view_1&#47;view_1">bioapps_merged</option>

    </select>

    <!-- Tableau view goes here -->

    <div id="tableau_view" class="tableauPlaceholder" style="width:1028px; height:804px;" >

        <object class="tableauViz" width="1028" height="804" style="display:none;">

            <param name="host_url" value="http%3A%2F%2Ftableau%2F" />

            <param name="site_root" value="" />

            <param name="name" value="view_0&#47;view_0" />

            <param name="tabs" value="no" />

            <param name="toolbar" value="yes" />

        </object>

    </div>

    </form>

</body>

</html>

At this point, I don't have the access to Tableau JavaScript API, so I am trying to do everything using raw HTML/JavaScript. Not really sure whether I am doing this right or not. Your help would be much appreciated.

Thank you,

Young 

closed

1 Answer

+1 vote
by (47.2k points)
edited by
 
Best answer

  • Refer to the below-mentioned code to view if they get into the same sticky situation as I did. Like I have mentioned, I have figured out a way to access tableau javascript API, and the code below is using it. Please keep in mind this is for embedding the views in a webpage. There is a slightly different way of doing this in Confluence Wiki Page, which is described here.

  • Here is the code:

<html>

<head>

<meta charset="utf-8">

<title>Tableau Test</title>

<script type="text/javascript" src="http://tableau/javascripts/api/tableau_v8.js"></script>

<script type="text/javascript">

function selectViz() {

    var mylist=document.getElementById("workbook_selection");

    wbValue = mylist.options[mylist.selectedIndex].value;

    wbTagQuote = wbValue;

    initializeViz(wbTagQuote);

}

function initializeViz(wbTagQuote){

    var placeholderDiv = document.getElementById("tableauViz");

    var url = wbTagQuote;

    var options = {

        width: placeholderDiv.offsetWidth,

        height: placeholderDiv.offsetHeight,

        hideTabs: true,

        hideToolbar: true,

        onFirstInteractive: function () {

            workbook = viz.getWorkbook();

            activeSheet = workbook.getActiveSheet();

        }

    };

    var viz = new tableauSoftware.Viz(placeholderDiv, url, options);

}

</script>

</head>

<body>

<form>

<!-- Dropdown Menu, the value corresponds with those found in the "name" parameter in the tableau view code -->

    <select id="workbook_selection" onchange="selectViz()">

        <option>Choose Workbook</option>

        <option value="view_0&#47;view_0">view_0</option>

        <option value="view_1&#47;view_1">view_1</option>

    </select>

<!-- Tableau view goes here -->

    <div id="tableauViz" style="height:1200px; width:1200px"\"></div>

</form>

</body>

</html>

Important: under option value, you insert the link to your tableau view (i.e. "http://" followed by tableau_server_name/path_to_view). Also, the dropdown menu at the current state is not fully functioning...while first element has been selected, when you try to load another view, it will not work...I am trying to figure this out.

Get trained to use Tableau with full potential through Tableau Online Training.

Related questions

0 votes
1 answer
How can I remove child node in HTML using JavaScript?
asked Feb 18, 2021 by Harsh (1.5k points)
0 votes
1 answer
Generate pdf from HTML in div using Javascript
asked Jan 25, 2021 in Java by dante07 (13.1k points)
0 votes
1 answer
Export HTML page to PDF on user click using JavaScript.
asked Mar 28, 2021 in Web Technology by Jake (7k points)

Browse Categories

© COPYRIGHT 2011-2023 INTELLIPAAT.COM. ALL RIGHTS RESERVED.

Download Salary Trends Now !

Learn how professionals like you got up to 100% Salary Hike.

...