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 in Power BI by surbhi
• 3,810 points
772 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>
answered Feb 22 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,350 points
1,074 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,350 points
442 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,350 points
349 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,350 points
611 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
663 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
1,971 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
709 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,350 points
869 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 in Power BI by surbhi
• 3,810 points
80 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 in Power BI by surbhi
• 3,810 points
908 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