Forum Discussion

Anonymous's avatar
Anonymous
Not applicable
9 years ago

Integrate Power Bi DASHBOARD with AngularJS not REPORT

Hello All,

 

I would like to know whether can we integrate power bi DASHBOARD into angualrjs web application.

Not the REPORT as shown here in this https://github.com/Microsoft/PowerBI-Angular.

I found something here https://powerbi.microsoft.com/en-us/documentation/powerbi-developer-integrate-dashboard/.

I dont get what exactly they have explained.

Are they integrating Report or DASHBOAD?

Because in dashboard there are some very good features but not in report.when we publish to the web we can only publish a report not a dashboard.Here we cant customize the report as we do in DASHBOARD like moving tiles, removing the tiles that we dont want and Q&A. 

 

Please suggest me.

 

Mohan.V

Interesting Links
Need Help
Tips and Tricks
Tutorial Requests

6 Replies

  • Eric_Zhang's avatar
    Eric_Zhang
    Microsoft Employee
    9 years ago

    Anonymous

    It is talking about integrating DASHBOARD.

     

    I don't have much expertise on Angualrjs. I just modify the embed type and embed url from a sample of embedding report and it works. So to embed a DASHBOARD in Angualrjs, I think you can still follow the report Angualrjs sample in your post with the similar modification.

     

    <html>

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

<script type="text/javascript">
window.onload = function () {
 
var embedConfiguration = {
    type: 'dashboard', // change report to dashboard
    accessToken: 'eyJ0eXAiOiYOUR-TOKEN-HERE-pgVRA',
    //change report embed url to dashboard embed url
    embedUrl: 'https://app.powerbi.com/dashboardEmbed?dashboardId=f1f5155b-c6e2-4147-991b-28d914927d05'  
}; 

var $reportContainer = $('#dashboardContainer');
 
var report = powerbi.embed($reportContainer.get(0), embedConfiguration);
/*
			report.on("dataSelected", function (event) {
                var data = event.detail;
                console.log(JSON.stringify(data));
				alert(JSON.stringify(data));
            });
			*/
}

function reloadreport(){

var element = $('#dashboardContainer');

alert(element);
var report = powerbi.get(element);

report.reload().catch(error => {console.log(error)  });
};
</script> 
<div id="dashboardContainer"></div>

</html>

     

     

    • Anonymous's avatar
      Anonymous
      Not applicable
      9 years ago

      Eric_Zhang

      Thanks for reply

       

      the script that u have mentioned 

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

      is returning 404. we have changed the access token and embed the url but unble to see any output.

      Please suggest .

      • Eric_Zhang's avatar
        Eric_Zhang
        Microsoft Employee
        9 years ago

        Anonymous

        Download the powerbi.js and put it in the same folder of the html page and change the lines to

         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>  
 <script src="powerbi.js"></script>

         

  • ervinaymishra's avatar
    ervinaymishra
    Frequent Visitor
    8 years ago

    Hi All,

               I am also facing problem when integrationg dashboard to angularjs application.While embeding in frame it display blank page but when integrating reports its working fine.Anyone know the solution please help with this.

    The embed url and blank page screenshot attached