Filter a Power BI tile on your web page



EDIT 2016-07-12: Microsoft has changed their API and policies and functionality, so this artcile is obsolete now. I will shut down the sample site. For details, please see:


I received a lot of feedback regarding my two recent posts:, and

So I decided to continue in my exploration of the Power BI API. The next natural step in creating customized dashboards is the ability to dynamically filter the tiles based on user interaction. As of today, this is something you cannot achieve in (you can only filter using selectors in Reports).
There is a post here, with very scarce information about a parameter of the embed API, namely $filter. We can use this parameter much like its oData cousin, with the same syntax.

&$filter={tablename/fieldname}+eq+'{literal constant}’

I tested it for string parameters and it works. Did not have such luck with dates. Everything will eventually come into place, as this API is still under development as I understand.

I created a sample web page trying to keep it very simple, to demonstrate how this works. You can find it here and you are welcome to help yourself reusing my code and adapting it to your needs. In the example you will see a list box, clicking on it will trigger a refresh of the tile with the appropriate results.

Happy coding!

A map, a map! My kingdom for a Choropleth map! (Power BI)

One of the most fascinating aspect of Business Intelligence is the power to picture data in an easy to understand way. I personally like maps a lot, not the google or bing type with lots of circular points which give very low added value to the information, but the Choropleth maps. Those shaped areas with shaded colors intended to convey an idea at the first sight.

Choropleth maps are mostly used with regional data but they can picture any kind of information on any kind of shape, the idea behind is very simple: you have a SVG image (a vectorial one), with one id for each closed area. Remember those days when we were kids and used the coloring book to paint on pre-designed images?

That’s it. Then you load your data and assign to each id a numeric value to get a colored area with a increasing intensity of color.

This is exactly what the Synoptic panel does.

It’s a custom visual that you can use with Power BI, more on this here. You can download the current version from gitHub, and import it into your Power BI report (yes, it’s free).

The Synoptic panel itself doesn’t paint the picture, you need to have a coded SVG to use with it. And creating a coded SVG is not difficult, you may use any SVG editor, or just go to which is an extremely useful web build by the same people who did the custom visual.

I must thank @DanielePerilli for his very good job and his continuous support. He was very responsive and helped me through building my first map.

spanish elections 2011

So in about an hour and a half here we have two maps with polls data from the Spanish elections in 2011. I downloaded the CSV from and used the Synoptic panel to create two maps where I filtered respectively the votes obtained by PP and PSOE.

No rocket science, anybody can do that. Just a little caveat, it’s not very intuitive: if you want to have different shades of color, you should drag a field to the “Saturation Values” box in the visualization settings. And if you want to display names on the map, you need to enable “Category Labels” in the format tab of visualization settings. That took me more than 5 minutes to figure out.

Anyway, go download it, create your own map or use those available in the gallery and happy coloring!

Embed multiple Power BI tiles into your Web

EDIT 2016-07-12: Microsoft has changed their API and policies and functionality, so this article is obsolete now. I will shut down the sample site. For details, please see:

Code re-usability is at the core of programming best practices and Business Intelligence is no exception.

None wants to code multiple times just to refactor thousands of lines of similar code whenever there’s a change in business rules.

In my previous post Use a Power BI Tile in your web page we saw a technique that allows us to use a Power BI tile into a custom web page. More often than not, our HTML documents are composed by more than one grid or chart, so we need a flexible way to be able to insert multiple tiles on the same page without rewriting the same JavaScript procedures over and over.

I reworked the previous example to make it easier and created this simple function:

