topic Re: SVG Trend Indicator in Quick Measures Gallery

SVG Trend Indicator

dgwilson — Mon, 13 Aug 2018 19:07:51 GMT

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.

Trend_Image =

VAR MessageText = ""

VAR Radius = 9

VAR Colour = "blue"

VAR Opacity = 0.75

VAR SVG_Neutral = "data&colon;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))

Re: SVG Trend Indicator

tomknight — Tue, 14 Aug 2018 09:34:52 GMT

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

Re: SVG Trend Indicator

dgwilson — Wed, 15 Aug 2018 20:08:33 GMT

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.

Re: SVG Trend Indicator

tomknight — Tue, 27 Nov 2018 16:22:41 GMT

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

Re: SVG Trend Indicator

dgwilson — Tue, 27 Nov 2018 18:02:40 GMT

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

Re: SVG Trend Indicator

tomknight — Wed, 13 Feb 2019 08:53:03 GMT

This doesn't seem to work in the latest update of PowerBI service - I get a missing image placeholder instead of the SVG. Any idea why that might be? It still works fine in PBI Desktop but not in the service.

Thanks,

Tom

Re: SVG Trend Indicator

dgwilson — Wed, 13 Feb 2019 17:57:24 GMT

Likely a browser issue. Or browser version issue.

Does it work in Chrome?

- David

Re: SVG Trend Indicator

tomknight — Wed, 13 Feb 2019 18:16:54 GMT

Strangely it doesn’t work in Chrome or Firefox but it does work in Edge - never seen in issue like this that way round, its usually vice versa. I’ve raised a ticket with Microsoft so will see what they say.

Thanks,

Tom

Re: SVG Trend Indicator

dgwilson — Wed, 13 Feb 2019 18:47:41 GMT

That's really weird. "Everything" works in Chrome.

The SVG code that you have (or are generating)... you can place in a txt file xyz.svg and open that in the browser... so you can test outside of Power BI. There maybe something in the SVG code or headers that is breaking the browser compatability?

- David

Re: SVG Trend Indicator

tomknight — Wed, 13 Feb 2019 19:16:51 GMT

Just tried that and the SVG is sound. I have deployed this with different SVGs in 3 different projects and they all simultanously broke with the Feb update of PBI so there must be a change in PBI somewhere. I thought it might be due to "external" images so I took the URL of an SVG that I found online and put it into a table and set it to Web Image but that worked fine.

Will keep you posted with what Microsoft say. They've asked for the PBIX file.

Thanks for the help,

Tom

Re: SVG Trend Indicator

Anonymous — Fri, 22 Feb 2019 03:01:16 GMT

Getting the same issue

Re: SVG Trend Indicator

tomknight — Fri, 22 Feb 2019 13:15:26 GMT

Microsoft have acknowledged it is a bug and i'm awaiting details of a fix. For now I had to bake the SVGs I wanted into files and host them then use a web URL as usual.

I did notice that the images are still honoured if you export to PDF and it works in Edge just not other browsers.

Re: SVG Trend Indicator

Anonymous — Thu, 28 Feb 2019 05:43:03 GMT

Very interesting....I have the same issue. For me, it is broken in Chrome, Edge, and Firefox however it works in Opera!

Any news from Microsoft? I opened a support ticket a week ago and have heard nothing back from them.

Re: SVG Trend Indicator

tomknight — Thu, 28 Feb 2019 08:45:12 GMT

My ticket is still open and they are still discussing a solution as far as I know. I last heard from them a couple of days ago.

Re: SVG Trend Indicator

tomknight — Fri, 08 Mar 2019 13:01:18 GMT

Microsoft have fixed this and should be released first week of April.

Re: SVG Trend Indicator

Anonymous — Thu, 28 Mar 2019 01:37:29 GMT

OK - good to hear. Thanks

Re: SVG Trend Indicator

Anonymous — Wed, 10 Apr 2019 23:33:25 GMT

Any update? Doesn't appear to be fixed yet?

Re: SVG Trend Indicator

Anonymous — Thu, 11 Apr 2019 06:28:39 GMT

OK, SVG's are now rendering in tables, but not any of the image custom visuals... Which is not ideal as I cannot switch the column headings off for tables...