Hide the Power BI logo during visualization load

0 votes

Microsoft have announced it is possible to turn off the loading image shown when a report is loading. How do I achieve this?

Feb 22, 2022 in Power BI by surbhi
• 3,810 points
2,338 views

1 answer to this question.

0 votes

First, replace the Power BI logo with a gif of your choice. It can be included in a div element. This element will encroach on the report's div element. The HTML code is as follows:

<div id="container">
     <div id="overlay">
         <img id="spinner" alt="Alternate Text" src="image/giphy.gif"/>
     </div>
     <div id="embedContainer" style="height: 600px; width: 100%; max-width: 1400px;">
     </div>
 </div> 

Next, make changes in the JavaScript Code. So you final JavaScript embedding code will be:

<script type="text/javascript">
    // Read embed token
    var embedToken = "<% =this.embedToken %>";
    // Read embed URL
    var embedUrl = "<% = this.embedUrl %>";
        // Read report Id
        var reportId = "<% = this.reportId %>";

    // Get models (models contains enums)
    var models = window['powerbi-client'].models;

    // Embed configuration is used to describe what and how to embed
    // This object is used when calling powerbi.embed
    // It can also include settings and options such as filters
    var config = {
        type: 'report',
        tokenType: models.TokenType.Embed,
        accessToken: embedToken,
        embedUrl: embedUrl,
        id: reportId,
        settings: {
            filterPaneEnabled: true,
            navContentPaneEnabled: false
        }
    };

    $("#embedContainer").css("visibility", "hidden");

    // Get a reference to the embedded report HTML element
    var reportContainer = $('#embedContainer')[0];


    // Embed the report within the div element
    var report = powerbi.embed(reportContainer, config);

    report.on("loaded", function (event) {
        $("#overlay").hide();
        $("#embedContainer").css("visibility", "visible");

        report.off("loaded");

    })


</script>

You can also add CSS to align you gif with your report:

<style>
        #container{
            position:absolute;
            width: 1400px;
            height:600px;
        }

        #overlay{
            position:absolute;
            width:inherit;
            height:inherit;
        }

        #spinner{
            display: block;
            margin-top:10%;
            margin-left: auto;
            margin-right: auto;
            width:10%;
            height: 10%;

        }
</style>

Unlock the Power of Data Visualization with Our Comprehensive Power BI Course!

answered Feb 22, 2022 by surbhi
• 3,810 points

Related Questions In Power BI

0 votes
1 answer

Real time power bi dashboard update without refreshing the browser

The only solution possible by code - ...READ MORE

answered Sep 28, 2018 in Power BI by Kalgi
• 52,360 points
1,686 views
0 votes
1 answer

Can I publish the Power BI dashboards directly to client’s website?

You can Use Publish to web feature. ...READ MORE

answered Sep 28, 2018 in Power BI by Kalgi
• 52,360 points
1,110 views
0 votes
1 answer

What are the components I need to excel to become a pro in power BI

Having knowledge about these topics is a must.  Power ...READ MORE

answered Oct 8, 2018 in Power BI by Kalgi
• 52,360 points
724 views
0 votes
1 answer

How do I format the KPI in Power BI

format the KPI by selecting the paint ...READ MORE

answered Oct 9, 2018 in Power BI by Kalgi
• 52,360 points
1,061 views
0 votes
1 answer

Displaying Table Schema using Power BI with Azure IoT Hub

Answering your first question, Event Hubs are ...READ MORE

answered Aug 1, 2018 in IoT (Internet of Things) by nirvana
• 3,130 points
1,091 views
+1 vote
1 answer

Unable to install connector for Power Bi and PostgreSQL

I think the problem is not at ...READ MORE

answered Aug 22, 2018 in Power BI by nirvana
• 3,130 points
2,539 views
+2 votes
2 answers

Migrate power bi collection to power bi embedded

I agree with Kalgi, this method is ...READ MORE

answered Oct 11, 2018 in Power BI by Hannah
• 18,570 points
1,243 views
+1 vote
1 answer

Connect power bi desktop to dataset and create custom reports

Yes using Power BI REST API to ...READ MORE

answered Sep 18, 2018 in Power BI by Kalgi
• 52,360 points
1,509 views
0 votes
1 answer

Getting MS Power BI error when reading hive table through MapR drill odbc driver

The answer is that Microsoft Power BI ...READ MORE

answered Feb 22, 2022 in Power BI by surbhi
• 3,810 points
577 views
0 votes
1 answer

How to Get Power BI Embedded Report's Filters' Options

The getFilters function returns the current filters ...READ MORE

answered Feb 22, 2022 in Power BI by surbhi
• 3,810 points
2,440 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP