Introduction
This week’s visualization is inspired by the concept of rules – understanding them and knowing how to bend them (but never break them!) At a high level, Power BI visualizations are rendered using a combination of JavaScript, HTML, and CSS in a web browser. By learning the foundational aspects of various data visualization tools, you can start imagining all the possible ways they can be utilized. Remember, “it is not the spoon that bends; it is only yourself.” In this tutorial, we’ll enrich our reports with deeper customizations through various web design properties and by the end, you’ll be able to create a pulsing notification for scalar KPI values.
Requirements
Bending the rules (example)
Before we dive into this week’s challenge, let’s take a brief detour to explore how CSS can be combined with Power BI. We’ll leverage examples from W3 Schools and use them as a foundation for our background from – to animation example. Our goal is to recreate the output using Power BI and the HTML Content (lite) visual, which is a certified Power BI visual. We’ll also take advantage of built-in features like what-if parameters to change values on the fly. This approach should inspire you on how to use scalar values, such as KPIs, where a single value can drive the complete customization of an element. Additionally, since we are dynamically building text content using DAX functions, you could add even more elements for even more customization of properties – or create highly stylized and dynamic tooltips.
- Open the Power Query Editor and create a new query using the following M script, name the query as Properties and select Close & Apply to proceed.
let Source = #table( type table [#”Static Properties” = text, #”Dynamic Properties” = text], { { // Static CSS Properties “ @keyframes example { from { background-color: red; } to { background-color: yellow; } } “, // Dynamic CSS Properties “ div { width: 100px; height: 100px; background-color: red; animation-name: example; animation-iteration-count: infinite; “ } } ) in Source |
- Navigate to the Modeling tab and select New parameter > Numeric range. Update the title of the measure from “Parameter Value” to “animation-duration”
- In the Modeling tab, add a New measure to the Properties table and use the following DAX formula:
Background CSS = CONCATENATEX( ‘Properties’, [Static Properties] & [Dynamic Properties] & UNICHAR(10) // New Line Break & “animation-duration: ” & [animation-duration] & “s;” & UNICHAR(10) & “}” ) |
- Add the HTML Content (lite)visual to your report canvas. Add the Background CSS measure to Values (note this could be any value added), expand the Stylesheet section, and select the expression builder.
- Expand the What field should we base this on? to select the Propertiestable and the Background CSS measure, and then click OK once complete.
- Below is an example of CSS being rendered inside a Power BI visual, dynamically adjusting as we increase the animation-duration threshold using the numeric range parameter.
Requirements
- Leverage the tutorial and code from ForFrontend to create an animated pulse for a single KPI value, using the HTML Content (lite) visual.
Dataset
- Create your own dataset this week using the Enter Data button, or import real data from any source you prefer.
Inspiration
- Modify the colors based on specific thresholds: green if the value is above 80%, and red if it is below.
- Find other interesting ways to display HTML and CSS in your reports, 75+ Mind-Blowing CSS Animation Examples (Free Code + Demos)
Dataset
This week’s dataset is downloadable from Github
Share
After you finish your workout, share on Twitter using the hashtags #WOW2024 and #PowerBI, and tag @MMarie, @shan_gsd, @KerryKolosko. Also make sure to fill out the Submission Tracker so that we can count you as a participant this week in order to track our participation throughout the year.
Solution
Via Data Stories Gallery
Coming soon.