Register now to learn Fabric in free live sessions led by the best Microsoft experts. From Apr 16 to May 9, in English and Spanish.
Hi everyone,
I want to use the Infographic visual (or anything similar), but instead of having a separate icon for each category, filled to some extent, I would like to have a single icon, which is colored according to a % value. For example:
A | 10% |
B | 20% |
C | 70% |
Sorry for the horrible drawing 😉
Do you guys have any ideas on how to achieve it? 🙂
@Anonymous Well, it would take some work, but you could definitely do it with an SVG visual or an R or Python visual. I just so happened to create a model for a heart icon in SVG. Could *probably* modify it to get things colored the way you want. I'd have to search around for custom visuals that could do this.
https://community.powerbi.com/t5/Quick-Measures-Gallery/SVG-Animation-Have-a-Heart/m-p/518109#M223
@dm-p you're good with custom visuals, right? Any ideas?
There's no custom visual that can do this directly - as @Greg_Deckler has pointed out, you could manage it with SVG.
The biggest challenge with a shape like this is it's curviness - hearts are typically built with a path element. While you could manage the proportion of the shape that needs to be filled based on some DAX calculations against its height and the SVG viewbox, you would need to work out how to draw the curves for wherever the shapes start and end.
Hopefully the following illustrates this better - I quickly built this with the HTML Content custom visual and I'm using rect elements to "fill-in" behind the heart:
(I just grabbed a stock SVG heart, so there's still some work to get the height right as the values span the whole image)
You'd need some way to "cut out" the inverse of the heart shape and place it above the rects to create the negative space effect and giving the impression that that the heart is just filled-in internally for each measure.
I'll share my prototype, in case anyone wants to see if they can evolve it - I'm a little too tied up with commitments at the moment to work on a complete solution. Apologies for the terrible modelling and DAX, as I'm using columns rather than measures for the test data and was keen to try and get to the viz component.
Table (name = Sample):
Measure to Generate the Above:
Filled Heart =
// Physical Sizing
VAR SvgElementHeight = 200
VAR SvgElementWidth = 200
// Grabbed out of SVG to calculate scaling based on physical size
VAR SvgViewboxHeight = 471.701
VAR SvgViewboxWidth = 471.701
// Get all values
VAR Results = SUMMARIZECOLUMNS(
'Sample'[Value],
'Sample',
"Colour", MIN('Sample'[Colour]),
"Percent", SUM('Sample'[Amount]),
// Starting percent allows us to calculate where y coords should start for this rect
"StartingPercent", SUMX(
FILTER(
ALLSELECTED('Sample'),
'Sample'[Index] < MAX('Sample'[Index])
),
'Sample'[Amount]
)
)
// SVG Heart Template (placeholder for rect elements, which we'll fill-in shortly)
VAR SvgHeart = "<svg style=""height:" & SvgElementHeight & "; width=""" & SvgElementWidth & ";"" viewBox=""0 0 471.701 471.701"">
<g>
$rects$
<path d=""M433.601,67.001c-24.7-24.7-57.4-38.2-92.3-38.2s-67.7,13.6-92.4,38.3l-12.9,12.9l-13.1-13.1
c-24.7-24.7-57.6-38.4-92.5-38.4c-34.8,0-67.6,13.6-92.2,38.2c-24.7,24.7-38.3,57.5-38.2,92.4c0,34.9,13.7,67.6,38.4,92.3
l187.8,187.8c2.6,2.6,6.1,4,9.5,4c3.4,0,6.9-1.3,9.5-3.9l188.2-187.5c24.7-24.7,38.3-57.5,38.3-92.4
C471.801,124.501,458.301,91.701,433.601,67.001z M414.401,232.701l-178.7,178l-178.3-178.3c-19.6-19.6-30.4-45.6-30.4-73.3
s10.7-53.7,30.3-73.2c19.5-19.5,45.5-30.3,73.1-30.3c27.7,0,53.8,10.8,73.4,30.4l22.6,22.6c5.3,5.3,13.8,5.3,19.1,0l22.4-22.4
c19.6-19.6,45.7-30.4,73.3-30.4c27.6,0,53.6,10.8,73.2,30.3c19.6,19.6,30.3,45.6,30.3,73.3
C444.801,187.101,434.001,213.101,414.401,232.701z""/>
</g>
</svg>"
// Build some rect elements based on summarized data above
VAR FilledSvg = SUBSTITUTE(
SvgHeart, "$rects",
CONCATENATEX(
Results,
"<rect width="""
& SvgViewboxWidth
& """ height="""
& SvgViewboxHeight * [Percent]
& """ y="""
& SvgViewboxHeight * [StartingPercent]
& """ fill="""
& [Colour]
& """ stroke=""black""/>"
)
)
RETURN FilledSvg
Regards,
Daniel
Proud to be a Super User!
My course: Introduction to Developing Power BI Visuals
On how to ask a technical question, if you really want an answer (courtesy of SQLBI)
Hi! This would actually save my problem, because the heart was just as an example, but I'm planning to work on a more rectangle shape, and it's also fine if the fill does not represent the exact surface size! Fantastic! However, I have tried to recreate the measure in my Power BI and it doesn't show. I copied the table as it is, and I don't see any errors, but the image is empty. Do you have any idea what could be going wrong? I've never used this kind of code before... Thank you 🙂
@dm-p Very nice! Glad to have a go to for custom visuals/stuff like this!!
@Anonymous , Single icon with the different color I doubt unless you can overlap one over other and do it.
Covering the world! 9:00-10:30 AM Sydney, 4:00-5:30 PM CET (Paris/Berlin), 7:00-8:30 PM Mexico City
Check out the April 2024 Power BI update to learn about new features.
User | Count |
---|---|
112 | |
100 | |
76 | |
74 | |
49 |
User | Count |
---|---|
145 | |
108 | |
107 | |
89 | |
61 |