Forum Discussion
Bullet Chart Sparkline SVG Not Rendering in Table
- 6 years ago
Anonymous
Ended up going with a Bullet Chart but the pattern was similar. Here's a screen shot of the final table and the DAX for the Bullet Chart in the table.
BH vs AH = // Static column color - use %23 instead of # for Firefox compatibility VAR vBackground = "%23ffffff" //Set Bar Color based on AH vs BH VAR vBarColor = Switch(True(), [AH] <= [BH], "%2339a964", [BH] = 0, "%23ffa160", [AH] > [BH], "%23cd1319") VAR vActBarColor = "%23333333" VAR vTargetBarColor = "%23888888" // Base Text for drawing SVG Bullet Chart VAR vBaseText = "data: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>" //Define the X Axis Range //List All Cost Codes VAR vObjects = All(Hours[Cost Code]) //Find Max AH & BH Across Cost Codes VAR vMaxActual = MAXX( vObjects, [AH] ) VAR vMaxBudget = MAXX( vObjects, [BH] ) VAR vXAxisRangeBase = MAX( vMaxActual, vMaxBudget ) //Define Distance Across X Axis as Percentage. Multiplying by 90 to Add Padding VAR vActual = INT( DIVIDE( [AH], vXAxisRangeBase ) * 90 ) VAR vBudget = INT( DIVIDE( [BH], vXAxisRangeBase ) * 90 ) //Replace varibles with values in SVG Text VAR vReturn = SUBSTITUTE( SUBSTITUTE( vBaseText, "#Actual", vActual ), "#Budget", vBudget ) //Check to see if there were some Actual Hours RETURN IF( [AH], vReturn, BLANK() )Hope this helps!!!
same issue( Have you found the solution?!
Anonymous
Ended up going with a Bullet Chart but the pattern was similar. Here's a screen shot of the final table and the DAX for the Bullet Chart in the table.
BH vs AH =
// Static column color - use %23 instead of # for Firefox compatibility
VAR vBackground = "%23ffffff"
//Set Bar Color based on AH vs BH
VAR vBarColor = Switch(True(),
[AH] <= [BH], "%2339a964",
[BH] = 0, "%23ffa160",
[AH] > [BH], "%23cd1319")
VAR vActBarColor = "%23333333"
VAR vTargetBarColor = "%23888888"
// Base Text for drawing SVG Bullet Chart
VAR vBaseText =
"data: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>"
//Define the X Axis Range
//List All Cost Codes
VAR vObjects = All(Hours[Cost Code])
//Find Max AH & BH Across Cost Codes
VAR vMaxActual = MAXX( vObjects, [AH] )
VAR vMaxBudget = MAXX( vObjects, [BH] )
VAR vXAxisRangeBase = MAX( vMaxActual, vMaxBudget )
//Define Distance Across X Axis as Percentage. Multiplying by 90 to Add Padding
VAR vActual = INT( DIVIDE( [AH], vXAxisRangeBase ) * 90 )
VAR vBudget = INT( DIVIDE( [BH], vXAxisRangeBase ) * 90 )
//Replace varibles with values in SVG Text
VAR vReturn = SUBSTITUTE( SUBSTITUTE( vBaseText, "#Actual", vActual ), "#Budget", vBudget )
//Check to see if there were some Actual Hours
RETURN IF( [AH], vReturn, BLANK() )
Hope this helps!!!
- Anonymous6 years agoNot applicable
thanks a lot for a quick answer!!!
could you please help a bit more... I still cannot get the logic here.
so I'm openning
<svg
just after this part "data:image/svg+xml;utf8," and close it at the end, right? why do we have
" & vBackground & "'>
? what are we closing here?
- bh983816 years agoRegular Visitor
Anonymous
Not 100% sure on this.... I think that these are the initail parameters for the SVG. It needs to know what the Background color is so I'm passing in a variable "vBackground" and then closing off the opening bracket. Here's a snippet of that section in VS Code which may make it clearer.
- Anonymous6 years agoNot applicable
thank you a lot, you really helped!!!!!! I think, you have to accept your answer as the acepted solution here to help others