PowerBI dashboards and streamlit

Using Streamlit
1

I created a dashboard on PowerBI and I wanted to integrate it into a streamlit app :frowning_face: any help, please!

2

Hi,

This is really easy, provided you published the Power BI report to the Power BI online service, so it’s publicly accessible. Just copy the published link URL and then use st.components.html to embed the report. Equally you can use st.markdown with the unsafe_allow_html=True flag.

If your report is not public, the only way to do this is to use a Power BI Premium workspace to publish into, which will secure the report and provide it with dedicated scaling resources, and then, along with the Power BI Embedded SDKs (e.g. for Python or JS), you can present your report in a web client application. There is plenty of content available on how to do that. Check out some videos here: https://www.youtube.com/c/MSPowerBI/search?query=embedded.

HTH,
Arvindra

3 Likes
3

Thank you so much

4

I am trying to embed it but its not opening any url be it https://www.google.com or any tableau public url.

    # tableau_url = "https://public.tableau.com/views/complaint_customer/Dashboard1?:language=en-US&:sid=&:redirect=auth&:display_count=n&:origin=viz_share_link"
    st.components.v1.iframe("https://www.google.com/?embed=True", width = 500, height = 200, scrolling = True)
    # Embed the Tableau dashboard
    # components.iframe(src=tableau_url, width=1000, height=700, scrolling=True)

It’s showing error.

image
image792×610 14.2 KB

5

Some web sites don’t want to be embedded. www.google.com seems to be one of them. Others like https://www.example.net work. I don’t have a Power BI report to try.

6

Tried with tableau public reports are well got the same reply/response/output. Is there any fix or workaround for that to show those reports in the streamlit? @Goyo

7

Public tableau reports give you an “Embed code” that you can pass to components.v1.html.

import streamlit as st

HTML = "<div class='tableauPlaceholer' id='viz1732294690380' style='position: relative'><noscript><a href='#'><img alt='Dashboard 1 ' src='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;co&#47;complaint_customer&#47;Dashboard1&#47;1_rss.png' style='border: none' /></a></noscript><object class='tableauViz'  style='display:none;'><param name='host_url' value='https%3A%2F%2Fpublic.tableau.com%2F' /> <param name='embed_code_version' value='3' /> <param name='site_root' value='' /><param name='name' value='complaint_customer&#47;Dashboard1' /><param name='tabs' value='no' /><param name='toolbar' value='yes' /><param name='static_image' value='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;co&#47;complaint_customer&#47;Dashboard1&#47;1.png' /> <param name='animate_transition' value='yes' /><param name='display_static_image' value='yes' /><param name='display_spinner' value='yes' /><param name='display_overlay' value='yes' /><param name='display_count' value='yes' /><param name='language' value='en-US' /></object></div>                <script type='text/javascript'>                    var divElement = document.getElementById('viz1732294690380');                    var vizElement = divElement.getElementsByTagName('object')[0];                    if ( divElement.offsetWidth > 800 ) { vizElement.style.width='1200px';vizElement.style.height='727px';} else if ( divElement.offsetWidth > 500 ) { vizElement.style.width='1200px';vizElement.style.height='727px';} else { vizElement.style.width='100%';vizElement.style.height='2577px';}                     var scriptElement = document.createElement('script');                    scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';                    vizElement.parentNode.insertBefore(scriptElement, vizElement);                </script>"
st.set_page_config(layout="wide")
st.components.v1.html(HTML, width=1200, height=750)
8

To integrate a Power BI dashboard into a Streamlit app, you can use the Power BI Embedded service. First, you’ll need to publish your Power BI report to the Power BI service and get the embed link or embed code. In your Streamlit app, use the st.components.v1 module to embed the Power BI report by passing the embed code as an iframe. This allows you to seamlessly display your Power BI dashboards within your Streamlit app. Let me know if you need help with the implementation!

9

I could do that without publishing a public report using iframe:

import streamlit.components.v1 as components

components.iframe(
    "https://app.fabric.microsoft.com/reportEmbed?reportId=xxx&autoAuth=true&ctid=yyyy",
    height=550
)

You’d need to sign in, but the report will then show.