cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
hejszyszky
Helper I
Helper I

Bullet chart SVG

Hi,

I've been trying to create bullet charts within table with variables. It does not work and outputs "image" icon.  I bet that it is SVG code related problem, but since i am not an expert with it and i cant find solution to resolve this problem i would be pleased to get some help 🙂 Here is code below, thanks in advance!

 

Bullet = 

VAR vBackground = "%23ffffff"

VAR vBarColor = Switch(
    True(),
                [losspln] <= [targetpln], "%2339a964",
                [targetpln] = 0, "%23ffa160",
                [losspln] > [targetpln], "%23cd1319"
                )

VAR vActBarColor = "%23333333"
VAR vTargetBarColor = "%23888888"

// Base Text for drawing
 
VAR vBaseText = 
"data&colon;image/svg+xml;utf8, <svg width='100' height='100' version='1.1' xmlns='http://www.w3.org/2000/svg' style= 'background: " & vBackground & "'>
  <rect  x='0'       y='25'   rx='2' ry='2'   width='100'       height='50'   style='fill:" & vBarColor & ";stroke-width:0;fill-opacity:1' /> 
  <rect  x='0'       y='45'   rx='2' ry='2'   width=""#Actual"" height='10'   style='fill:" & vActBarColor & ";stroke-width:0;fill-opacity:1' />
  <rect  x=""#Budget"" y='30'   rx='2' ry='2'   width='6'         height='40'   style='fill:" & vTargetBarColor & ";stroke:black;stroke-width:0;fill-opacity:1;stroke-opacity:1' />
</svg>"

VAR vObjects = ALL(Resource[Resource Short])

VAR vMaxActual = MAXX( vObjects, [losspln] )
VAR vMaxGoal   = MAXX( vObjects, [targetpln] )

VAR vXAxisRangeBase = MAX( vMaxActual, vMaxGoal )

VAR vActual = INT( DIVIDE( [losspln], vXAxisRangeBase ) * 90 )
VAR vGoal   = INT( DIVIDE( [targetpln],  vXAxisRangeBase ) * 90 )

VAR vReturn = SUBSTITUTE( SUBSTITUTE( vBaseText, "#Actual", vActual ), "#Goal", vGoal )

RETURN IF( [losspln], vReturn, BLANK() )

 

 

1 ACCEPTED SOLUTION
KerKol
Resolver III
Resolver III

What does your svg code show when you change it to text and view in focus mode?

 

KerKol_1-1634352154506.png

 

You'll need to be careful your width and height values are properly escaped...

width=""#Actual""  will need to be something like... width="&"'"&"#Actual"&"'"&"

 

View solution in original post

2 REPLIES 2
KerKol
Resolver III
Resolver III

What does your svg code show when you change it to text and view in focus mode?

 

KerKol_1-1634352154506.png

 

You'll need to be careful your width and height values are properly escaped...

width=""#Actual""  will need to be something like... width="&"'"&"#Actual"&"'"&"

 

View solution in original post

Yes, that obviously was a problem with apostrophes. Changed also ' to ""

Helpful resources

Announcements
Power BI December 2021 Update_carousel 768x460.jpg

Check it Out!

Click here to read more about the December 2021 Updates!

User Group Leader Meeting January 768x460.png

Calling all User Group Leaders!

Don't miss the User Group Leader meetings on January, 24th & 25th, 2022.

Jan 2022 Dev Camp 768x460 copy.png

Power BI Dev Camp- January 27th, 2022

Mark your calendars and join us for our next Power BI Dev Camp!

Top Solution Authors
Top Kudoed Authors