Forum Discussion

oakgogo's avatar
oakgogo
Helper II
2 years ago
Solved

can SVG expert solve this?

I want to create a SVG image to show in the new card visual, I am not skilled at SVG and now I can only create some text, and I want to do is add 3 element in card visual.

first one is text information, but the color of text should be change along with [cal], if [cal]>0 then green else then red.

the second is a up or down arrow, and the color should be changed either, if [cal]>0 then green else then red.

and the third is a line chart, and the x-axis is come from date[month] and y-axis is from cal, and also if [cal]>0 then green else then red.

now what I finished is just some text information, here is my SVG code:

VAR SVG =
    "data:image/svg+xml;utf8,
    <svg xmlns='http://www.w3.org/2000/svg' height='40' width='150'>
        <g>
        <text font-size='12'>
            <tspan x='6' y='20'>Ach:</tspan>
            <tspan x='6' y='38'>GR:</tspan>
            <tspan x='36' y='20'>"& FORMAT([cal],"0%")&"</tspan>
            <tspan x='36' y='38'>"& FORMAT([cal_2],"0%")&"</tspan>
                </text>
        </g>
    </svg>"
RETURN
    SVG

 

Need Help
Show and Tell
  • Anonymous's avatar
    Anonymous
    2 years ago

    Hi oakgogo ,

    Please try below dax formula:

    SVG =
VAR textColor =
    IF ( [cal] > 0, "green", "red" )
VAR arrow =
    IF ( [cal] > 0, "↑", "↓" )
VAR SVG =
    "data&colon;image/svg+xml;utf8,
<svg xmlns='http://www.w3.org/2000/svg' height='40' width='150'>
    <g>
        <text fill='" & textColor & "' font-size='12'>
            <tspan x='6' y='20'>Ach:</tspan>
            <tspan x='6' y='38'>GR:</tspan>
            <tspan x='36' y='20'>"
        & FORMAT ( [cal], "0%" ) & "</tspan>
            <tspan x='36' y='38'>"
        & FORMAT ( [cal_2], "0%" ) & "</tspan>
        </text>
        <text fill='" & textColor & "' font-size='12' x='100' y='20'>" & arrow & "</text>
    </g>
</svg>"
RETURN
    SVG

     

    Best regards,
    Community Support Team_Binbin Yu
    If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

1 Reply

  • Anonymous's avatar
    Anonymous
    Not applicable
    2 years ago

    Hi oakgogo ,

    Please try below dax formula:

    SVG =
VAR textColor =
    IF ( [cal] > 0, "green", "red" )
VAR arrow =
    IF ( [cal] > 0, "↑", "↓" )
VAR SVG =
    "data&colon;image/svg+xml;utf8,
<svg xmlns='http://www.w3.org/2000/svg' height='40' width='150'>
    <g>
        <text fill='" & textColor & "' font-size='12'>
            <tspan x='6' y='20'>Ach:</tspan>
            <tspan x='6' y='38'>GR:</tspan>
            <tspan x='36' y='20'>"
        & FORMAT ( [cal], "0%" ) & "</tspan>
            <tspan x='36' y='38'>"
        & FORMAT ( [cal_2], "0%" ) & "</tspan>
        </text>
        <text fill='" & textColor & "' font-size='12' x='100' y='20'>" & arrow & "</text>
    </g>
</svg>"
RETURN
    SVG

     

    Best regards,
    Community Support Team_Binbin Yu
    If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.