Scalable Vector Graphics (SVG) images are two-dimensional vector graphics defined in an XML format. It is a W3C recommendation and each element in it can be animated without any loss in quality even after resizing. Using an SVG image we can customize and enhance visualization components in Power BI. Power BI allows dynamic creation of SVG images by measures as Image URL. Here, we are going to see the below example for the same.
Create a bar chart for top 5 Products by Sales for each Region. The dimensions are Region and Product with the metric sales. To proceed with the example, we need to have measures for calculating top 5 products and creating SVG images for the same.
Measures
RANK
Create a measure with ranking for products in each region based on the sales.
SVG Measure
Create a measure for the SVG Image
| Barchart = Var YMaxValue =MAX(Orders[Sales])Var BarchartTable = FILTER(ADDCOLUMNS( SUMMARIZE(Orders,Orders[Region],Orders[Product Name]), “Sales”,CALCULATE(([Total_Sales]/YMaxValue)*100),“Y”,Orders[Orders_Rank],”TextY”,CONCATENATE(Orders[Orders_Rank],0),”ValueY”,CALCULATE(CONCATENATE([Orders_Rank],0)-5)),[Y]<6)Var bars = CONCATENATEX(BarchartTable,”<text x=’0′ y=’” & [TextY] & “‘ fill=’black’ font-size =’8′ >” & Orders[Product Name] & “</text> <rect x=’50’ y=’” & [ValueY] & “‘ width=’” & [Sales] & “‘ height=’7′ style=’fill:blue;’ />”,” “,[Sales])VAR SVGImage = IF(HASONEVALUE(Orders[Region]), “data:image/svg+xml;utf8,” & “<svg xmlns=’https://www.w3.org/2000/svg’ viewBox=’0 0 150 150′> ” & bars & “</svg>”,BLANK())RETURN SVGImage |
We must define the value for X-axis and Y-axis. Here, we have considered Rank value for X-Axis and the Sales amount for Y-Axis. The variable BarchartTable creates a dynamic table with x-axis and y-axis for the <text><rect> with corresponding Region and ProductName. Bars concatenate the separate <text><rect>. Here each <text> and <rect> represents each bar and each text in an image, so to concatenate these tags, CONCATENATE() is used. SVGImage creates the SVG images.
Image URL
After creating the measure, change the data category of the measure under the modeling tab to Image URL. Use Country, Region, Bar chart (measure) in a table. You can view the top 5 products for each region.
If we need to have a column chart instead of a bar chart, use Rotate() in <rect>. We can also view the data in a more granular level of data as you can add category or sub-category in the table to see the top 5 products in each category or sub-category.
In a similar way, we can achieve many shapes like sparklines, Indicators and a variety of charts as such.
Please reach out Visual BI for questions on using SVG images in Power BI or creating measures for SVG images in Power BI.