[code language=”javascript”]
<script type="text/javascript">
function EmbedTile(sTileUrl, sFrameName, iWidth, iHeight) {
var iframe = document.getElementById(sFrameName);
iframe.src = sTileUrl + "&width=" + iWidth + "&height=" + iHeight;
iframe.onload = function () {
var m = { action: "loadTile", accessToken: accessToken, height: iHeight, width: iWidth };
message = JSON.stringify(m);
iframe.contentWindow.postMessage(message, "*");
window.onload = function(){


Feel free to reuse it or see it in action here: Two tiles in the same page

Use a Power BI Tile in your web page

EDIT 2016-07-12: Microsoft has changed their API and policies and functionality, so this artcile is obsolete now. I will shut down the sample site. For details, please see:


Creating dashboards is more witchcraft than art and more art than science. Think about how many times you have banged your head to produce a useful chart according to the specs of your client. You have the numbers, you have the chart and everything in place but the customer keeps saying: “it’s just not the right shade of green…”

Many times we have to create custom web pages to accomplish what the BI solution can’t offer out of the box; and Power BI provides you just that, the ability to use a tile from a dashboard without forcing the customer to open the entire Power BI user interface. With this technique you can embed just a piece of a bigger BI report into an HTML page. It’s not very straightforward (at least for me it wasn’t), and I must say that the documentation often makes it worse (there’s an errata in the GET REST Uri of the Step 3 – Get user’s tile information).

So you want to embed a Power BI Tile into a web page: to quickly see how it works go to this example page. If you want more details, just read on.
I assume you already have a Power BI dashboard and you know how to get an access token. This is probably the most difficult part and I covered that in another article.

I am using cURL from a headless EC2 server just for sake of simplicity, you can do this with your favorite programming language.

First step is to get the ID of your dashboard:


curl -k -X GET "" -H "$AUTH_HEADER_LOCAL"


where $AUTH_HEADER_LOCAL is the “Authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiI……..” you created when asking for an access token.

The server will respond something like this:

From here you need to extract the id element which represents your dashboard.

Second step is to get the tile ID:




where $AUTH_HEADER_LOCAL is the same as above and ${DASHBOARD_ID} is the value you got in step 1.

the answer will include an element named “embedUrl” which is the link to your tile.

Now that you have the embedUrl and the access token, you can build a simple HTML page:

  • Create an <iframe> element that will host your tile
  • Have your access token ready into a variable, I personally have it in an external .js file that I load as a <script> inside the page
  • Add a <script> element to activate the <iframe> with the access token and the dimensions of the tile

[code language=”javascript”]
<script type="text/javascript">
var width = 800;
var height = 600;
var embedTileUrl = "…..2618e&tileId=8cd8bc5….7624a";

window.onload = function () {

function updateEmbedTile() {
if ("" === embedTileUrl)
iframe = document.getElementById(‘iFrameEmbedTile’);
iframe.src = embedTileUrl + "&width=" + width + "&height=" + height;
iframe.onload = postActionLoadTile;

function postActionLoadTile() {
if ("" === accessToken)
var h = height;
var w = width;
var m = { action: "loadTile", accessToken: accessToken, height: h, width: w };
message = JSON.stringify(m);
iframe = document.getElementById(‘iFrameEmbedTile’);
iframe.contentWindow.postMessage(message, "*");


Note that the access token will expire after 1 hour, so you need to have a way to refresh it on the server side.

Feel free to use as a reference.

Pin an Excel chart/pivot table to a Power BI dashboard

According to this post on the official Power BI blog it is now possible to bring your Excel file into a Power BI dataset as a whole (not only importing data); and use portions of it as tiles on your dashboard.

Wow: you can (re)use your carefully crafted charts and amazingly engineered pivot tables in a web-shareable software as a service, not bad.

This is a very interesting feature and adds a range of new possibilities for this recent Business Intelligence Saas.

Now, few considerations.

  • To accomplish this you need to link an Excel file from OneDrive and the pin-to-the-dashboard option is only available to OneDrive for Business subscribers. So no free beers, sorry.
  • To pin a chart you actually need to select a range of cells where the chart resides and it will be pinned as an image, much like a print screen, so do not dream of interaction with the rest of the selectors/filters on the dashboard. See what I mean in this picture:
  • Your chart/table/range will appear in the dashboard as a <div> with a base-64 encoded data:image/png background:

I did not try to embed this tile in a web page, but it could be the next logical step to do.

So, overall, a very desirable addition. Prices for OneDrive for Business start at 5USD per user/month, and if you are a no-profit/government/university you can have it even chaper.


See-through MicroStrategy (playing with transparencies)

One thing that I like about MicroStrategy is the ability to create Web documents. Nowadays self-service discovery technologies (being based on Flash or HTML5) tend to constrain a little the “creative” side of the data analysis: trading off the ease of use for a quite limited set of tools to picture your data. Boundaries are build and it is difficult to bend the rules.

Web documents do not have such restrictions and -in fact- are almost limitless in possibilities. Think about the HTML container that allows us to insert custom HTML/JavaScript, or the image container.

I believe that Business Intelligence is about information as much as about design, and -surely enough- a nice looking dashboard is always preferable to a boring dull one.

A fundamental aspect of modern day web pages is the CSS Opacity / Transparency, so why not using it in a dashboard to spicy it up? The components and widget that come with MicroStrategy allow a very limited use of “No Fill” in the background: you can create a transparent Chart or Panel, but not a transparent rectangle. So I simply created a series of white PNGs with different alpha values that I can insert on top of a background picture to simulate a see-through rectangle.

Then I downloaded a background picture on Flickr (careful with the CC license…) and removed the main panel of a blank dashboard.

You can see the result here, where a Web document turns to A Whiter Shade Of Pale.

now you see me now you dont

You can download the transparent pngs here.

Reminder: MicroStrategy Express is Retiring

MicroStrategy Express will be retired at the end of June 2015. We hope you have found it a valuable tool in exploring and visualizing your data.

Now join us in welcoming the era of MicroStrategy Desktop – the latest in data discovery and visualization for business users, available to install on Mac and PC.

We are pleased to announce that as an Express user, you qualify to receive complimentary access to the new MicroStrategy Desktop 10. Valued at $600, this will be available to MicroStrategy Express users for free. In order to get access to the new MicroStrategy Desktop, please fill out this request form.

We are committed to helping you make the transition from Express as smooth as possible. In order to preserve any MicroStrategy Express dashboards or information, we encourage you to back up files to a local machine by June 30th.

For guidance on how to back up your MicroStrategy Express dashboards, please refer to the FAQ below.

MicroStrategy Express is Retiring: What You Need to Know

When will MicroStrategy Express service be retired?

End of June 2015, at which time all accounts will be terminated and you will no longer have access to your teams and dashboards on that account. All information on the MicroStrategy Express service, including user accounts, dashboards, and data will be deleted.

Can I back up all my dashboards on my MicroStrategy Express account?

Yes. Over the next few weeks while the accounts are still active, you may back up your dashboards to avoid losing them. However, if you don’t back them up, they will be deleted when Express is retired.

How do I back up dashboards within my Express teams?

By clicking on the “Share” menu option for each dashboard, you can select the “Export to MicroStrategy File” option to download your dashboard with data and save the file (.mstr) on your local computer.

Is there another option to back up my dashboards if I don’t do it myself?

Unfortunately there isn’t. Account holders will have to back up their own dashboards as no one else will have access to these accounts.

How can I continue to use my dashboards and create new dashboards with MicroStrategy after June 2015?

As an Express user, MicroStrategy will be giving you complimentary access to the new MicroStrategy Desktop client. This is valued at $600 for each Desktop user, but will be available to MicroStrategy Express users for free. The MicroStrategy Desktop client is the crown jewel in the new MicroStrategy 10 release, and is available as a client install for both Mac OS and MS Windows. All dashboards created using templates in Express can be used with the new MicroStrategy Desktop. Advanced Template dashboards may only be imported using MicroStrategy Web and will need the Server license.

What new capabilities exist in MicroStrategy 10 that were not available in MicroStrategy Express?

MicroStrategy 10 offers a completely new analytics experience, with a revamped HTML5 interface, native connectivity to more data sources, data wrangling, new types of visualizations, and faster performance. Visit for more information about all the exciting new features.

Can I back up dashboards built with Out-of-the-box Templates (Visual Insight)?

Yes. Dashboards built with existing templates can be backed up while the account is still active over the next few weeks. Dashboards built with live connections to databases (Express Delivery dashboards) may not be backed up.

Can I back up dashboards built with Advanced Templates?

Yes. Dashboards built with Advanced Templates can be backed up. In order to use them, you will need MicroStrategy Server and Web license as Desktop does not support advanced templates.

Can I back up my Mobile and Team Launchpads?

No. The Team Launchpad only applies to MicroStrategy Express, and you cannot back it up.

Can I back up the list of user accounts and profiles within my team?

Yes. On the administrator tab for team owners, you may click on the “Export Users” option to retrieve the list of users and profiles in Excel format.

If you have other questions about transitioning off of MicroStrategy Express, please don’t hesitate to contact us.