Power BI Embedded not displaying visuals

Rich2852 · ‎06-13-2017

Hi,

I've successfully connected to postman using my client id and token to generate an oauth2 header request. I am able to display json data from the power bi api. The returned scope shows that my permissions are:

Content.Create Dashboard.Read.All Data.Alter_Any Dataset.Read.All Dataset.ReadWrite.All Group.Read Group.Read.All Metadata.View_Any Report.Read.All Report.ReadWrite.All

I then went on to configure an oauth2 request to the api in swift 3 (iOS). The connection was successful however when i try and access the embed url and load it into a webview the most i can display is a loading gif, or the default power bi dashboard loading icon.

To check this wasn't just an error in swift I decided to use the example at: https://microsoft.github.io/PowerBI-JavaScript/demo/

I tried displaying a dashboard, report and tile. In the dashboard and tile view nothing is displayed except a loading gif. However the interesting thing is that the log on the report displays that there is a permission problem

This is odd as the app has full permissions to everything:

So what is going on. Why can I not get any visuals to display using the power bi api?

Update: when i ran the inspector on the report in the ios application i get this error in the web browser console:

Eric_Zhang · ‎06-14-2017

@Rich2852 wrote:

Hi,

I've successfully connected to postman using my client id and token to generate an oauth2 header request. I am able to display json data from the power bi api. The returned scope shows that my permissions are:

Content.Create Dashboard.Read.All Data.Alter_Any Dataset.Read.All Dataset.ReadWrite.All Group.Read Group.Read.All Metadata.View_Any Report.Read.All Report.ReadWrite.All

I then went on to configure an oauth2 request to the api in swift 3 (iOS). The connection was successful however when i try and access the embed url and load it into a webview the most i can display is a loading gif, or the default power bi dashboard loading icon.

To check this wasn't just an error in swift I decided to use the example at: https://microsoft.github.io/PowerBI-JavaScript/demo/

I tried displaying a dashboard, report and tile. In the dashboard and tile view nothing is displayed except a loading gif. However the interesting thing is that the log on the report displays that there is a permission problem

@Rich2852

So when embedding a report, you got expected output? The demo link only works for embedding a report, otherwise you got error like

"message": "LoadReportFailed",
"detailedMessage": "GetReportFailed",
"technicalDetails": {
"requestId": "c8810894-2e1f-ba18-b642-94aa3f731cf8"
},
"errorCode": "NotAuthorized"

To test embedding a dashboard or tile, you can use below sample. Save those html code in a .html file and replace the IDs and tokens with your own. Then open it in Chrome. To Debug, press F12 in chrome and watch the "Console" tab.

<html>

 <script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/powerbi-client/dist/powerbi.js"></script>
 <script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/jquery/dist/jquery.js"></script>  
 

<script type="text/javascript">
window.onload = function () {   

var embedConfiguration = {
    type: 'tile',
    accessToken: 'yourTokenHere',
    id: '50de3c3a-2e8c-49bd-ada4-18d0b1e19415', // your tile id here
    embedUrl: 'https://app.powerbi.com/embed?dashboardId=YourDASHBORADIDHERE&tileId=50de3c3a-2e8c-49bd-ada4-18d0b1e19415',
	settings:{
	 
	}

}; 
 

var $reportContainer = $('#reportContainer');
 
var report = powerbi.embed($reportContainer.get(0), embedConfiguration);
   

}
</script>

<div id="reportContainer" powerbi-settings-nav-content-pane-enabled="false"   powerbi-settings-filter-pane-enabled="true"></div>

</html>

<html>

<script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/jquery/dist/jquery.js"></script>
<script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/powerbi-client/dist/powerbi.js"></script>

<script type="text/javascript">
window.onload = function () {
 
var embedConfiguration = {
    type: 'dashboard', //  dashboard
    accessToken: 'YOURTOKENHERE',
//change report embed url to dashboard embed url
    embedUrl: 'https://app.powerbi.com/dashboardEmbed?dashboardId=fc9d5562-dc46-4624-b36a-862d6729b982'  
}; 

var $reportContainer = $('#dashboardContainer');
 
var report = powerbi.embed($reportContainer.get(0), embedConfiguration);
 
}
 
 
</script> 
<div id="dashboardContainer"></div>

</html>

Rich2852 · ‎06-15-2017

Thanks for the reply. After much much more testing I can get the reports and dashboards to show but only in web browsers. If I use the exact same code in ios Swift It will not render.

The tile code however will render if both web browser and ios WKWebview.

Tiles are nice but its reports and dashboards that I'm truly after. The dashboards just appear as a grey background and reports display " Cannot load content"

Eric_Zhang · ‎06-15-2017

@Rich2852 wrote:

Thanks for the reply. After much much more testing I can get the reports and dashboards to show but only in web browsers. If I use the exact same code in ios Swift It will not render.

The tile code however will render if both web browser and ios WKWebview.

Tiles are nice but its reports and dashboards that I'm truly after. The dashboards just appear as a grey background and reports display " Cannot load content"

@Rich2852

Then I'd doubt it might be the compatible issue. When viewing dashboards/reports in mobile device, use Power BI Mobile.

Rich2852 · ‎06-13-2017

As i am aware there is an issue with Power BI trial users being able to successfully share content as stated here:

https://community.powerbi.com/t5/Service/Sharing-Dashboard-never-load/m-p/191929#M26038

I have purchased two Power BI pro users and removed the trials and the problem still exists

Power BI Embedded not displaying visuals

Helpful resources

Microsoft Fabric Learn Together

Power BI Monthly Update - April 2024

Fabric Community Update - April 2024