Embedding Tableau in Streamlit
By: Okoh Anita
Tags: Data Visualization, Tableau, Streamlit

Embedding Tableau in Streamlit

Image by Markus Spiske on Unsplash

As 2020 draws to its ends (hopefully along with its chaos), I took a step back to reminisce about all the tools/skills I have picked up this year and all the tools I really didn’t use so much this year. One tool I really didn’t use so much is Tableau.

Tableau is a powerful data visualization tool that creates visually-appealing dashboards.

I decided to find a dataset to analyze and visualize on Tableau.

One tool that I picked up this year and I have used quite frequently is Streamlit.

Streamlit is such an awesome tool for data scientists.

Instead of visualizing data on Tableau alone, I decided to embed the Tableau dashboard into streamlit in order to interact with the dashboard on Streamlit.

Below are the 3 steps I took in order to made this possible

N.B: In order to follow along, make sure you have a tableau dashboard or visualization that is already saved on the tableau public website. You can find out how to save your visualization on Tableau Public here. You should also have a basic knowledge of Streamlit. You can find its documentation here.

Copy the Tableau Public Dashboard embedded code

On your Tableau Public Dashboard, locate the share button at the bottom right of the dashboard and check on it. You get a pop-up box that looks like this

Screenshot by Author

Copy the code in the Embed Code section.

2. Use Streamlit Components

This year, Streamlit introduced streamlit components which is a good method to render HTML, CSS, and Javascript output. Learn more about streamlit components here.

After importing streamlit and streamlit components, input the copied embed code as a docstring argument into the method: streamlit.components.v1.html()

This is what it looks like in code

import streamlit as st

import streamlit.components.v1 as components def main(): html_temp = """your embedded code"""

components.html(html_temp) if __name__ == "__main__":

main()

The components.v1.html() also has other argument options that can be used to customize the width and height of the dashboard displayed. You may need to utilize these options especially to display the full size of a tableau dashboard.

The Tableau embedding did not seem to work on Streamlit iframes. This is why I didn’t use the streamlit.components.v1.iframe() method

3. Deploy the Streamlit app to a Server

One of the things I discovered while working on this project is that the Tableau dashboard on streamlit is rendered as an image when locally host until the app is deployed to a server. This means that the dashboard displayed will not be interactive unless it is publicly hosted either using Heroku or other hosting services.

You can find out how to deploy streamlit apps to Heroku here

Below is a Video Demo of my visualization results on Streamlit.

Video by Author. Hosted on Vimeo

You can also play around with the above app here and find source code here.

In retrospect

The most difficult part of this project was figuring out my dashboard would only be interactive if the app is deployed on a server. This has to do with the Javascript API from Tableau which was outputting an error in the localhost and returning a static dashboard.