Slicers are a key component within a Power BI report. They enable the user to intuitively explore their data and interact with visuals to reveal insights and patterns.

The Button Slicer is a great choice to elevate the interactivity of a report whilst also boosting the visual impact, as it can be customized in a multitude of ways.

In this blog I will show you how to use images in your Button Slicer to take your Power BI reports to the next level.

The Result

My Process


Step 1 – Get the Images for your Slicer

There are plenty of sources for the images that we can use in the report. I like to use Flaticon as there are a wide variety of interface icons that can be downloaded for free (you will need to sign up however).

Before you download any images, it is handy to create a folder in the same place as your report where these will be stored (this is useful for the conversion step after this).

Now, I’ll go to the Flaticon website and search for interface icons that I want to include in my slicer. You can search the icons by topic, select the icon you want, change the colour and download. I use 64px as this gives a good quality for the size I use in the Button Slicer.

Save the icons as the names of the categories you will be slicing (the reason for this will become apparent in the next step). I am using supermarket product categories in this example, this is what my dimension table and image folder look like once the pictures are downloaded:

Step 2 – Convert the images to Base64

There are numerous ways to convert the image data, I have created a Python script that does this for me. It is available here should you wish to access it.

In short, it reads all files in a selected directory, loads them into a Pandas DataFrame and copies it to your system clipboard. This is then ready to paste into a Power BI table.

Step 3 – Bring the image data into your Report

Now the data is on your clipboard, go to your report in Power BI Desktop, click ‘Enter Data’ and then paste in the copied DataFrame (headers are included in this case). Finally click ‘Load’ to create the table.

Once the data is loaded it is important to tell Power BI that your image Base64 should be loaded as an image. To do this, select the column containing the Base64 data from the newly created table and under ‘Column Tools’ change the data category to ‘Image URL’.

Step 4 – Set up the relationship between the dimension and image tables

Now the data is in the report, it needs to be added to the data model. You can do this by creating a one-to-one relationship between the dimension (what you are slicing by) and the image data table. This will look something like this:

Step 5 – Build your slicer visual!

You are now set up to build your Button Slicer.

Create a Button Slicer visual from the ‘Visualizations’ pane and add the column you are slicing by to the ‘Field’ area.

Then under ‘Format visual’ add the column containing the encoded Base64 image into the Field under the ‘Images’ drop-down.

Finally, resize and change the position of your image to suit.

And there you have it, you have successfully created an awesome slicer visual for your report!

Considerations

  • Any encoded images will add to the size of your dataset as they are long strings of characters
  • When the converter code copies to clipboard, you are limited to the size of your system’s clipboard. Large and complex images may not fully copy, but for simple interface icons you should be fine.

Tags: ,

« Previous Post
Next Post »