SVG Microchart - Harveyball and Harveybox

TomMartens — Tue, 14 Aug 2018 20:00:19 GMT

With the August 2018 release it's possible to assign a data category to a measure, this allows to make a measure representing an svg chart

For additional details on the method, please see this post on the DataVeld blog

or my own post about this microchart.

Both visual types the circular "Harveyball" and angled "Harveybox" are basically comparing two percentages. The Harveyball visual can also be used with just one circle, or better just a segement an arc.

Everything is controlled with two of measures

Measure Achievement
This measure controls the larger circle of the Harveyball and the right vertical line of the Harrveybox
Measure Achievement
This measure cotrols the smaller circle of the Harveyball and the left vertical line of the Harveybox.

Replace the calculation with your own calculation and make sure that the measure returns a value >= 0 and <= 1. I tried my best to take some precautions that all other input are treated as an error.

This means that you need to copy four measures from the pbix file to your own model

Measure Achievement
Measure Effort
Harveyball (make sure that the data category is set to "Image Url")
Harveybox (make sure that the data category is set to "Image Url")

After the above mentioned preparations the measures "Harveyball" and/or "Harveybox" can be used inside the table or matrix visual.

The measures "Measure Achievement" and "Measure Effort" also provide an "input parameters" here you can configure the color (provide HEX codes) and also if you want to show an element of the visua. The input section looks for the measure "Harveyball" looks like this:

// input parameters
// Background Circle: represents percentage of current achievements (100% means everything is done)
var ShowBackGrndCircle = TRUE()
var BackGrndPercent = [Measure Achievement] // value has to be >= 0 and <=1// using Firefox one has to use "%23" instead of the "#"-sign
var BackGrndColor = "#D9D9D9" //D9D9D9
// Front Circle: represents effort spent for the current achievements in percent of available ressources (100% means there are no more ressources available)
var ShowFrontCircle = TRUE()
var FrontPercent =  [Measure Effort] // value has to be >= 0 and <=1
var FrontColorGood = "#68CDFE" //68CDFE
var FrontColorBad =  "#E86232" //E86232
// Show text below the circles
var ShowText = FALSE()
var HarveyBallSubtitle = "a measure" //replace the string by a value or string that will be printed

Basically the filled arcs and also the polygons of the Harveybox are drawn by using the path element.

I wish you all a lot of fun using this kind of visual.

eyJrIjoiYTQ4NTBlMDMtNTBlMy00ZTQyLTk1NWQtY2U3NmU2NDAxOTg5IiwidCI6ImY2MmI4ZjIwLWYxNmUtNGE2ZS05YjFmLTZlMmQyZTZhYzA4OSIsImMiOjh9

Re: SVG Microchart - Harveyball and Harveybox

Sohail — Wed, 15 Aug 2018 08:25:11 GMT

Thank you, really good a way to present the data. Any Ideas when will it will added to Qucik Measure in Power BI Desktop?

Re: SVG Microchart - Harveyball and Harveybox

TomMartens — Wed, 15 Aug 2018 08:58:48 GMT

Hey,

I'm sorry I can't say if it will become a "real" Quick-Measure.

Regards,

Tom

Re: SVG Microchart - Harveyball and Harveybox

Sohail — Wed, 15 Aug 2018 09:02:54 GMT

It would be very easy to use if it make to Quick measure.. Anyways Great Work Sir. Thank you! :)

Re: SVG Microchart - Harveyball and Harveybox

Anonymous — Mon, 11 May 2020 12:52:34 GMT

I notice that the SVG files presented inside a table row in this demo and every other example of using SVG are always square (i.e. have a ratio of 1:1). I understand this is a restriction on Power BI table matrix.

Do you know if there is a way around this restriction? Or do you know if the problem will be fixed in Power BI?

Re: SVG Microchart - Harveyball and Harveybox

Anonymous — Tue, 14 May 2024 21:16:13 GMT

Thank you so much for providing all of these details. It is greatly appreciated! Hopefully, we will be able to use these measures in our data modeling. 🙂

topic Re: SVG Microchart - Harveyball and Harveybox in Quick Measures Gallery

SVG Microchart - Harveyball and Harveybox

Re: SVG Microchart - Harveyball and Harveybox

Re: SVG Microchart - Harveyball and Harveybox

Re: SVG Microchart - Harveyball and Harveybox

Re: SVG Microchart - Harveyball and Harveybox

Re: SVG Microchart - Harveyball and Harveybox