Like any programming language, the possibilities are endless, and we could do many things that we see on websites. However, we will stick to a simple trick that does not require extensive and intense knowledge of the languages. We just need to know that HTML is a language used on websites and is based on tags. On the other hand, we have CSS generating the aesthetics and style of those tags.
Sounds like a lot of work, right? Will we write a lot of code? No, of course not. Thanks to the internet and its interactions, we can now reuse a lot of CSS code already exposed in internet repositories by simply calling a method and importing it.
The first step will be to load a custom visual that allows us to write HTML code. In this case, I chose one of the oldest and free ones.
The way these types of visualizations work is by writing the code in a measure's text. So, let's add the visualization and enter a measure with the following text:
With this, we can see that the visualization interprets the "h2" tags of HTML. We will apply the same logic to the cards. We must pay attention to a detail when using data from our model. The visualization renders text. This means that a "SUM()" will produce an error. To include it in the text, we need to convert it with FORMAT. This function converts its content to text. The code should look something like this:
"<h2>" & FORMAT ( SUM ('InternetSales'[Unit Cost]), "#0.0") & "</h2>"
We can take advantage of the fact that FORMAT allows us to choose a formatting to display the number as we would like to represent it. This way, we could create a traditional card.
The Animated Magic
To achieve an animation of the card, we will import an existing CSS library. This means we will be writing more code. We will follow the example of the library https://animate.style/
The link itself explains that to use it, we must first add something to the code, and then we can include it in the "class" of our tag.
The class of the tag is a set of pre-written CSS code that will be read from the address we provided at the beginning. In this case, it calls an animation execution when loading the visualization. In Power BI, this loading will be repeated with each page interaction, which will give movement after selecting a filter. Let's see how this looks.
Sum Price =
"
<head>
<link
rel=""stylesheet""
href=""https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css""/>
</head>
<br>
<h1 class=""animate__animated animate__bounce"" style=""text-align:center;"">" & FORMAT ( SUM ('InternetSales'[Unit Price]), "#0,0") & "</h1>
"
This measure contains a text that defines a code. First, the code loads the library as instructed by the page within the <head> tag. Second, we use <br> which creates a "enter" or breakline to center the number a bit more. Finally, we use the <h1> title tag with our measure.
The difference with the previous <h1> tag is that this time we define a class attribute, also copied exactly from the website. The website shows different effects that we can use by simply replacing the word "bounce" with another one that we like. Before finishing the <h1> tag, we have a second style attribute that is used to define CSS code. In this case, I wrote it to center the text of the card.
In this way, we adjust the card and arrive at the following result:
That is the final result we would achieve. The code we executed will animate with each refresh we have on the visualization. In this case, we will see it the first time and then after clicking a filter or interacting with charts. If we want a different type of result, it's worth mentioning again that the possibilities with code are enormous. You just need to learn more about the language.
I hope this trick is useful for you to create interesting and simple animations like this one. If you enjoy the language, you can go infinitely learning more. As always, I leave this development on my GitHub.
And you, have you ever written something in HTML inside Power BI?
Original Source LaDataWeb
- MaximeBo on: Explore Small Multiples for the New Card Visual in...
- Nazrin on: Mastering Dynamic Stock Management with Cumulative...
- cotbadulla on: Power BI Export All Visuals - python notebook
- lilin2020 on: 🎉 FabCon is Back! 🎉
-
kevingauv
on:
Unlocking the Power of Power BI Goals (Metrics): A...
-
Dangar332
on:
PowerBI - Custom Sort
-
Jai-Rathinavel
on:
Microsoft Fabric - Designing a Medallion Architect...
-
Kedar_Pande
on:
Color Choice: How a Minimalist Approach Enhances U...
-
MikeAinOz
on:
Import Microsoft Planner Data into Power BI Using ...
- akosdemeter on: Get certified in Microsoft Fabric—for free!