Forum Discussion

planc7's avatar
planc7
Helper I
1 year ago
Solved

Conditional Formatting: adding icon with field value option

Hi everyone,

 

I'm struggling to add custom icon in matrix with field value option.

 

I have created this measure expecting the icon appearing in the blue column but nothing happened.

 

What am I doing wrong?

 

 

 

 

The measure used is the following:

 

 

Test Date Gates Gantt = 

Var svgStart = "data&colon;image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'> <circle cx='50' cy='50' r='40' stroke='purple' stroke-width='4' fill='purple' />"
var svgFinish = "</svg>"

var res= 
IF(SELECTEDVALUE('Tracker Gates Home'[Date Type])="Actual/Planned" && MAX('Tracker Gates Home'[Week])="202312",
 svgStart & "<circle cx='50' cy='50' r='40'  stroke='#5D6E5A' stroke-width='4' fill='#5D6E5A' />" & svgFinish)
    

return res

 

 

 

Thank you!

Need Help
  • Anonymous's avatar
    Anonymous
    1 year ago

    Hi planc7 ,
    Thanks for amitchandak reply.
    After making sure that your filters are not incorrect, you can check to see if the Data Category of your measure is set to the Image URL format, so that the SVG format you are referencing will be recognized correctly. The following pbix file is an example of using the SVG format.

     

    Best regards,
    Albert He

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

     

     

6 Replies

    • planc7's avatar
      planc7
      Helper I
      1 year ago

      I've already tried replacing SVG code with Unichar character but nothing changed.

      What i need to do is adding a vertical line in that matrix (without adding another field in the value section), and I was trying to reach this result thinking of some work around with icons.

       

      The expected outcome should be the following:

      a matrix gantt with a milestones (yes, I've already tried with custom visual gantt but they are not suitable for my use case)

       

  • Anonymous's avatar
    Anonymous
    Not applicable
    1 year ago

    Hi planc7 ,
    Thanks for amitchandak reply.
    After making sure that your filters are not incorrect, you can check to see if the Data Category of your measure is set to the Image URL format, so that the SVG format you are referencing will be recognized correctly. The following pbix file is an example of using the SVG format.

     

    Best regards,
    Albert He

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

     

     

    • planc7's avatar
      planc7
      Helper I
      1 year ago

      Thank you!

       

      It seems working!

       

      However, I think I have some problem in the SVG Code.

      I downloaded this code from SVG Viewer but I'm not able to show image in PowerBi.

       

      <svg fill="#000000" width="800px" height="800px" viewBox="-6.5 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
<title>bar</title>
<path d="M8.469-1.156h2.25v29.813h-2.25v-29.813z"></path>
</svg>

       

       

      Is the following code right or am I doing something wrong?

       

      Thank you again 🙂

       

       

      SWITCH(
    TRUE(),
    SUM('Table'[Indicator]) >=0 && SUM('Table'[Indicator]) <=2 ,"data&colon;image/svg+xml;utf8, <svg fill='#000000' width='800px' height='800px' viewBox='-6.5 0 32 32' version='1.1' xmlns='http://www.w3.org/2000/svg'> <path d='M8.469-1.156h2.25v29.813h-2.25v-29.813z'></path></svg>"
)

       

      • Anonymous's avatar
        Anonymous
        Not applicable
        1 year ago

        Hi planc7 ,
        You can try this

        Icon 2 = 
SWITCH(
    TRUE(),
    SUM('Table'[Indicator]) >=0 && SUM('Table'[Indicator]) <=2 ,"data&colon;image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' version='1.1' > <path d='M8.469-1.156h2.25v29.813h-2.25v-29.813z'></path></svg>",
    SUM('Table'[Indicator]) > 2 && SUM('Table'[Indicator]) <=3,"data&colon;image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'> <circle cx='50' cy='50' r='30' stroke='yellow' stroke-width='4' fill='yellow' /> </svg>",
    SUM('Table'[Indicator]) > 3,"data&colon;image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'> <circle cx='50' cy='50' r='20' stroke='green' stroke-width='4' fill='green' /> </svg>"
)

        Final output

        Best regards,
        Albert He

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