Forum Discussion
powerbiexpert22
Impactful Individual
Impactful Individualbar KPI card
can it be possible to show like below in KPI card?
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] - 1VAR 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: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>"RETURNIMG
BIstvan
Resolver I
Resolver Ipowerbiexpert22 You can build the bars with different colors. Now it depends if you use unicode shapes there are websites full of them.
Check the one below.
Unicode Shapes Text Symbols - Copy Paste Dump (r74n.com).
Or if you choose the SVG bar method then you need to edit the SVG code to fit your calculations.
The color is the slightest issue
BIstvanResolver I
Resolver Ipowerbiexpert22 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: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