Power bi visuals embed using API in external site

[pbidaxlearner]

Hi Team,

I need help with power bi embeding using only semantic model and service principle Name for security , need to use different visual than power bi in external site, any suggestions much appreciated.

[v-sdhruv]

Hi @pbidaxlearner ,

Using service principals and semantic models is ideal for secure, scalable embedding in enterprise-grade applications.Ensure the service principal has at least viewer or contributor access to the workspace hosting the semantic model. You can enforce RLS by passing the effective identity of the user when generating embed tokens. This ensures users only see data they’re authorized to view.

Refer- Security in Power BI embedded analytics - Power BI | Microsoft Learn

If you want to render visuals using a different visualization library (e.g., D3.js, Chart.js, Plotly), consider this approach:

1.Query Semantic Model via XMLA or REST API:

Use the XMLA endpoint to query the semantic model directly.

Extract the data using PowerShell, Azure Logic Apps, or custom client apps. 

Semantic model connectivity and management with the XMLA endpoint in Power BI - Microsoft Fabric | M...

Automate Power BI Premium workspace and semantic model tasks with service principals - Microsoft Fab...

I hope this helps!

[pbidaxlearner]

Hi @v-sdhruv ,

Thank you so much for reply, can you please tell in simple steps my plan is to get data from semantic model -(API) then how to connect to charts > (e.g., D3.js, Chart.js, Plotly)-then external website. 

Thank you

[v-sdhruv · Accepted solution]

Hi @pbidaxlearner ,

To retrieve data from a Power BI semantic model using an API,

Register an Azure AD App and configure it as a service principal then assign it the necessary read permissions.

Use Microsoft Entra ID for authentication.
List available semantic model using

GET https://api.fabric.microsoft.com/v1/workspaces/{workspaceId}/semanticModels

(Requires viewer access to the workspace also ensure the service principal has ruild or read permissions on the semantic model)

Once you've extracted data from the Power BI semantic model , convert it into a format your charting library understands—usually JSON 
Eg- JSON 

[
  { "label": "Sales", "value": 120 },
  { "label": "Marketing", "value": 80 },
  { "label": "Development", "value": 150 }
]

 Choose your charting library-

<canvas id="myChart"></canvas>
https://cdn.jsdelivr.net/npm/chart.js
<script>
  const data = [
    { label: "Sales", value: 120 },
    { label: "Marketing", value: 80 },
    { label: "Development", value: 150 }
  ];

  const ctx = document.getElementById('myChart').getContext('2d');
  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: data.map(d => d.label),
      datasets: [{
        label: 'Department Budget',
        data: data.map(d => d.value),
        backgroundColor: 'rgba(75, 192, 192, 0.6)'
      }]
    }
  });
</script>

Refer- Chart.js Samples | Chart.js
Plotly Python Graphing Library

Then you can embed this in your external webpage.

Hope this helps!

[v-sdhruv]

Hi @pbidaxlearner ,

I hope the information provided above assists you in resolving the issue. If you have any additional questions, please feel free to reach out.

Thnak You