How to Embed a Power BI dashboard in a Web Page

# analytics# microsoft# tutorial# webdev

Alex Waiganjo

Introduction This a comprehensive guide on how to publish and display a Power BI dashboard...

Introduction

This a comprehensive guide on how to publish and display a Power BI dashboard in a web page.

Here are a couple of terms that will be mentioned in this article, feel free to skim through them.

Power BI is a Microsoft business intelligence platform that transforms data from multiple sources into interactive, visually rich insights for analysis and decision-making.

Power BI dashboard is a single-page, interactive canvas that provides a high-level view of key business metrics and insights, consolidating data from multiple sources into visual tiles.

Web Page is a document, commonly written in HTML (hypertext markup language) viewed in an Internet browser and can be accessed by entering a URL (uniform resource locator) address into a browser's address bar. It may contain text, graphics, and hyperlinks to other web pages and files.

Steps to Follow:

Download Power BI App
Login to your Power BI account.
Load some data in the app.
Create your Workspace in the Power BI Service.
Publish your dashboard into your workspace.
Embed and view the dashboard in the web page.

1. Download Power BI App

Use this link to get a local copy of the analytics app on your device. Power BI desktop app

2. Login to your Power BI Account.

Navigate to the top right corner of your Power BI Desktop.

Go to sign in, login with your work/organization email. Using your personal email may not be accepted, use any work/org emails. Interact with the features in the app just to get a glimpse of how to navigate and use most components. The app itself is straight forward, in case of any struggles using it, feel free to learn the tool in depth using Microsoft Learn Resources

3. Load Some data in the Power BI App

Get data from your preferred source, load/transform and connect it to Power BI. Create a simple visualization e.g., one that includes a bar chart, pie chart or a line graph with clear descriptions of the data visualized. Here is simple dashboard of what I mean.

4. Create your workspace in the Power BI Workspace.

To create the workspace, you'll need to have logged into Power BI desktop, remember to use your work/org email. Go to top right corner, click your username, and click "Power BI Service". Login and head over to Power BI Service. Here you will view existing workspaces from other people and get to create/edit your personal workspace(s) as well. See the current step in the image below.

5. Publish your dashboard into your workspace.

Use the dashboard you created earlier for this, go to publish(top center position) feature in your Power BI app. Click publish, save your changes and choose the personal workspace you created.

Now the dashboard and data will be uploaded into your preferred workspace.

Navigate to your workspace and locate the dashboard, click the dashboard and view it.

6. Embed and view the dashboard in the web page.

Now our dashboard and data is in the Power BI service and it can be viewed as well. We now want to view it in a web page.

Click > file(top left corner), go to embed report, then website or portal. You'll see a pop up with some options to customize your embedded link.

Copy the iframe element(HTML Visual embedding element). Create or use an existing html page. Feel free to use this html template.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Embeding a Power BI Dashboard in a Web Page</title>
    <style>
        p{
            text-align: center;
        }
    </style>
</head>
<body>
    <p>Embeding a Power BI Dashboard in a Web Page</p>
    <!-- Copy the iframe element content here -->

</body>
</html>

Save the html file. Remember to save the file using a .html extension. Locate your file and open it in a browser or open the file from your code editor using live server.

Here is the final output from the browser. Login in to view the dashboard.

We have successfully gone through the 6 steps and our dashboard can be viewed from a web page. In case of any issues or inquiries, feel free to drop them in the comments section below. Till next time, keep pushing beyond your limits!