WiscWeb - Embedding Tableau visualizations

This document will walk you through the process of adding a Tableau visualization to your WiscWeb site.

Limitations

Private Tableaus

Tableau visualizations that require a login cannot be embedded (permissions must be set to "public.")

Example: Visualizations from tableau.wisconsin.edu tend to be private. These will not be able to be embedded.

Responsiveness

Tableau visualizations are known to extend beyond the normal screen width of a web page, which in turn will create a need to scroll left and right to view the entire content of the page.

This will be especially noticeable in mobile and tablet browser windows and can result in usability and accessibility concerns. This issue exists through the creation of the data visualization table, and its display cannot be customized through the WiscWeb embed.

Customizations and content editing

WiscWeb will not customize Tableau displays in a child theme. Tableau content building, maintenance, and troubleshooting are not included in the service and are the responsibility of the site owners and editors.

Getting started

Embedding a Tableau visualization in a page

  1. Login to Tableau

  2. Locate your data visualization

  3. In the top right corner of the screen, click on the Share icon

    The Share icon appears after the Subscribe option in the right corner settings.

  4. Copy the sharing link from the pop-up window (do not use the Embed code option as it will not work)

    Tableau offers a copy button for the URL that appears just after the Share URL.

  5. Navigate to the WiscWeb page that you'd like to add the visualization to

  6. Paste the share link into a Text Block or the Embed Content page element

  7. Publish your page

Resizing your visualization

The oEmbed plugin simply places your visualization in the page. It is not a vehicle for augmenting its display. Therefore, much of the display maintenance will have to occur in Tableau. This is especially important to consider if your embedded visualization requires either vertical or horizontal scrolling. The best way to prevent this is to resize the visualization sizing (width and height) in Tableau. The box will always display as 100% width in WiscWeb.

Accessibility and usability barriers

If Tableau is used on a WiscWeb site, editors are encouraged to offer a text-only version of the page to their customers via a link at the top of the page (before the visualization) and/or to include a statement regarding who to contact for a text version of the content. Site owners are responsible for building visualizations and accommodating users that are navigating the site with screen readers.

Additionally, WiscWeb recommends the following accessibility considerations per the WCAG 2.0 AA guidelines:

  • Readable font types and sizes
  • Color schemes that pass contrast (high contrast colors)

Tableau documents their own recommendations for improving accessibility of data visualizations on their website:

Also, the Center for User Experience has documented accessibility information in Tableau Accessibility and Usability Information.

Troubleshooting

  • It may take a moment for your page to load when a visualization is embedded on it. 

  • Adding multiple visualizations to a page is not recommended as it could delay page load.

  • If your visualization requires users to scroll both vertically and horizontally, this is because Tableau's charts and graphs are not responsive. They will not resize to fit the window. 

  • Only publicly accessible visualizations can be embedded. In other words, if the average user cannot see the visualization when navigating to the Tableau URL, then they won't work. 

Resources/help



Keywords:
Tableau, visualizations, data, table, graph, charts, interactive, dataviz, dashboard, worksheets, create, embed, add, accessibility, limitations 
Doc ID:
100876
Owned by:
Jenna K. in WiscWeb
Created:
2020-04-20
Updated:
2024-09-06
Sites:
DoIT Help Desk, WiscWeb