DEV Community

Cover image for A comprehensive guide to Publishing And Embedding Power BI Reports on Website with iFrames.
Joseous Ng'ash
Joseous Ng'ash

Posted on

A comprehensive guide to Publishing And Embedding Power BI Reports on Website with iFrames.

What exactly is Microsoft Power BI?

In simple and understandable terms, it refers to business analytic tool by Microsoft that helps you visualize data, create reports and share insights.

Key components

  • Power BI Desktop – Build reports on your computer.
  • Power BI Mobile – View reports on phones/tablets.
  • Power BI Service – Cloud platform for sharing and collaboration.

Why Use Power BI?

  • It provides real time analytics
  • It is easy to share and embed
  • It can connect to multiple data sources
  • Drag and Drop dashboards

Power BI Publishing

Power BI publishing means moving your report from Power BI Desktop to Power BI Service(cloud) so others on the same team can access it.

Power BI Report Publishing Overview
Publishing Overview

Highlight Of Steps Involved In Power BI Report Publishing

  • Create report in Power BI Desktop
  • Save your report
  • Click publish on Power BI desktop
  • Sign in to publish
  • Choose workspace
  • Upload to Power BI Service
  • Access via browser

Detailed Power BI Publishing steps

STEP ONE

Create Report In Power BI Desktop
To create Power BI reports, you have to import data, clean and transform the data then build visuals.
Importing Data; Data can be imported from different sources, eg excel as flat file or excel workbook, different database, SQL server.
One way to import data, open Power BI desktop and it will open to home page where you have different options to select from to get data.
Home Panel with different data sources

home panel

Another way to import data to create Power BI reports, click on Get Data on the far left on navigation panel/home panel and click on your preferred data source or depending on where the data you are working with is saved.

Get Data Option to import data to power BI desktop

get data panel

After selecting your preferred data source, click connect located on the bottom right of Get Data navigation panel and wait for the data to be connected from source then click the connected table to select and preview the data.
In this demo I used an Excel Workbook as my data source.

What to expect after connecting to your preferred data source, my table is called Sheet1 containing detailed imported data

table preview

Data Cleaning And Transformation(Power Query)
Raw data is often messy -- Missing Values, Inconsistent format, Duplicates. This process of data cleaning and transforming ensures the report is accurate and reliable. In simple terms data cleaning and transforming in Microsoft power BI is the process of preparing raw data so it becomes accurate, consistent, and ready for analysis.

Data Cleaning Involves

  • Removing Duplicates: This ensures each record is unique and avoid double counting during analysis. To start data cleaning, on the navigator on the bottom right click on Transform option which will take you direct to Power Query What is Power Query: It is a tool used to connect, clean, transform, and load data into Power BI for analysis.

Transform Option On Navigator

Transform Option

Power Query Interface

Power Query Interface

Main sections in Power Query
1️⃣ Ribbon(Top Menu): It gives access to all transformation tools and commands, key tabs includes;

  • Home → load data, close and apply
  • Transform → Change data types, pivot/unpivot
  • View → Toggle panels (like formula bar)
  • Add Column → Create calculated columns

2️⃣ Queries Pane (Left Side): it contains a list of all tables which help in navigating between different datasets and organize queries(rename, group or duplicates)

3️⃣ Data Preview (Center Table View): it serve the purpose of viewing and interacting with your dataset and applying transformation directly on columns.

4️⃣ Applied Steps Pane (Right Side): it shows all applied steps during data cleaning and transformation like removed columns, filter row or change type.

5️⃣ Query Settings Panel (Right Side – Top): it is located on top of applied steps, which is used to rename query and add description.

6️⃣ Formula Bar: it is used to display formulas and uses M Language

7️⃣ Column Headers: this is the top row of every column which offers quick transformation through dropdown menus.

  • Handling Missing Data: This helps in replacing missing values with Nulls, Not Provided, Missing, N/A or remove incomplete rows.

  • Fixing Data Types: Convert columns into correct formats eg number to text or text to date.
    Select on the column you want to change data type and right click then select Change type and select to the type you want to change your data into(decimal, data, text, number amongst others) as part of data cleaning.

