SVG Trend Indicator 08-13-2018 12:07 PM

[dgwilson]

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: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))

[tomknight]

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

[dgwilson]

Likely a browser issue. Or browser version issue.

Does it work in Chrome?

- David

[tomknight]

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

[Anonymous]

Getting the same issue

[tomknight]

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.

[Anonymous]

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.

[tomknight]

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.

[tomknight]

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

[Anonymous]

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...

[Anonymous]

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

[Anonymous]

OK - good to hear.  Thanks

[dgwilson]

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

[tomknight]

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

[tomknight]

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

[dgwilson]

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.

[tomknight]

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

[dgwilson]

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