THE SQL Server Blog Spot on the Web

Welcome to - The SQL Server blog spot on the web Sign in | |
in Search

SQLBI - Marco Russo

Please visit the same blog at - comments are now disabled here but you can comment on the new blog (all blog posts available here are available there, too).
You can follow me on Twitter: @marcorus

Synoptic Panel for Power BI Best Visual Contest #powerbi #contest

Today (September 30, 2015) is the last day to submit an entry in the Power BI Best Visual contest. I and Daniele Perilli (who has the skills to design and implement UI) spent hours thinking about something that would have been challenging and useful at the same time. Daniele published a couple of components (Bullet Chart and Card with States) that have been useful understanding the interfaces required to implement a Power BI visual component. But the “big thing” that required a huge amount of time was another.

We wanted a component to color areas of a diagram, of a planimetry, of a flow chart, and of course of a map. From this idea, Daniele developed (and published today – what a rush!) the Synoptic Panel component for Power BI.

The easiest way to see it is watching the video. However, an additional description can help. Let’s consider a couple of scenario. For a brick and mortar shop, you can color the areas corresponding to categories (and subcategories) of products, using either saturation of colors or three-state logic (red-yellow-green, but you can customize these colors, too).

image image

But what if you are in the airline industry? No problem, it’s just another bitmap.


Wait a minute, how do you map your data to the graphics? How can you start from a bitmap, and define the areas that you want to relate to airplane seats or product categories and subcategories? We don’t have coordinates like latitude and longitude, right?

Well, you can simply go in, import a bitmap and design your area, straight in the browser, no download, no setup, no fees required. Each area has a name, that you will use to connect data to your data model. Yes you read it right. You will not change your data model to use the Synoptic Panel. For example, here you draw seats area in an airplane:


And with some patience you locate all the areas of a shop, too:


In the right panel you have the coordinates you can modify manually, and the editor also has grid to help you in alignment (snap to grid feature is also available).

Once you finished, you export the area definition in a JSON file that you have to save in a public accessible URL so that it will be read by the component (we will add the capability to store this information in the database, too – yes, dynamic areas will be available, too).

At this point, in Power BI you insert the component, specify the URL of the bitmap, the URL of the JSON file with the areas, the category, the measure to display, the measure to use for the color (as saturation or color state), you customize the colors, and your data are now live in a beautiful custom visualization.

Thanks Daniele for you wonderful job!

Published Wednesday, September 30, 2015 2:25 PM by Marco Russo (SQLBI)
Filed under:



Richard Back said:

Awesome job, Daniele and Marco. If 3rd parties can come up with something like this in a really short space of time, it shows that Power BI has a bright future indeed.

September 30, 2015 8:19 AM

Marco Russo (SQLBI) said:

Thanks Richard!

September 30, 2015 8:43 AM

Tim Toennies said:

This looks exceptional & I'd love to try it but I am not able to import an image.  I tried pulling an image from the internet, I used this one; but that was not successful. Any suggestions?

September 30, 2015 11:11 AM

Marco Russo (SQLBI) said:

Tim, I just tried and it works importing the URL.

Which browser/version are you using? Did you try different ones?



September 30, 2015 12:22 PM

Mandeep said:

Wow...this is amazing

October 1, 2015 12:02 AM

Marco Russo (SQLBI) said:


October 1, 2015 12:24 AM

Fredrik said:

This looks really promising, and it is something we consider suggesting using for one of our clients.

Is this "ready for production", and is it ok to use in commercial projects?

Finally, how "future safe" would you say it is? The solution relies on that is maintained in the future.



October 1, 2015 6:59 AM

Marco Russo (SQLBI) said:


at the moment, these components can be used only in development mode, but Microsoft should allow to deploy and distribute them to end users very soon.

As any "open source" project, you have to evaluate whether the quality is good enough for your usage. We will continue to maintain the component and the website in the future as a contribute to the community. We will consider to provide professional support on demand, but the component and the website is and will continue to be open source and freely available.

October 1, 2015 7:09 AM

James Phillips said:

It is difficult to express the depth of our gratitude and sense of awe at what you've created here guys. Just stunning. Thanks!

October 1, 2015 9:35 AM

Marco Russo (SQLBI) said:

Thanks James! :)

October 1, 2015 10:52 AM

Thiago Zavaschi said:

Amazing job guys!!

October 1, 2015 10:05 PM

Marco Russo (SQLBI) said:

THanks Thiago!

October 1, 2015 11:05 PM

David Aldred said:

Guys, saw this as part of the contest and had a dabble. Now it's available via the Visuals Gallery I've managed to plug it into some real data - and wow - really opens up some possibilities.

Hope to see this grow with time!

October 21, 2015 7:35 AM

Marco Russo (SQLBI) said:

Thanks David!

October 21, 2015 7:38 AM

Alex said:

Hi, Marco,

Could you please explain haw can I unite different areas into one are. For instance, I have a group of islands, which I should unite but I don't understand how to do it=(

April 6, 2016 11:29 AM

Daniele Perilli said:

Hi Alex,

it depends on you scenario:

- if you are starting from a bitmap image (PNG, JPG) you should able to do by assigning the same name to different areas,

- if you are starting from an SVG files (but not the one generated by Synoptic Designer itself) you can open the file with a graphic designer (such as Illustrator or Inkscape) and group different shapes under the same name (it's harder said than done...).

April 8, 2016 5:45 AM
New Comments to this post are disabled

About Marco Russo (SQLBI)

Marco Russo is a consultant, writer and trainer specialized in Business Intelligence with Microsoft technologies. He runs the SQLBI.COM website, which is dedicated to distribute resources useful for BI developers, like Integration Services components, Analysis Services models, tools, technical information and so on. Marco is certified as MCT, MCDBA, MCSD.NET, MCSA, MCSE+I.

This Blog



Privacy Statement