Fixing data type

  • Renaming Columns: make a column make sense or meanifull.

Data Transformation
This involves reshaping data for analysis and visualization. The process involves different tasks which includes:

  • Data filtering
  • Creating new columns
  • Grouping and aggregating
  • Pivoting and unpivoting
  • Splitting and merging columns
  • Data sorting

After the data is imported, cleaned and transformed. The data is ready to be used to Build Visual.
Reports visuals are prepared in Power BI. To make sure the cleaned data is loaded to Power BI, in the Power Query to save changes, click on Home Tab and then click Close and Apply button to save data and load to Power BI directly

Close and Apply Button In Power Query Editor

Close and Apply button

After Power Query is closed and changes saved, the data is loaded to Power BI to build visual reports.

Report View In Power BI Home Page

Home page power bi

It displays table contain our data, panel where visuals appear, filter panel, visualization panel with different charts, a ribbon for different commands and functionality.

Building Visuals In Power BI
After closing Power Query and the cleaned and transformed data is loaded to Power BI, the next step is to use DAX (Data Analysis Expressions) to create necessary measure to help in data analysis.

What Is DAX (Data Analysis Expressions): is a formula language used in Power BI and Analysis Services to perform data calculations and analysis.
Example Of DAX

Profit margin = DIVIDE(SUM(Electronics_sales[Profit]), SUM(Electronics_sales[SalesAmount])) * 100

DAX example
After we have done the necessary calculations, the next step is choosing the right charts to represent the analysis visually.
Some of the available charts in Power BI include;

  • Bar Charts
  • Column charts
  • Pie charts
  • Line charts

Charts panel in Power BI

Charts Panel

After creating required KPIs and visualizing the report, the next step is publishing to Power BI service.

Complete Power BI Report Looks like demonstrated below.

Complete Power BI report

STEP TWO

Saving Power BI Report(.pbix format)
After you have completed the Power BI Report, the next step is saving the report in the appropriate format.
Always save your Power BI report with extension **.pbix format
.
Power BI file save in local machine

power bi report

STEP THREE

Click Publish
In Power BI desktop home tab Click Publish on the top right of the application.

Publish button

STEP FOUR

Sign In
After clicking publish button, you will be prompted to Sign In. Use your Microsoft Account to sign in or school email for students and organization account for the organization you are working for for collaborations.
Sign In Window from Power BI Desktop

sign in window

STEP FIVE

Choose Workspace
After you have provided the Sign In credentials, next you choose the workspace already created from Power BI Service.
Window to choose your workspace from

workspace window

STEP SIX

Upload to Power BI Service
After choosing workspace, click select to upload to Power BI Srvice.
Select Option
select option

🌐 Embedding Power BI Reports on the Web (iFrame)

After publishing the Power BI report from Desktop, this are the step involved in Embedding report on the web

  • Go to Power BI service and sign in with your account information.
  • Go to Workspace where you published power bi file and open your report. Published Power BI report on Power BI service

power bi published report

  • Click: File → Embed report → Website or Portal

embed option

  • Confirm and generate embed code

embedding code

  • Copy the generated iFrame code to code editor like Vs code Copied code in VS code

copied code
Save the embedding code to a folder in your PC and open the index.html using your preferred browser and share the link to your team or organization to access the Power BI report.

Conclusion

Creating visuals in Power BI desktop is just the beginning which equips you with data understanding skills and data analysis to derive business insights. After the report is complete, it is only accessible to you and any other person using your computer because it is only available into local machine. To make sure all involved parties get to see the final report for decision making, you have to go an extra mile into publishing it to Power BI service and share the link to the web to relevant parties. For any individual who aspire to be data analyst, it is important to understand the process of publishing the report and embedding into a website.

Top comments (0)