4 Replies Latest reply on Aug 1, 2016 3:00 PM by Kurt Fredericks

    HOW TO: Resize Viz on Window Resize (Javascript API)

    Kurt Fredericks

      Most of you probably know how to do this, but I did not see this posted here and I think most would agree this is a nice feature to have, especially if you plan to embed your Viz into a responsive Web layout. I saw some people suggest disposing the Viz, but that affects performance and introduces unnecessary load times.

       

      For those who are beginners to Javscript, below is a snippet you can use in your project.

       

      The idea here is that when the browser window changes sizes, the div element in which your Viz resides also changes sizes, and so should your Viz to fill out that resized div element.

       

      Your Viz will need to be a dashboard sheet type, set to automatic size. You can also use the clientWidth and clientHeight properties to assign your Viz size in your window.onload instructions.

       

      jQuery Version

      $(window).resize(function(){

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

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

          viz.setFrameSize(width, height);

      });

       

      Pure Javascript Version

      window.addEventListener('resize', resizeViz);

      function resizeViz() {

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

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

          viz.setFrameSize(width, height);

      }

       

      Notes

      Replace width or height variables with fixed values if you only want the viz to resize on one dimension.

       

      div = Div ID where your Viz will display

      viz = Viz object you have defined

       

      Also, this may not work in IE, but I'm not building for that browser.