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

Earn the coveted Fabric Analytics Engineer certification. 100% off your exam for a limited time only!

Reply
Anonymous
Not applicable

Infographic visual - many colors on a single icon

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:

A10%
B20%

C

70%

aleksaste_0-1599770851531.png

Sorry for the horrible drawing 😉

 

Do you guys have any ideas on how to achieve it? 🙂

5 REPLIES 5
Greg_Deckler
Super User
Super User

@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?


@ me in replies or I'll lose your thread!!!
Instead of a Kudo, please vote for this idea
Become an expert!: Enterprise DNA
External Tools: MSHGQM
YouTube Channel!: Microsoft Hates Greg
Latest book!:
Mastering Power BI 2nd Edition

DAX is easy, CALCULATE makes DAX hard...

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:

dm-p_0-1599791584964.png

(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):

dm-p_1-1599792101341.png

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

 




Did I answer your question? Mark my post as a solution!

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)




Anonymous
Not applicable

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 🙂

aleksaste_0-1599819490642.png

 

@dm-p Very nice! Glad to have a go to for custom visuals/stuff like this!!


@ me in replies or I'll lose your thread!!!
Instead of a Kudo, please vote for this idea
Become an expert!: Enterprise DNA
External Tools: MSHGQM
YouTube Channel!: Microsoft Hates Greg
Latest book!:
Mastering Power BI 2nd Edition

DAX is easy, CALCULATE makes DAX hard...
amitchandak
Super User
Super User

@Anonymous , Single icon with the different color I doubt unless you can overlap one over other and do  it. 

Helpful resources

Announcements
April AMA free

Microsoft Fabric AMA Livestream

Join us Tuesday, April 09, 9:00 – 10:00 AM PST for a live, expert-led Q&A session on all things Microsoft Fabric!

March Fabric Community Update

Fabric Community Update - March 2024

Find out what's new and trending in the Fabric Community.