Embedding tableau views in webpage using HTML/JavaScript

Question

asked Jul 20, 2019 in BI by Vaibhav Ameta (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/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>

<select id="tableau_workbook" onchange="selectViz()" >
<option>Choose Workbook</option>
<option value="view_0/view_0">bioapps_single</option>
<option value="view_1/view_1">bioapps_merged</option>
</select>

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

answered Jul 31, 2019 by Ashok (47.2k points)
edited Nov 25, 2022 by admin

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>

    <select id="workbook_selection" onchange="selectViz()">
        <option>Choose Workbook</option>
        <option value="view_0/view_0">view_0</option>
        <option value="view_1/view_1">view_1</option>
    </select>

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

Embedding tableau views in webpage using HTML/JavaScript

1 Answer

Related questions

Browse Categories