QBoard » Advanced Visualizations » Viz - Tableau » Tableau making the viz height to be the same as on the server via API
User Dashboard

Tableau making the viz height to be the same as on the server via API

Back To Topics
Tag : tableau-api
  • 461
    I have the following options to make the viz show properly in my container. Width wise it is showing up proper. My issue is the height, i have specified it as 500px at this time. How can i make the height to be the same as that on the tableau server?

    var vizDivObject = document.getElementById('tableauVizDiv');
var options = {
                    width: vizDivObject.offsetWidth,
                    height: "500px", //vizDivObject.offsetHeight,
                    hideTabs: true,
                    hideToolbar: true
                };​



      August 10, 2021 3:14 PM IST
    0
  • 346 3
    According to the Tableau JavaScript API reference manual I can't see a way to get the height of the workbook before you create the viz. The viz will be created to fill the area you define. If you don't set a default height in either the div or the initializeViz() function, then the default is 600px. http://onlinehelp.tableau.com/v8.1/server/en-us/js_api_ref.htm

    style="font-family: arial, helvetica, sans-serif; font-size: 10pt;">To get the default size used by tableau I open the tableau workbook on the tableau server and then under "Share -> Embed Code" you will find the size used by the tableau server. I then use this use in the div

    <div id="tableauVizDiv" style="width: 1304px; height: 862px;"></div>
​
      August 17, 2021 12:55 PM IST
    0
  • 259
    In my case, we are supporting tablets and desktop browsers. The following worked for me since all of our vizs are dashboards, along with option width: vizDivObject.offsetWidth.

    var workbook = viz.getWorkbook();
var activeSheet = workbook.getActiveSheet();
if (activeSheet.getSheetType() === 'dashboard') { //worksheet or dashboard
                    //alert(activeSheet.getName());
                    activeSheet.changeSizeAsync({
                        behavior: tableauSoftware.SheetSizeBehavior.AUTOMATIC
                    });
                }​
      August 19, 2021 1:57 PM IST
    0