You can embed a Tableau report into your web pages. If you haven't already done so, contact The Center for Data, Analytics and Reporting) (CeDAR) to learn how to get started with Tableau and create a Tableau report
Three notes if you plan to make a Tableau visualization public:
- Visualizations are often impossible for keyboard or screen reader users to navigate, and can present significant difficulties for users with low vision or colorblindness. Unless your particular visualization has been tested and shown to be resizable, keyboard navigable and screen reader compatible, you should assume that you need to include a link to a functionally equivalent presentation of the data as plain text or tables.
- Visitors will be browsing the web using a variety of different screen sizes. A report that's created with only a desktop layout will not provide a good user experience for someone viewing it on their phones. Tableau allows you to create variations of a dashboard in three different layouts: Desktop, Tablet, and Phone. For the best user experience, you should create all three iterations of your dashboards, and select the "Fit Width" or "Fit All" sizing options where available.
- You should provide a direct link to the report, either above an embed or instead of embedding it in the page. Visitors that open the report directly will be able to pinch-to-zoom the report on their devices instead of using a scroll bar.
Tableau Embed Instructions
Add the iframe
Go to the Tableau Server at tableau.princeton.edu
- Open the workbook you would like to embed within your SiteBuilder site.
- Click Share.
- Copy the second link - (it begins with
Log into your Drupal site as a Content Manager or Site Administrator:
- Create a "Page" by clicking Content - Add Content - Page.
- Add the title in the "Title" field.
- In the "Body" click source:
- Paste this iframe in the body: <iframe height="900" src="YOUR-TABLEAU-URL" width="1200"></iframe>
- Change YOUR-TABLEAU-URL to your full tableau url.
- Click Save.
Add the mobile (full-screen) link
- Download the above tablet/smartphone mobile icon to your computer (right-click with mouse and select download).
- Upload the downloaded mobile icon to your site: navigate to Content, Add media, Image.
- Edit the page with your tableau again and insert the mobile icon above the Tableau report, by selecting the Media Browser icon in the WYSIWYG.
- Next to or below the mobile icon that you added to the page, add a link that says
Open in new window
(recommended for mobile)
and set the link's URL to your report's public URL (found by clicking its "share" icon, found at the bottom of the report).