cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
aleksaste
Helper I
Helper I

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

@aleksaste 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!!!
Check out my External Tool for Power BI Desktop! Microsoft Hates Greg's Quick Measures
YouTube Channel! Microsoft Hates Greg
Check out my latest book!

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)




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!!!
Check out my External Tool for Power BI Desktop! Microsoft Hates Greg's Quick Measures
YouTube Channel! Microsoft Hates Greg
Check out my latest book!

amitchandak
Super User
Super User

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

Did I answer your question? Mark my post as a solution! Appreciate your Kudos!! !!
Dashboard of My Blogs !! Connect on Linkedin

Learn Power BI Beginners !! Advance Power BI Concepts !! Power BI For Tableau User !! Learn Power BI in Hindi !!
Proud to be a Super User!

Helpful resources

Announcements
UG GA Amplification 768x460.png

Launching new user group features

Learn how to create your own user groups today!

November Power BI Update 768x460.png

Check it Out!

Click here to read more about the November 2021 Updates!

M365 768x460.jpg

Microsoft 365 Collaboration Conference | December 7–9, 2021

Join us, in-person, December 7–9 in Las Vegas, for the largest gathering of the Microsoft community in the world.