Embedding Tableau in Streamlit. How to view your Tableau dashboard on... | by Okoh Anita | Towards Data Science

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.
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
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
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 stimport streamlit.components.v1 as componentsdef 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.
Clip ID: 493059591
Delivery:application/vnd.vimeo.dash+json
Embed Size:692×433 
Separate AV:true
Dropped Frames:0 / 0 - 0
Playhead / Buffer:0 / 0 / 0
Bandwidth:0(0 Kbps0 Kbps)
You can also play around with the above app here and find source code here.
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.
Want to be informed on my next project ideas? Fill this form to get notified