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 ...
Interesting Links
Need Help
Tips and Tricks
Tutorial Requests
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>

     

    • Anonymous's avatar
      Anonymous
      Not applicable
      9 years ago

      Eric_Zhang

       

      Thanks for reply.

      This is what we are trying get 401 response

      <html>

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

      <script type="text/javascript">
      window.onload = function () {
       
      var embedConfiguration = {
          type: 'dashboard', // change report to dashboard
          accessToken: '__________________',
      //change report embed url to dashboard embed url
          embedUrl: 'https://app.powerbi.com/dashboardEmbed?dashboardId=a3ee4a0b-7b09-42dc-977a-27f749377088'  
      };

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

      }

      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> 

       

      Please suggest were we are going wrong.

      • Eric_Zhang's avatar
        Eric_Zhang
        Microsoft Employee
        9 years ago

        Anonymous

        401 indicates a unauthorized error, is the token in your case valid? Below sample actually works. For testing purpose, you can get a valid token in a quick way. Just replace the token and dashboardid in your case.

         

        <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', // change report to dashboard
    accessToken: 'yourTokenHere',
//change report embed url to dashboard embed url
    embedUrl: 'https://app.powerbi.com/dashboardEmbed?dashboardId=yourdashboardid'  
}; 

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

</html>