1 Reply Latest reply on Jun 30, 2015 7:51 PM by Russell Christopher

    Dynamically resize viz with javascript api.

    L L

      Hi everyone,

      Just wondering if anyone could help me out with a basic question. So I have an embedded workbook in a sharepoint webpart and I am trying to have the workbook size dynamically with the size of the browser.

      I did read this HOW TO: Resize Viz on Window Resize (Javascript API)

      But not entirely sure where this code goes. This is my embed code :


      <script type='text/javascript' src='/javascripts/api/viz_v1.js'></script>

      <div class='tableauPlaceholder' style='width: 1480px; height: 720px;'><object class='tableauViz' width='1480' height='720' style='display:none;'><param name='host_url' value='https%3A%2F%%2F' /> <param name='site_root' value='&#47;t&#47;NGE' /><param name='name' value='NGEFermBatches&#47;BatchCompare' /><param name='tabs' value='yes' /><param name='toolbar' value='yes' /></object></div>


      Where would I put this code:

      window.addEventListener('resize', resizeViz);

      function resizeViz() {

          var width = document.getElementById(div).clientWidth;

          var height = document.getElementById(div).clientHeight;

          viz.setFrameSize(width, height);



      Also what is my client div tag and is the viz object tableauViz?


      Thank you all in advance.

        • 1. Re: Dynamically resize viz with javascript api.
          Russell Christopher

          Hey LL -


          Your problem has to do with the way you originally are embedding the viz into the web page.  You using an older mechanism to do this work (note the v1 in the name of the JavaScript file), but then trying to resize it with a "newer" mechanism. That won't work.


          the code sample you found assumes the viz was embedded the new way. Yvan read more about this by googling Tableau JacaScript API Tutorial. It will walk you through how to embed the "new way" which will work with your found code sample.