If the goal is an actual comparison, it’s hard to beat the bullet chart. Highly efficient in terms of the amount of space they take up, with excellent data to ink ratio, they are both immediately intuitive yet data-dense without relying on loud distracting colors. The downside is that up until a week ago you could have them as a sparkline in a table which is where you need them the most.
In this video, we’ll take you through building a bullet chart measure from nothing but an SVG snippet of code. This may well become your favorite new visual, and you’ll be able to use the techniques in these videos to start thinking about how to create your own SVG sparklines and small multiples.
The Code
My Favorite 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: %23ffffff""_
_rect x=""0"" y=""25"" rx=""2"" ry=""2"" width=""100"" height=""50"" style=""fill:%23f2f2f2;stroke-width:0;fill-opacity:1"" /_
_rect x=""0"" y=""45"" rx=""2"" ry=""2"" width=""#Actual"" height=""10"" style=""fill:%23333333;stroke-width:0;fill-opacity:1"" /_
_rect x=""#Goal"" y=""30"" rx=""2"" ry=""2"" width=""6"" height=""40"" style=""fill:%23888888;stroke:black;stroke-width:0;fill-opacity:1;stroke-opacity:1"" /_
_/svg_"
VAR vObjects = ALL( Sales[Location], Sales[City],Sales[Country],Sales[State/Province] )
VAR vMaxActual = MAXX( vObjects, [Total Sales] )
VAR vMaxGoal = MAXX( vObjects, [Total Goal] )
VAR vXAxisRangeBase = MAX( vMaxActual, vMaxGoal )
VAR vActual = INT( DIVIDE( [Total Sales], vXAxisRangeBase ) * 90 )
VAR vGoal = INT( DIVIDE( [Total Goal], vXAxisRangeBase ) * 90 )
VAR vReturn = SUBSTITUTE( SUBSTITUTE( vBaseText, "#Actual", vActual ), "#Goal", vGoal )
RETURN IF( [Total Sales], vReturn, BLANK() )
