Microsoft Power BI has a feature that allows users to publish PowerBI.com reports to any public website or app that allows for iFrame embedding. The report above is a live, interactive Power BI report. Take a few minutes to play with it. This post will walk through the major features and then progress to a, step-by-step instruction on how to integrate a Power BI report into your web page.
The data in the report was integrated using the internuntius inCollatio™ business analytics architecture. The information is a combination of US Census data and NFL team data. The data was combined based on the city where each NFL team is located. All the Power BI chart elements are linked together, so clicking on any element will dynamically filter the information displaying on the other related elements in the report. Give it a try. Click on a city from the map and all the data in the other charts is filtered to represent the data and percent of total for that selected city. You can look at groups of teams by using the filters in the bottom right of the report to pick AFC or NFC (American Football Conference and National Football Conference). Then you can further slice the report data by division (north, south, east and west). So for example if you choose NFC and North from the slicers, you’ll see the Vikings, Packers, and Bears, and Lions along with the various ethnicity, gender, crime and economic statistics related to the cities. The data is averaged together to show the median value of the teams selected.
One thing you’ll notice if you look hard at the data is that some of the teams are represented in more than one city. One example is the Rams, who are listed both in St. Louis and also in Los Angeles. This is because our dataset contains historical team data going back to the inception of the NFL and we have individual player member data going back over 10 years.
There is one significant feature worth mentioning. This feature is only available on the PowerBI.com website while looking at the dashboard. Dashboards are not able to be exported for web viewing. Only Reports can be exported. Having said that, there’s a feature in Power BI Dashboards called Natural Language Query. How it works is that you just start typing questions in the query entry and Power BI will analyze your question and dynamically create a custom chart using the underlying datasets in the dashboard to attempt to answer your question through a data visualization.
By typing the question: “teams with more black than white” in the natural language query prompt, Power BI automatically provided the following scatter plot of the Census Ethnicity for Black vs. White by NFL team.
Take a look and you can quickly see that Green Bay, Wisconsin has a 73% white population with only 4% black. On the other end of the spectrum, Detroit, Michigan has an ethnic mix of 83% black and only 8% white. Minnesota and Chicago are in the middle. So the NFC North has the absolutely most diverse ethnic makeup of any conference division in the entire NFL:
"Power BI changes the way we interact with data on the web! Static images, reports, and infographics are dead."
-Bryant Avey, Chief Geek, internuntius
A few things are required to utilize Power BI. The following list is the minimum you’ll need in order to follow along this article.
At the top-right of each chart, as you hover your mouse over it, you’ll see a “Focus mode” icon.
Clicking the Focus mode icon will zoom that chart up to full screen so you can focus in on it.
While in focus mode, the top navigation of the chart changes to show you “Back to Report” option in the top left. Click Back to Report when you’re finished focusing on that chart.
This article assumes you already have a report built in Power BI that contains public data that you with to publish to your website. If you need help producing reports and dashboards in Power BI you may find further information in our Learning Center videos or in our Leverage Center articles. (click on the “learn” or “leverage” menu at the top our website) We’re also happy to help you jump-start through our Adaptive Consulting services where we provide just-in-time assistance for you, no matter where you are in your process or learning or development cycle. (click on the “link” menu at the top of our website to learn more)
To publish your Power BI report, you’ll first need to open the report in Power BI and select the “Publish to web” option from the menu.
This will bring up a dialogue panel showing your embed settings, allowing you to make some adjustments to the size of the iFrame it produces.
We want to embed the report into a web page, so we’ll need to use the second option. Copy the Html code highlighted in yellow in the image above. We’ll use this in one of the next steps to embed the Power BI report into our web page.
You’ll notice in the last screen shot above, that there’s a gray border around the Power BI Report. This can be controlled by the height and width setting in the Html snippet code. We’ve found that an aspect size ratio of 60% works best for eliminating the extra gray boarder. Aspect ratio refers to the result of dividing the width by the height. On this webpage, where you see no gray space, we used a setting of 1500 x 900. If you do the math, 900/1500 = .6 which is 60%.