![]() ![]() 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. Use break-point detection to reload the Tableau Viz using a different Device Layout once the available space would be better served by a Viz in different proportions.Use CSS3 transform-scale to maximize the fit of the chosen Device Layout to the available space on the page.Use CSS / JavaScript to detect the proportions of the area allocated for the Tableau Viz, then manually control which Tableau Dashboard Device Layout is loaded.Use Device Designer to specify several Dashboard layouts in different proportions.Given all these capabilities, what is the best way to get our Tableau content to look its best in a page, regardless of the size or device it loads on? Summary of Best Practices Modern web browsers can actually scale up or down whatever is in a div without needing the content of the div to change. Web designers regularly use these features to make page elements respond to changes in the viewing area (hence Responsive Design). However, when a Tableau viz is embedded into another page, it lives in a regular HTML div which can be styled using CSS3 and changed dynamically using JavaScript. If different layouts exist, Tableau Server will automatically pick a layout based on the view space dimensions it detects. These map well to the situations where you are looking at Tableau Server directly or in the Tableau phone app, and the Tableau viz is assumed to take the full width of the viewing area (and often most of the height). It allows you to specify three different layouts, which are called in the system Desktop, Tablet, and Phone. Tableau recognizes the need for Responsive Design with a feature called Device Designer. So let’s think a little more deeply about proportions and how we can best fit our embedded vizes given the tools available, and how to tie them all together to give the best possible experience to the end user, with the least effort for our Tableau viz designers. In this situation, the view we pick from Tableau really needs to fill the most space of the area it has been allotted on the page. When embedding a Tableau viz into another application, the actual “view area” for the Tableau viz is just one component of a page. The work to make a single page look as good as possible on all those displays often falls under the heading of “Responsive Design”. Web sites have to work on an incredibly wide variety of displays these days. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |