![]() Once you define those two things, you also assign them to these variables like this code, taken from a page that actually embeds a Viz: postResizeVizOptionsObject = localVizOptions // localVizOptions is already declared as an object with different properties ![]() In that page, you will have an options object, and then some function which encapsulates creating the Viz object using that options object. These variables will be used in whatever page you actually load a Viz object. Variables to SetĪfter the breakpoints, there is a set of variables which help tie the library to your page and other Tableau JS API code. The tableauDeviceName property matches up the strings for the “device” property that can be used in the JS API Viz options object. Basically, you can tailor the ratio breakpoints to give yourself some margin-of-error - your web design may work better keeping the Viz more rectangular, or in a mobile situation you may want to keep it more square or narrow unless it’s absolutely a very wide display space. There is some commenting about the actual common sizes of physical devices and also the “realized” pixels vs actual (much more below). It is used to define different dimensions and values used for loading Vizes into the page (and adjusting their iframes) at the right size / ratio. The very first thing in the library is a data structure called ratioBreakpoints. Let’s walk through how it works: ratioBreakpoints When it’s all set up right, the process above happens on the first load of the Viz and also any time the user resizes the page in a way that changes the available space ratio enough. Scale the Viz to fit the actual available space using the CSS transform / scale properties.Load the Viz using a height and width of the best matching ratio.Find the Ratio that will best fit the shape of the space available for the Tableau Viz.The basic process the library goes through is: You will still need to design the Dashboards appropriately in Tableau Desktop, using Device Designer in a specific and targeted way – more on that below. The library handles everything around the HTML / CSS / JS side of making your Tableau Viz objects behave responsively within the page. On GitHub, there is a file called responsive_scaling_tableau.js (this file, or a very slight variant of it, is what is used on ). ![]() ![]() There’s a whole article down below explaining the how and why, but you probably just want to get things moving, so I’ll start with the end in mind. The Code Library – responsive_scaling_tableau.js Now let’s dig into how to make all of this happen.
0 Comments
Leave a Reply. |