PowerBi embed dashboard using JavaScript

I created a dashboard in PowerBi that I can load in a .cs page using the sample project but I like to try and use the JavaScript API. I tried using the project [GitHub Sample Project https://github.com/Microsoft/PowerBI-JavaScript] But I am getting error about the models is there a different function I would be using? I belive that I have all of the js library installed but the dashboard will not loaded in my html page

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.3/es6-shim.js"></script>
    <script src="scripts/step_interact.js"></script>
    <script src="scripts/step_embed.js"></script>
    <script src="scripts/step_authorize.js"></script>
    <script src="/bower_components/powerbi-client/dist/powerbi.js"></script>
    <script>

    $(document).ready(function () {

        // Get models. models contains enums that can be used.
        var models = window['powerbi-client'].models;

        var embedConfiguration = {
            type: 'dashboard',
            id: 'dashboardID',
            embedUrl: 'https://app.powerbi.com/reportEmbed',
            tokenType: models.TokenType.Aad,
            accessToken: 'TokenString'
        };

        var $dashboardContainer = $('#embedContainer');
        var dashboard = powerbi.embed($dashboardContainer.get(0), embedConfiguration);
    });

    </script>
    </head >
            <body>
                <div id="embedContainer"></div>         
</body >
</html >

标签： javascript powerbi powerbi-embedded

2条回答

Melony?

2楼-- · 2019-05-18 18:21

A few things:

From looking at powerbi.js file you're referencing to, try to change the following line: var models = window['powerbi-client'].models to var models = window.powerbi.models
Make sure to use the correct embedURL, you're using /reportEmbed when you should be using /dashboardEmbed.

eventually, your code should look something like this:

$(document).ready(function () {

        // Get models. models contains enums that can be used.
        var models = powerbi.models; // or window.powerbi.models

        var embedConfiguration = {
            type: 'dashboard',
            id: 'dashboardID',
            embedUrl: 'https://app.powerbi.com/dashboardEmbed',
            tokenType: models.TokenType.Aad,
            accessToken: 'TokenString'
        };

        var $dashboardContainer = $('#embedContainer');
        var dashboard = powerbi.embed($dashboardContainer.get(0), embedConfiguration);
    });

0人赞添加讨论(0) 举报

Rolldiameter

3楼-- · 2019-05-18 18:41

You can try this code for displaying PowerBI dashboard using Javascript. All, you will need is valid access token and dashboardId.

<html>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
  <script src="https://raw.githubusercontent.com/Microsoft/PowerBI-JavaScript/master/dist/powerbi.js"></script>
  <script type="text/javascript">
           window.onload = function () {
           var models = window['powerbi-client'].models;
           var embedConfiguration = {
               type: 'dashboard',
               accessToken: {{access token}},
               embedUrl: 'https://app.powerbi.com/dashboardEmbed?dashboardId={{dashboard id})'
           };  

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

       }
   </script>
   <div id="dashboardContainer"></div>
</html>

0人赞添加讨论(0) 举报

PowerBi embed dashboard using JavaScript

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间