Embedding Multiple Tableau Views in a Single Page

The Tableau JavaScript API is flexible and lets you embed multiple views, each as its own Viz object, in a single page. You can use this for multiple purposes:

  • Having a “single page application” that just loads the correct Tableau Server view
  • Loading multiple Views at the same time, allowing you to build a “dashboard of dashboards”
  • Have a second workbook that stays hidden until called (possibly triggered by an action on the first that a JS API event listener listens for)
  • Do smooth constant refreshes, by having two Viz objects of the same view, and moving one behind the other until it is has fully refreshed, then swapping it out

What do you need to make any of these work? At minimum, some mechanism for identifying which Viz object is which. In most cases, you’ll also want to track what should be visible at any given time, and what should be on top.

HTML/CSS has a concept called z-index which determines how elements in a document should stack, if they are occupying the same place on the screen. The highest number will be visible, and then visibility goes down in descending order. In the framework I’m presenting here, I manage visibility with three layers: (1) Visible Tableau Viz (2) cover_div (3) Hidden Tableau vizzes. The cover_div has a defined background-color and always stays in z-index 2, while other DIVs are shifted around. This keeps the “Tableau load” screens hidden as much as possible, particularly when there is already a viz on the page.

The other reason for the cover_div is that while the Viz object continues to exist even if the DIV that contains it has been set so that the CSS visibility property is “hidden”, the Viz object does not always load for the first time properly if the containing DIV has a “hidden” visibility. So the ideal framework will load any new Viz in a DIV that is “visible” but covered by another DIV with a higher z-index, rather than in a “visibility: hidden;” DIV.

There are three objects in the main scope that are used:

  • viz_info: Information necessary to load the Viz objects. This in an object so that the named keys can be used later as named keys in the other objects, to refer to the Viz objects themselves as well as the DIVs that contain them
  • vizzes: Stores the actual Viz objects
  • viz_div_z_index: Simple object to know what z_index DIVs should be set to. The actual changes to the z-index are enacted by the assign_viz_div_z_indexes function, so that it can be called by the onFirstInteractive callback function of each Viz whenever it is loaded or selected

The switch_dashboard function is where most of the work is done. It optimizes for efficiency, by determining whether a given Viz object has ever been created. If it already exists, it simply swaps it to the highest z-index level. If it is has not been created, it creates the necessary DIV and initializes the Viz object, all while it is hidden behind the existing loaded viz and/or the cover_div.

You can find the framework code on GitHub here. For those who aren’t used to GitHub, press the “Raw” button, then press CTRL-S so save the file to disk.




Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s