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 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 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/view_0">bioapps_single</option>
<option value="view_1/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/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
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 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 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/view_0">bioapps_single</option>
<option value="view_1/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/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
Share asked Mar 5, 2014 at 22:51 Young SongYoung Song 2252 gold badges4 silver badges12 bronze badges2 Answers
Reset to default 6I think I will post the code that I created as a reference for others to view if they get into the same sticky situation as I did. Like I have mentioned, I have figured out 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 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/view_0">view_0</option>
<option value="view_1/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 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.
This isn't strictly answering your question, but if you don't have local access to the Tableau Javascript API, then it should be possible to test using the Tableau Public version:
<script type="text/javascript" src="http://public.tableausoftware./javascripts/api/tableau_v8.js"></script>
In terms of reference material, check out the following links for more details on how to use the Tableau Javascript API (my internet connection is terrible right now, so I'll post more reference links tomorrow, and an attempt at properly answering your question)
- Javascript API tutorial
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1743686519a4490237.html
评论列表（0条）