Forum Discussion

powerbiexpert22's avatar
powerbiexpert22
Icon for Impactful Individual rankImpactful Individual
2 years ago
Solved

bar KPI card

can it be possible to show like below in KPI card?    
Need Help
  • BIstvan's avatar
    BIstvan
    2 years ago

    powerbiexpert22  Check the below measure using the SVG method. You can play with the colors at your will

    PPT SVG BAR =

    VAR PERC = [Sales21] / [Sales20] - 1

    VAR PERCCOLOR1 =
        IF(PERC <= 0.1, "BLACK", "RED")

    VAR PERCCOLOR2 =
        IF(PERC <= 0.2, "BLACK", "RED")

    VAR PERCCOLOR3 =
        IF(PERC <= 0.3, "BLACK", "RED")

    VAR PERCCOLOR4 =
        IF(PERC <= 0.4, "BLACK", "RED")

    VAR PERCCOLOR5 =
        IF(PERC <= 0.5, "BLACK", "RED")

    VAR PERCCOLOR6 =
        IF(PERC <= 0.6, "BLACK", "RED")

    VAR PERCCOLOR7 =
        IF(PERC <= 0.7, "BLACK", "RED")

    VAR PERCCOLOR8 =
        IF(PERC <= 0.8, "BLACK", "RED")

    VAR PERCCOLOR9 =
        IF(PERC <= 0.9, "BLACK", "RED")

    VAR PERCCOLOR10 =
        IF(PERC <= 1, "BLACK", "RED")

    VAR IMG =
    "data&colon;image/svg+xml;utf8,<svg width='1312' height='73' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' overflow='hidden'>
    <defs><clipPath id='clip0'><rect x='109' y='614' width='1312' height='73'/>
    </clipPath></defs><g clip-path='url(#clip0)' transform='translate(-109 -614)'>
    <rect x='109' y='614' width='84.9999' height='73.0002' fill='"&PERCCOLOR1&"'/>
    <rect x='194' y='614' width='52.0003' height='73.0002' fill='#FFFFFF'/>
    <rect x='331' y='614' width='51.9999' height='73.0002' fill='#FFFFFF'/>
    <rect x='468' y='614' width='52.0003' height='73.0002' fill='#FFFFFF'/>
    <rect x='605' y='614' width='50.9999' height='72.0002' fill='#FFFFFF'/>
    <rect x='246' y='614' width='84.9999' height='73.0002' fill='"&PERCCOLOR2&"'/>
    <rect x='383' y='614' width='84.9999' height='73.0002' fill='"&PERCCOLOR3&"'/>
    <rect x='520' y='614' width='84.9999' height='73.0002' fill='"&PERCCOLOR4&"'/>
    <rect x='656' y='614' width='86.0003' height='72.0002' fill='"&PERCCOLOR5&"'/>
    <rect x='740' y='614' width='51.9999' height='72.0002' fill='#FFFFFF'/>
    <rect x='793' y='614' width='85.9999' height='72.0002' fill='"&PERCCOLOR6&"'/>
    <rect x='927' y='614' width='85.9999' height='72.0002' fill='"&PERCCOLOR7&"'/>
    <rect x='877' y='614' width='52.0002' height='72.0002' fill='#FFFFFF'/>
    <rect x='1063' y='614' width='85.0002' height='72.0002' fill='"&PERCCOLOR8&"'/>
    <rect x='1013' y='614' width='51.9999' height='72.0002' fill='#FFFFFF'/>
    <rect x='1147' y='614' width='50.9999' height='72.0002' fill='#FFFFFF'/>
    <rect x='1199' y='614' width='84.9999' height='72.0002' fill='"&PERCCOLOR9&"'/>
    <rect x='1285' y='614' width='51.0002' height='72.0002' fill='#FFFFFF'/>
    <rect x='1336' y='614' width='84.9999' height='72.0002' fill='"&PERCCOLOR10&"'/>
    </g></svg>"

    RETURN
    IMG




Anonymous's avatar
Anonymous
Not applicable
2 years ago

Hi powerbiexpert22 ,

 

Your solution is great, BIstvan . It worked like a charm! Here I have another idea in mind, and I would like to share it for reference. 

 

You can use svg images to draw the desired pattern. You can refer to the example below.

Measure = 
"data&colon;image/svg+xml;utf8,
<svg xmlns='http://www.w3.org/2000/svg' width='102' height='12'>
<rect x='0' y='0' stroke='green' stroke-width='4' width='102' height='12' fill='rgba(0,0,0,0)'>  </rect>
    <rect x='1' y='1' width='"&100*[Private Count]&"' height='10' fill='deepskyblue' />
    <rect x='"&1+100*[Private Count]&"' y='1' width='"&100*[Public Count]&"' height='10' fill='blue'/>
    <rect x='"&1+100*[Private Count]+100*[Public Count]&"' y='1' width='"&100*[Business Count]&"' height='10' fill='red'/> 

<text x='"&100*[Private Count]&"' y='8' text-anchor='end' font-size='5'>"&100*ROUND([Private Count],2)&"%" &"</text>
<text x='"&100*[Private Count]+100*[Public Count]&"' y='8' text-anchor='end' font-size='5'>"&100*ROUND([Public Count],2)&"%" &"</text>
<text x='100' y='8' text-anchor='end' font-size='5'>"&100*ROUND([Business Count],2)&"%" &"</text>

</svg>"

 

 

Best Regards,

Clara Gong

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

  • BIstvan's avatar
    BIstvan
    Icon for Resolver I rankResolver I
    2 years ago

    Anonymous  Indeed. With SVG images images you can do a lot more. Incorporate them in to tables or matrixes