Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Find everything you need to get certified on Fabric—skills challenges, live sessions, exam prep, role guidance, and more. Get started

Reply
JohanvA
Resolver I
Resolver I

Making Deneb dynamic

Hello everyone,

I found a really nice Deneb visual online. However, this visual is using a static number. I want to connect it with my measure, named _Percentage. I thought I needed to replace "85" with my measure (at row 13), but it wasn't so simple. How can the measure by added, so that it responds dynamically? The Deneb code is as follows:

{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 400,
"height": 400,
"padding": 50,
"background": "#222431",
"signals": [
{
"name": "textGradient",
"update": "{gradient: 'linear', stops: [{offset: 0, color: '#14d8cc'}, {offset: 1, color: '#4c8bee'}]}"
},

{"name": "percent", "update": "85"}],
"data": [
{
"name": "back",
"values": [],
"transform": [
{"type": "sequence", "start": 0, "stop": 100, "step": 1, "as": "val"},
{"type": "formula", "expr": "1", "as": "t"},
{
"type": "pie",
"field": "t",
"startAngle": {"signal": "0"},
"endAngle": {"signal": "2*PI"}
}
]
},
{
"name": "front",
"values": [],
"transform": [
{
"type": "sequence",
"start": 0,
"stop": {"signal": "percent"},
"step": 1,
"as": "val"
},
{"type": "formula", "expr": "1", "as": "t"},
{
"type": "pie",
"field": "t",
"startAngle": {"signal": "0"},
"endAngle": {"signal": "((2*PI)/100)*percent"}
}
]
}
],
"scales": [
{
"name": "color",
"type": "linear",
"domain": {"data": "back", "field": "val"},
"range": ["#14d8cc", "#4c8bee", "#6567ee", "#b533d2","#b533d2"]
}
],
"marks": [
{
"type": "arc",
"from": {"data": "back"},
"encode": {
"enter": {
"fill": {"value": "#3f424e"},
"x": {"signal": "width / 2"},
"y": {"signal": "height / 2"}
},
"update": {
"startAngle": {"field": "startAngle"},
"endAngle": {"field": "endAngle"},
"padAngle": {"signal": "0.015"},
"innerRadius": {"signal": "(width / 2)-15"},
"outerRadius": {"signal": "width / 2"}
}
}
},
{
"type": "arc",
"from": {"data": "front"},
"encode": {
"enter": {
"fill": {"scale": "color", "field": "val"},
"x": {"signal": "width / 2"},
"y": {"signal": "height / 2"}
},
"update": {
"startAngle": {"field": "startAngle"},
"endAngle": {"field": "endAngle"},
"padAngle": {"signal": "0.015"},
"innerRadius": {"signal": "(width / 2)-15"},
"outerRadius": {"signal": "width / 2"}
}
}
},
{
"type": "arc",
"data": [{"a": 1}],
"encode": {
"enter": {
"fill": {"value": "#3f424e"},
"x": {"signal": "width / 2"},
"y": {"signal": "height / 2"}
},
"update": {
"startAngle": {"signal": "0"},
"endAngle": {"signal": "2*PI"},
"innerRadius": {"signal": "(width / 2)-25"},
"outerRadius": {"signal": "(width / 2)-20"}
}
}
},
{
"type": "text",
"data": [{}],
"encode": {
"update": {
"text": {"signal": "percent + '%'"},
"align": {"value": "center"},
"fontWeight": {"value": "bold"},
"fill": {"signal": "textGradient"},
"x": {"signal": "width /2"},
"y": {"signal": "width /2"},
"dy": {"value":10},
"fontSize": {"value": 70}
}
}
}
,

{
"type": "text",
"data": [{}],
"encode": {
"update": {
"text": {"value": "on target"},
"align": {"value": "center"},
"fontWeight": {"value": "bold"},
"fill": {
"value": "#9092a1" },
"x": {"signal": "width /2"},
"y": {"signal": "width /2"},
"dy": {"value":40},
"fontSize": {"value": 30}
}
}
}

 

]
}

1 ACCEPTED SOLUTION

I added the data to the model and set it as a percentage type. The same with the measure.

 

