Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

The ultimate Microsoft Fabric, Power BI, Azure AI & SQL learning event! Join us in Las Vegas from March 26-28, 2024. Use code MSCUST for a $100 discount. Register Now

ibarrau

[PowerBi][UX] Messages explaining visuals - Overlap technique

Blank explanation message

The idea for this article is to show a message to the user when a selection of filters results in blank data producing empty visualizations. There might be other solutions besides this one, but I like this more and that’s why I’m showing it.

To build this, we need to write some DAX and manipulate the UI due to our solution is about making the visualization transparent and place a card with the message behind. The card will be the background UI for the visualization, and it will keep clean while everything is ok, but the text will show up when something is not ok.

Let’s see first our DAX code for the Card:

 

 

 

IsBlank Cantidad Ventas =
IF(
   ISBLANK([Cantidad Ventas])
   , “There is no data for the filter selection”
   , “”
)

 

 

 

The solution is quite simple. We are asking if the measure or measures on the visual are returning blank. If they do, we add a message explaining that the reason of the blanks to let the user understand is not an issue of the tool. If the measure is not blank, then we are keeping the card empty returning two double quotes. We are using double quotes and not blank because that keeps the card clean. The blank shows “(Blank)” text. Let’s check a simple scenario

ibarrau_1-1657837851290.png

Let’s overlap a card over the line chart and reorganize to keep it behind. In the card we are disabling the card label to keep it completely clean. Like this:

ibarrau_0-1657837843957.png

 

Card, white background, not labels. Once we have it behind the line chart, we should remove the background for the line chart. If we make it correctly there should not be any UI difference for the graph. Let’s check a gif in action.

ibarrau_2-1657837874742.gif

 

Instruction message

The blanks are not the only approach. We can think different usages for the technique like instructions for the user. For example, if we have a visual that shouldn’t display anything until you make some actions. Taking the same page of the report we can say that the product ranking (the visual on the right bottom of the page) should only show data if we select only one CountryRegion. You can think it as each country sells so different products that you would never check all countries ranking. We could show a message like “Please select one Country Region to see the ranking”.

To build this we need DAX help again. The difference with the previous solution is that we will use the measure for both visuals. The card as the main value and as visual level filter in the graph to avoid all countries data. Let’s see the code:

 

 

 

One Country in Store msg =
IF (
   HASONEVALUE(Stores[CountryRegion])
   , “”
   , “Please pick only one country to see the ranking”
)

 

 

 

 

As you can see, instead of looking for a blank, we are checking if there is a single value for CountryRegion on the filter context. If we have more than one, we are showing the message.

We need to make one more tweak this time. If we add the card behind the visual. Change background and all, we should get this:

ibarrau_3-1657837995430.png

 

The new step here is hiding the visual data when there is more than one CountryRegion to avoid that ugly overlapping view. To make the effect open we are opening the filter pane and add the measure as visual level filter with the condition “is empty”. Apply filter.

ibarrau_4-1657838012934.png

 

Our “” double quotes in the code are translated as “empty” for the engine. That is quite helpful to let us keep one single measure without the need to create another one for the values of the bars. The result looks like this:

ibarrau_5-1657838031623.gif

 

That’s how we take the knowledge of the blank message to build a new strategy for the user experience. I’m sure that there are a lot more ideas like this one to help our users keep a clean easy development.

I hope the post helps you. Let’s improve UX 😊

Comments

Very well explained !