Embed Power BI Visualization in Website

Explore how to embed Power BI visualization in website by following four easy steps

Source: Luke Chesser

I assume that you’re aware of the Power BI Desktop and Power BI Services, and you do have account as well. If not you can easily Create your account here and download the Power BI desktop.

I was practicing the Power BI and came with an Idea to build a decomposition tree (a visualization) Which shows my Name, Domain and skills I do have. Finding it difficult to understand? No worries, The below Image represent what it will looks like:

End result we want to achieve

The steps we will follow

1- Dataset
2- Import in power BI and visualize
3- Publish to Power BI Services
4- Embed in Website

1- Dataset
As you’re working on your own skills so you have to make dataset on your own. It not difficult as we only need few data-points for this. My dataset only include three columns Username, Domain and Skills. Once the dataset is ready it will looks something like this

| Username | Domain           | Skills  |
| ---      | ---              | ---     |
| Adnan    | Data Engineering |  ETL    |
| Adnan    | Data Science     |  Python |

2- Import in Power BI
Now that you’ve your dataset you can import in Power BI by using Get Data option. Select the dataset you’ve saved in previous step and select import if not any cleansing required, make sure that Username, Domain and Skills are header in Power BI table. Once you imported the data you can play around like you want. Now your Power BI interface will look this

Power BI Interface

As in start we mentioned we will work on decomposition tree, from visualization pane select decomposition tree, drag and drop the columns from dataset into decomposition Analyze and explain by fields as shown below

Decomposition tree

Now rename the username column in Analyze field to your name.

3- Publish
Now we got what exactly we wanted you can play around different parameters to set the colors of Bar, change headers etc. Once all the changes are done publish it to Power BI services.

Publishing Report

The report is published to your desired workspace. Workspace is nothing but an environment where multiple people can work together on a report based on role assigned to them.

4- Embedding in website
Now go to Power BI Service and open the report you published, click on File in top menu select Embed report and select to Website or portal.

Embedding Report

Note: If you want to be visible to public you can use select the Publish to web(Public) but for it you will require an administrator permission or access. As I don’t have that so I’m selecting Website or Portal option.

After selecting the Website or Portal option popup will appear from where you can copy the link

Link to Embed Report

you can use this link to embed report in your website. I already have the one so I’ll integrate it in it. Simply pasted this code website and bamm!!! we’re done. The end result will look something like this:

Website view

This embedded visualization is interactive and behave in a similar fashion as it was in Power BI Desktop. Easy peasy? follow back to not miss the upcoming articles.