Skip to content

Instantly share code, notes, and snippets.

@bjulius
Created October 24, 2024 13:34
Show Gist options
  • Save bjulius/ff2d3e50dd36b7bbe5cb5f757ee0d467 to your computer and use it in GitHub Desktop.
Save bjulius/ff2d3e50dd36b7bbe5cb5f757ee0d467 to your computer and use it in GitHub Desktop.
DAX SVG Measure to Generate IBCS-Style Bullet Charts
//Created by Brian Julius, 23 Oct 2024 using AI model o1-P
BulletChartSVG =
VAR __TotalSales = [Total Sales]
VAR __TargetSales = [Current Year Sales Target]
-- Normalize the bars by using the maximum target sales across all data
VAR __MaxTargetSales = [Max Sales Target]
-- Scale the bars based on the maximum target sales
VAR __MaxValue = __MaxTargetSales * 1.1 -- Add 10% buffer for scaling
VAR __MaxBarLength = 150
VAR __ScaleFactor = __MaxBarLength / __MaxValue
-- Calculate the lengths for total sales and target sales positions
VAR __TotalSalesLength = __TotalSales * __ScaleFactor
VAR __TargetSalesPosition = __TargetSales * __ScaleFactor
-- Adjust positioning and dimensions
VAR __LeftMargin = 20
VAR __BarYPosition = 15 -- Shifted upwards by 5 units
VAR __BarHeight = 12 -- Increased by 20%
VAR __HalfBarHeight = __BarHeight / 2
-- SVG Header with increased height to accommodate adjustments
VAR __svgHeader = "data:image/svg+xml;utf8," & "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='60'>"
-- Black bar up to the minimum of Total Sales and Target Sales
VAR __BlackRectLength = MIN(__TotalSalesLength, __TargetSalesPosition)
VAR __BlackRect =
"<rect x='" & FORMAT(__LeftMargin, "0") & "' y='" & FORMAT(__BarYPosition, "0") &
"' width='" & FORMAT(__BlackRectLength, "0") & "' height='" & FORMAT(__BarHeight, "0") &
"' fill='black' />"
-- Additional rectangles based on whether Total Sales exceed the Target
VAR __AdditionalRectangles =
IF(
__TotalSales >= __TargetSales,
-- Total Sales exceed Target: draw upper half black, lower half green beyond the target
"<rect x='" & FORMAT(__LeftMargin + __TargetSalesPosition, "0") & "' y='" & FORMAT(__BarYPosition, "0") &
"' width='" & FORMAT(__TotalSalesLength - __TargetSalesPosition, "0") & "' height='" & FORMAT(__HalfBarHeight, "0") &
"' fill='black' />" &
"<rect x='" & FORMAT(__LeftMargin + __TargetSalesPosition, "0") & "' y='" & FORMAT(__BarYPosition + __HalfBarHeight, "0") &
"' width='" & FORMAT(__TotalSalesLength - __TargetSalesPosition, "0") & "' height='" & FORMAT(__HalfBarHeight, "0") &
"' fill='green' />",
-- Total Sales below Target: draw upper half white, lower half red up to the target
"<rect x='" & FORMAT(__LeftMargin + __TotalSalesLength, "0") & "' y='" & FORMAT(__BarYPosition, "0") &
"' width='" & FORMAT(__TargetSalesPosition - __TotalSalesLength, "0") & "' height='" & FORMAT(__HalfBarHeight, "0") &
"' fill='white' />" &
"<rect x='" & FORMAT(__LeftMargin + __TotalSalesLength, "0") & "' y='" & FORMAT(__BarYPosition + __HalfBarHeight, "0") &
"' width='" & FORMAT(__TargetSalesPosition - __TotalSalesLength, "0") & "' height='" & FORMAT(__HalfBarHeight, "0") &
"' fill='red' />"
)
-- Triangle aligned at the same position across all rows
VAR __TriangleX = __LeftMargin + __TargetSalesPosition
VAR __TriangleY = __BarYPosition + __BarHeight
VAR __TriangleHeight = 10
VAR __TrianglePoints =
FORMAT(__TriangleX, "0") & "," & FORMAT(__TriangleY, "0") & " " & -- Tip of the triangle at the edge of the bar
FORMAT(__TriangleX - 5, "0") & "," & FORMAT(__TriangleY + __TriangleHeight, "0") & " " &
FORMAT(__TriangleX + 5, "0") & "," & FORMAT(__TriangleY + __TriangleHeight, "0")
VAR __TrianglePolygon = "<polygon points='" & __TrianglePoints & "' fill='black' />"
-- Labels for Total Sales with adjusted position and color
VAR __TotalSalesLabelX = IF(
__TotalSales >= __TargetSales,
__LeftMargin + __TotalSalesLength + 5, -- Green bar case: label outside the bar
__LeftMargin + __TotalSalesLength - 5 -- Red bar case: label inside the black bar
)
VAR __TotalSalesLabelY = __BarYPosition + __BarHeight / 2 + 5
VAR __TotalSalesLabelColor = IF(__TotalSales >= __TargetSales, "black", "white")
VAR __TotalSalesLabelAnchor = IF(__TotalSales >= __TargetSales, "start", "end")
VAR __TotalSalesLabel =
"<text x='" & FORMAT(__TotalSalesLabelX, "0") & "' y='" & FORMAT(__TotalSalesLabelY, "0") &
"' font-size='10' fill='" & __TotalSalesLabelColor & "' text-anchor='" & __TotalSalesLabelAnchor &
"' font-family='Arial'>" & FORMAT(__TotalSales, "$0.0") & "</text>"
-- Label for Target Sales with adjusted position to prevent cutoff
VAR __TargetSalesLabelX = __TriangleX - 10
VAR __TargetSalesLabelY = __TriangleY + __TriangleHeight + 10 -- Adjusted Y position
VAR __TargetSalesLabel =
"<text x='" & FORMAT(__TargetSalesLabelX, "0") & "' y='" & FORMAT(__TargetSalesLabelY, "0") &
"' font-size='10' fill='black' font-family='Arial'>" & FORMAT(__TargetSales, "$0.0") & "</text>"
-- SVG Footer
VAR __svgFooter = "</svg>"
-- Combine all SVG elements
VAR __Result =
IF(
HASONEVALUE(Dates[Year]),
__svgHeader & __BlackRect & __AdditionalRectangles & __TrianglePolygon & __TotalSalesLabel & __TargetSalesLabel & __svgFooter,
BLANK()
)
RETURN __Result
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment