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>