SVG HTML Charts UDFs
FUNCTION SVG_Shape = (IconIndex:numeric,Color:string)=> "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' id='wujunmin' width='48' height='48'>" & SWITCH(IconIndex, 1,"<rect rx='24' x='0' y='0' width='48' height='48' fill='" & Color & "'/>", 2,"<rect rx='5' x='0' y='0' width='48' height='48' fill='" & Color & "'/>", 3,"<path d='M5.41421 22.5858L22.5858 5.41421C23.3668 4.63317 24.6332 4.63316 25.4142 5.41421L42.5858 22.5858C43.3668 23.3668 43.3668 24.6332 42.5858 25.4142L25.4142 42.5858C24.6332 43.3668 23.3668 43.3668 22.5858 42.5858L5.41421 25.4142C4.63317 24.6332 4.63316 23.3668 5.41421 22.5858Z' fill='" & Color & "'/>", 4,"<circle cx='24' cy='24' r='20' stroke='" & Color & "' fill='none' stroke-width='2'/>") & " </svg>" e.g. Measure = SVG_Shape(3,if([M.KPI]>=0.5,"green","rgb(255,0,0)")) FUNCTION SVG_Text_Icon = (TextIcon:string,BackgroundColor:string,FontColor:string)=> "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' id='wujunmin' width='96' height='96'> <rect rx='5' x='0' y='0' width='96' height='96' fill='" & BackgroundColor & "'/> <text x='48' y='48' text-anchor='middle' dominant-baseline='central' font-size='60' fill='" & FontColor & "'>" & TextIcon & "</text1> </svg>" e.g. Measure = SVG_Text_Icon(IF([M.KPI]>=1,"A","B"), IF([M.KPI]>=1,"green","red") ,"snow") FUNCTION SVG_Rank = (ColumnRank:anyref,MeasureRank:numeric expr,BackgroundColor:string)=> "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' id='wujunmin' width='96' height='96'> <rect rx='48' x='0' y='0' width='96' height='96' fill='" & BackgroundColor & "'/> <text x='48' y='48' text-anchor='middle' dominant-baseline='central' font-size='60' fill='snow'>" & RANKX(ALLSELECTED(ColumnRank),MeasureRank) & "</text> </svg>" e.g. Measure = SVG_Rank('store'[storeID],[M.sales],"brown") FUNCTION SVG_Bar = (ColumnForBar:anyref,MeasureForBar:numeric expr,Color:string)=> VAR MaxValue = MAXX(ALLSELECTED(ColumnForBar), MeasureForBar) VAR Width = 280 * MeasureForBar / MaxValue RETURN "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' id='wujunmin' width='300' height='36' > <rect rx='2' x='10' y='16' width='280' height='4' fill='#f0f0f0'/> <rect rx='2' x='"& (300-Width)/2 & "' y='12' width='" & Width & "' height='12' fill='" & Color & "' stroke='none'/> <text x='150' y='8' text-anchor='middle' font-size='11' fill='#333333'> " & FORMAT(MeasureForBar,"#,##") & " </text> </svg>" e.g. Measure= SVG_Bar('store'[storeID],[M.KPI],"Deepskyblue") FUNCTION SVG_Progress_Bar = (PctMeasure:numeric,Color:string)=> "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='30'> <path id='wujunmin' d='M0 15L200 15' stroke='" & Color & "' stroke-opacity='0.4' stroke-width='10' stroke-dasharray='2'/><path d='M0 15L" & 200 * PctMeasure & " 15' stroke='" & Color & "' stroke-width='10'/> </svg>" e.g. Measure = SVG_Progress_Bar([M.Pct],"brown") FUNCTION SVG_Gradient_Bar = (ColumnForBar:anyref,MeasureForBar:numeric expr,Color:string)=> VAR MaxValue = MAXX ( ALLSELECTED(ColumnForBar), MeasureForBar) VAR LinearGradient= " <defs> <linearGradient id='wujunmin'> <stop offset='0%' style='stop-color:white'/> <stop offset='100%' style='stop-color:" & Color & "'/> </linearGradient> </defs>" VAR SVG = " data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='200' height='30' > " & LinearGradient & " <rect rx='2' x='0' y='5' width='" & 200 * MeasureForBar / MaxValue & "' height='20' fill='url(#wujunmin)' /> </svg>" RETURN SVG e.g. Measure = SVG_Gradient_Bar('Store'[StoreID],[M.KPI],"Brown") FUNCTION SVG_Waffle = (PctMeasure:numeric,Color:string)=> VAR t = GENERATESERIES ( 1, 10 ) VAR tPlus = GENERATE ( SELECTCOLUMNS ( t, "Value1", [Value] ), t ) VAR tPlusPlus = ADDCOLUMNS ( tPlus, "Index", RANKX ( tPlus, [Value] + [Value1] / 100,, ASC ) ) VAR tWaffle = ADDCOLUMNS ( tPlusPlus, "circle", "<circle cx='" & [Value] * 10 -5 & "' cy='" & [Value1] * 10 -5 & "' r='4' fill='" & IF ( [Index] <= ROUND (PctMeasure * 100, 0 ), Color , "LightGrey" ) & "' />") RETURN "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' id='wujunmin' width='100' height='100'> <g transform='rotate(-90,50,50)'>" & CONCATENATEX ( tWaffle, [circle] ) & "</g> </svg> " e.g. Measure = SVG_Waffle([M.Pct],IF([M.Pct]<0.5,"Brown","green")) FUNCTION SVG_Bubble = (ColumnForBubble:anyref,MeasureForBubble:numeric expr,Color:string)=> "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' id='wujunmin' width='200' height='200'> <circle cx='100' cy='100' r='" & 100 * SQRT ( ABS ( MeasureForBubble ) / MAXX ( ALLSELECTED ( ColumnForBubble ), ABS ( MeasureForBubble ) ) ) & "' fill='" & Color & "'/> </svg>" e.g. Measure = SVG_Bubble('Store'[StoreID],[M.KPI],"Deepskyblue") --------------- HTML UDFs(HTML Content Visual) FUNCTION HTML_CircleBG_Text= (AnyText:string,BackgroundColor:string,TextColor:string)=> "<head> <style> p { font-size: 30px; color: white; font-weight: bold; line-height: 1; font-family: Arial, sans-serif; } .wujunmin { background-color: " & BackgroundColor & "; border-radius: 50%; margin: 3px; width: 60px; height: 60px; color: " & TextColor & "; display: inline-flex; align-items: center; justify-content: center; } </style> </head> <body> <p>" & CONCATENATEX( GENERATESERIES(1,LEN(AnyText)), "<span class='wujunmin'>" & MID(AnyText,[Value],1) & "</span>",,[Value],ASC ) & "</p> </body>" e.g. Measure = HTML_CircleBG_Text("wujunmin","Brown","Snow") FUNCTION HTML_Progress_Bar = (ColumnForPct:anyref,PctMeasure:numeric,Color:string)=> "<p style='font-size: 20px;background: linear-gradient(to right, " & Color & " " & FORMAT(PctMeasure,"0%") & ", lightgrey 0);border-radius: 20px;white-space: nowrap;padding-left:5px;'>" & SELECTEDVALUE(ColumnForPct) & " " & FORMAT(PctMeasure,"0%") & "</p>" e.g. Measure = HTML_Progress_Bar('Store'[StoreID],[M.Pct],"tomato") FUNCTION HTML_Bar_Ring = (ColumnForChart:anyref,MeasureForBar:numeric expr,MeasureForRing:numeric)=> VAR MaxSales = MAXX(ALLSELECTED(ColumnForChart), MeasureForBar) VAR SalesPercentage = MeasureForBar / MaxSales * 100 VAR AchievementRate = MeasureForRing VAR CityName = SELECTEDVALUE(ColumnForChart) VAR SalesFormatted = FORMAT(MeasureForBar, "#,#") VAR DonutChart = "<svg width='50' height='50' viewBox='0 0 42 42'> <circle cx='21' cy='21' r='15' fill='none' stroke='lightgrey' stroke-width='4'/> <circle cx='21' cy='21' r='15' fill='none' stroke='#2196F3' stroke-width='4' stroke-linecap='round' stroke-dasharray='" & AchievementRate * 100 & ",100' transform='rotate(-90 21 21)'/> <text x='21' y='26' font-family='Arial' font-size='10' text-anchor='middle' fill='#333'>" & FORMAT(AchievementRate, "0%") & "</text> </svg>" --公众号wujunmin VAR BarChart = "<div style='display: flex; align-items: center; width: 100%; gap: 10px;'> <div style='flex-shrink: 0;'>" & DonutChart & "</div> <div style='flex-grow: 1; position: relative;'> <div style='height: 30px; background: #f0f0f0; border-radius: 15px; overflow: hidden;'> <div style='height: 100%; width: " & SalesPercentage & "%; background: linear-gradient(90deg, #2196F3, #64B5F6); border-radius: 15px 0 0 15px; display: flex; align-items: center; padding-left: 15px; color: white; font-family: Arial; font-weight: bold; font-size: 15px;'> " & CityName & " " & SalesFormatted & " </div> </div> </div> </div>" RETURN BarChart e.g. Measure = HTML_Bar_Ring('Store'[StoreID],[M.Sales],[M.Pct])SVG icons in matrix not showing up
Hi all, I need some help with my matrix. For the matrix outlined in pink, the SVG icons do not show up 😞 The column [svg_url] has values formatted like this : "data:image/svg+xml;utf8," & "<svg fill='#4E8BA1' width='800px' height='800px' viewBox='0 0 1920 1920' xmlns='http://www.w3.org/2000/svg'><path d='M213.333 960c0-167.36 56-321.707 149.44-446.4L1406.4 1557.227c-124.693 93.44-279.04 149.44-446.4 149.44-411.627 0-746.667-335.04-746.667-746.667m1493.334 0c0 167.36-56 321.707-149.44 446.4L513.6 362.773c124.693-93.44 279.04-149.44 446.4-149.44 411.627 0 746.667 335.04 746.667 746.667M960 0C429.76 0 0 429.76 0 960s429.76 960 960 960 960-429.76 960-960S1490.24 0 960 0' fill-rule='evenodd'/></svg>" The data category is set as Image URL I've had success with the matrix outlined in yellow (using http links), but wanted to use a different method for linking svg icons as I wanted fuller control over the icons' colour. I've also tested out the same values using a DAX measure [svg_url_DAX] and displaying it as a table (outlined in green), it shows up just fine, I wonder what went wrong. 😬 Link to .pbix file + svg icons : https://drive.google.com/drive/folders/1d_6_pT5TJtg5KpRC79plvzXfako83upA?usp=sharing Appreciate any help and pointers! Much thanks!
Dispaly SVG Image or Text Within Same Matrix Column
I have a DAX expression which renders a SVG image or displays a number depending on the scope of the row. I am able to get the number to display, but instead of the image displaying, the SVG markup gets displayed. InScope is categorized correctly as an Image URL and I am able to display only the image if I program my DAX expression as InScope = [BlueBox]. This tells me that the measure is defined and categorized correctly. I am scratching my head trying to get this to work. I know it shouldn't be this problematic. Any suggestions? TIA Dax Expression: InScope = IF ( AND ( ISINSCOPE('Employee'[Name]), [Assigned] = 1 ), [BlueBox] , [Assigned] ) Resulting Matrix (also showing that my SVG images do render correctly):Add conditional formatting to sparkline by DAX
Measure1(mark it as image URL): Sparkline = VAR MaxValue = MAXX ( VALUES ( 'table'[month]), [KPI]) VAR MinValue= MINX ( VALUES ( 'table'[month]), [KPI]) VAR Max_Width= IF(MinValue<0,IF(MaxValue<0, ABS(MinValue),MaxValue-MinValue),MaxValue) VAR BarTable= ADDCOLUMNS( SUMMARIZE('table','table'[year],'table'[month], "Color",IF([KPI]=MaxValue,"Green",IF([KPI]=MinValue,"Red","Grey"))), "Rect", "<rect x='"&IF(MinValue>0,0, IF(MaxValue>0, IF([KPI]<0,120-120*(MaxValue-[KPI])/Max_Width,120*ABS(MinValue)/Max_Width),120-120*ABS([KPI])/Max_Width)) &"' y='" & ( [month] - 1 ) * 10 & "' width='" & 120*ABS([KPI]) / Max_Width & "' height='9' fill='" & [Color] & " '/>") Return "data:image/svg+xml;utf8,"&" <svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' > <g transform='rotate(-90,60,60)'>"& CONCATENATEX(BarTable,[Rect])&"</g> </svg> "Triangle style bar chart by DAX+SVG
Result: Mark the measure below as image URL: Chart = VAR Max_Value = MAXX ( ALLSELECTED ('table'),[KPI] ) VAR SVG =" data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='300' height='30'> <polygon fill='deepskyblue' points=' " & 300 * [KPI] / Max_Value & ",15 0,0 0,30' /> </svg>" RETURN SVGDumbbell bar chart in table and matrix
Result: Mark the SVG measure below as image URL： 表格哑铃图 = VAR MAX1 = MAXX ( ALL ( 'table' ), [M.今年] ) VAR MAX2 = MAXX ( ALL ( 'table' ), [M.去年] ) VAR W = IF ( MAX1 >= MAX2, MAX1, MAX2) VAR Value_Left= MIN ( [M.今年], [M.去年] ) VAR Value_Right=MAX ( [M.今年], [M.去年] ) VAR Color_Circle_Left=IF ( [M.今年] <= [M.去年], "DeepSkyBlue", "Black" ) VAR Color_Circle_Right=IF ( [M.今年] > [M.去年], "DeepSkyBlue", "Black") VAR Line="<line x1='" & Value_Left / W*130+10 & "' y1='15' x2='" & Value_Right / W*130+10 & "' y2='15' style='stroke:DimGray;stroke-width:2' />" VAR Circle_Left= "<circle cx='" & Value_Left / W*130+10 & "' cy='15' r='5'" & " fill='" & Color_Circle_Left & "'/>" VAR Circle_Right= "<circle cx='" & Value_Right / W*130+10 & "' cy='15' r='5'" & " fill='" & Color_Circle_Right & "'/>" VAR Bar = Line& Circle_Left & Circle_Right VAR SVG = "data:image/svg+xml;utf8," & "<svg xmlns='http://www.w3.org/2000/svg' height='30' width='150' >" & Bar & "</svg>" RETURN SVGAdd average line to bar chart (table & matrix)
Result: Mark the SVG measure below as Image URL： chart = VAR Max_Value = MAXX ( ALLSELECTED ('table'),[KPI] ) VAR Avg_Value = AVERAGEX ( ALLSELECTED ('table'),[KPI] ) VAR SVG =" data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='150' height='30'> <g> <title>公众号wujunmin</title> <rect x='0' y='5' width='" & 150 * [KPI] / Max_Value & "' height='20' fill='deepskyblue' /> <line x1='" & 150 * Avg_Value / Max_Value & "' x2='" & 150 * Avg_Value / Max_Value & "' y1='0' y2='30' stroke-width='1' stroke='black' stroke-dasharray='5' /> </g> </svg>" RETURN SVGMcKinsey‘s waffle chart by DAX
Mark this measure as ImageURL and put it in table or matrix Waffle = VAR t = GENERATESERIES ( 1, 10 ) VAR tPlus = GENERATE ( SELECTCOLUMNS ( t, "Value1", [Value] ), t ) VAR tPlusPlus = ADDCOLUMNS ( tPlus, "Index", RANKX ( tPlus, [Value] + [Value1] / 100,, ASC ) ) VAR tWaffle = ADDCOLUMNS ( tPlusPlus, "circle", "<circle cx='" & [Value] * 10 + 15 & "' cy='" & [Value1] * 10 + 15 & "' r='4' fill='" & IF ( [Index] <= ROUND ( [percent] * 100, 0 ), "Black", "LightGrey" ) & "' />" ) VAR Chart = "data:image/svg+xml;utf8," & " <svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'>" & " <g transform='rotate(-90,75,75)'>" & CONCATENATEX ( tWaffle, [circle] ) & " </g> <text x='70' y='20' font-size='15' text-anchor='middle' >" & ROUND ( [percent] * 100, 0 ) & "</text> <text x='70' y='148' font-size='15' text-anchor='middle' >" & SELECTEDVALUE ( 'table'[store] ) & "</text> </svg> " RETURN IF ( HASONEVALUE ( 'table'[store] ), Chart, BLANK () )
How to show parking slot availability using SVG image
Hi, Need urgent help and suggestions please. This is related to using SVG and creating measure for desired result on SVG. Problem Statement: On my Parking Dashboard, I want to depict a Parking Lots' slot availability (by color, green and red) using its SVG image. I have understood that I can write VAR measure to fill the slots colors. Color would depend on values for each parking slot that I am getting from a certain table and column. The first pic is for the svg to be filled. The second image is the result. The colors would be dynamic and would keep on changing as per slot availability real time. I want to understad if this is possible to achieve via approach of DAX formula (VAR) on svg images? And if there is a simpler way to achive end result? My inspirations for the solution were below links: https://www.youtube.com/watch?v=z7eyZM2b4Z8 https://www.kasperonbi.com/showing-kpis-in-a-table-or-matrix-with-power-bi/ Thanks in Advance, Priyanka
