Accepted Solution

SVG Trend Indicator

1086 Views
Highlighted
Member
Posts: 48
Registered: ‎10-06-2017
Accepted Solution

SVG Trend Indicator

Just like SVG SparkLines this DAX produces a Trend indicator, Up/Down/Neutral.

Add it as a field in your table, keyed off a numeric value to give you the up/down/neutral.

One additional trick is to set the image size as small as possible (24) under Grid as part of the formatting.

 

SVG Trend Indicator.PNG

Trend_Image =

    VAR MessageText = ""

    VAR Radius = 9

    VAR Colour = "blue"

    VAR Opacity = 0.75

    VAR SVG_Neutral = "data:image/svg+xml;utf8," &

              "<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='50' height='20'>" &

              "<circle cx='25' cy='10' r='" & Radius & "' fill='" & Colour & "' fill-opacity='" & Opacity & "' />" &

              "</svg>"

    VAR SVG_UP = "data&colon;image/svg+xml;utf8," &

              "<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='50' height='20'>" &

              "<polygon points=""05,20 45,20 25,1"" style=""fill:green;stroke:green;stroke-width:0;fill-rule:evenodd;"" />" &

              "</svg>"

    VAR SVG_DN = "data&colon;image/svg+xml;utf8," &

              "<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='50' height='20'>" &

              "<polygon points=""05,1 45,1 25,20"" style=""fill:red;stroke:red;stroke-width:0;fill-rule:evenodd;"" />" &

              "</svg>"

RETURN

    IF('Customer KPI'[KPI_Trend] > 0, SVG_UP, IF('Customer KPI'[KPI_Trend] < 0, SVG_DN, SVG_Neutral))

 


Accepted Solutions
Member
Posts: 48
Registered: ‎10-06-2017

Re: SVG Trend Indicator

Thank you.

 

Yes an issue with copy & paste. and Having tried it again, the editor here is doing "fancy" stuff that I cannot work around.

The "magic" is attached in an image below.

 

 

ThatTextForSVG.PNG

View solution in original post


All Replies
Frequent Visitor
Posts: 7
Registered: ‎01-08-2018

Re: SVG Trend Indicator

[ Edited ]

Thanks a lot for posting this - it's fantastic!

 

The DAX didn't work out of the box for me (I got the broken image icon) but I followed the link in your other DAX based sparkline post and saw that the prefix for the SVG data was slightly different. I think the forum is changing the code when you save it.

 

If you replace the "&colon;" in the code with an actual colon it works perfectly.

 

Thanks again,


Tom

Member
Posts: 48
Registered: ‎10-06-2017

Re: SVG Trend Indicator

Thank you.

 

Yes an issue with copy & paste. and Having tried it again, the editor here is doing "fancy" stuff that I cannot work around.

The "magic" is attached in an image below.

 

 

ThatTextForSVG.PNG

Frequent Visitor
Posts: 7
Registered: ‎01-08-2018

Re: SVG Trend Indicator

Hi,

 

Does this work for you in a total row?

 

It doesn't seem to work for me and I don't know why. It should calculate exactly the same shouldn't it?

 

Thanks,


Tom

Member
Posts: 48
Registered: ‎10-06-2017

Re: SVG Trend Indicator

That's a good question. I haven't used it in a total row.