The key thing is that percentages will be added to a Deneb visual as a decimal value, so to make this work with the template, you will need to:

 

  1. Modify my suggestion to multiply by 100 to get a number between 1 and 100 rather than 0 and 1, e.g.:
    {
    "name": "percent",
    "update": "data('dataset')[0]['_Percentage'] * 100"
    }​
  2. Because this might result in a floating point value with many decimal places, modify the text mark's text property to use a format function call to fix it to 2 decimal places, e.g.:
    {
        "type": "text",
       "data": [{}],
       "encode": {
    "update": {
    "text": {
    "signal": "format(percent, '.2f') + '%'"
    },
    ...
    }​

Note that these are minimal changes against the original template. If you have a format string against your model, you could probably use the technique in step 1 to get the _Percentage__format field that Deneb creates for measures into an additional signal and substitute that into step 2 rather than do the formating work manually, or use the pbiFormat function in Deneb to use a Power BI format string. However the above approach will work as you intend it to:

 

dmp_1-1714626804700.png

 

I've added this to a report and attached it so you can confirm it works and investigate the solution yourself. Changes are on lines 14 and 175 of the specification.

 

Regards,

 

Daniel





Did I answer your question? Mark my post as a solution!

Proud to be a Super User!


My course: Introduction to Developing Power BI Visuals


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




View solution in original post

5 REPLIES 5
JohanvA
Resolver I
Resolver I

Hi @dm-p  and @lbendlin

 

thanks for your replies! I tried to implement the steps, in several ways. I didn't get it to work unfortunately. 

The sample data is simple, because I created some dummy data.

I have a table with a column called Percentage. It has the following data (see below).

 

The measure, which I added to the Deneb visual is

_Percentage = AVERAGE(Percentage[Percentage])
 
I hope you guys can help me further! I really want this visual to work. 

 

0,01
0,1
0,25
0,5
0,75
0,99

1

I added the data to the model and set it as a percentage type. The same with the measure.

 

The key thing is that percentages will be added to a Deneb visual as a decimal value, so to make this work with the template, you will need to:

 

  1. Modify my suggestion to multiply by 100 to get a number between 1 and 100 rather than 0 and 1, e.g.:
    {
    "name": "percent",
    "update": "data('dataset')[0]['_Percentage'] * 100"
    }​
  2. Because this might result in a floating point value with many decimal places, modify the text mark's text property to use a format function call to fix it to 2 decimal places, e.g.:
    {
        "type": "text",
       "data": [{}],
       "encode": {
    "update": {
    "text": {
    "signal": "format(percent, '.2f') + '%'"
    },
    ...
    }​

Note that these are minimal changes against the original template. If you have a format string against your model, you could probably use the technique in step 1 to get the _Percentage__format field that Deneb creates for measures into an additional signal and substitute that into step 2 rather than do the formating work manually, or use the pbiFormat function in Deneb to use a Power BI format string. However the above approach will work as you intend it to:

 

dmp_1-1714626804700.png

 

I've added this to a report and attached it so you can confirm it works and investigate the solution yourself. Changes are on lines 14 and 175 of the specification.

 

Regards,

 

Daniel





Did I answer your question? Mark my post as a solution!

Proud to be a Super User!


My course: Introduction to Developing Power BI Visuals


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




@dm-p 

thank you so much!! I really appreciate your help! 

dm-p
Super User
Super User

Hi @JohanvA,

Replace line 13 with the following:

{
  "name": "percent",
  "update": "data('dataset')[0]['_Percentage']"
}

This requests the value of the _Percentage measure in the first row of the dataset that Deneb creates.
Ref: Vega data() function
Ref: how Deneb assigns the internal dataset
Regards,
Daniel





Did I answer your question? Mark my post as a solution!

Proud to be a Super User!


My course: Introduction to Developing Power BI Visuals


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




lbendlin
Super User
Super User

to get your data from Power BI you need to use 

 

"data": {"name": "dataset"}

 

Please provide sample data.

Helpful resources

Announcements
Europe Fabric Conference

Europe’s largest Microsoft Fabric Community Conference

Join the community in Stockholm for expert Microsoft Fabric learning including a very exciting keynote from Arun Ulag, Corporate Vice President, Azure Data.

July 2024 Power BI Update

Power BI Monthly Update - July 2024

Check out the July 2024 Power BI update to learn about new features.

July Newsletter

Fabric Community Update - July 2024

Find out what's new and trending in the Fabric Community.

Top Solution Authors
Top Kudoed Authors