I am trying to change the fill color of the gauge using a measure. colorcode = "#d23d96"
I can see the data of this measure in the data table, but I cannot apply this color to the gauge. The fill color is set at line 103. If I add it manually, it works, but when I try to use the measure "colorcode", it does not work. Here is the code for the gauge:
{
"name": "RADIAL_GAUGE",
"data": { "name": "dataset" },
"transform": [
{
"calculate": "360 - ( datum['Degrees'] / 2 )",
"as": "_arc_start_degrees"
},
{
"calculate": "0 + ( datum['Degrees'] / 2 )",
"as": "_arc_end_degrees"
},
{
"calculate": "2 * PI * ( datum['_arc_start_degrees'] - 360 ) / 360",
"as": "_arc_start_radians"
},
{
"calculate": "2 * PI * datum['_arc_end_degrees'] / 360",
"as": "_arc_end_radians"
},
{
"calculate": "datum['_arc_end_radians'] - datum['_arc_start_radians']",
"as": "_arc_total_radians"
},
{
"calculate": "datum['_arc_start_radians']",
"as": "_ring_start_radians"
},
{
"calculate": "datum['_arc_start_radians'] + ( datum['_arc_total_radians'] * datum['Percent'] )",
"as": "_ring_end_radians"
}
],
"params": [
{ "name": "ring_max", "value": 160 },
{ "name": "ring_width", "value": 20 },
{ "name": "ring_gap", "value": 5 },
{ "name": "ring0_color", "value": "#FFFFFF" },
{ "name": "label_color", "value": "#000000" },
{ "name": "ring_background_opacity", "value": 0.3 },
{ "name": "ring0_percent", "value": 100 },
{ "name": "ring0_outer", "expr": "ring_max+2" },
{ "name": "ring0_inner", "expr": "ring_max+1" },
{
"name": "ring1_outer",
"expr": "ring0_inner-ring_gap"
},
{
"name": "ring1_inner",
"expr": "ring1_outer-ring_width"
},
{
"name": "ring1_middle",
"expr": "(ring1_outer + ring1_inner) / 2"
}
],
"layer": [
{
"name": "RING OPAQUE BACKGROUND",
"mark": {
"type": "arc",
"radius": {
"expr": "ring1_outer"
},
"radius2": {
"expr": "ring1_inner"
},
"theta": {
"expr": "datum['_arc_start_radians']"
},
"theta2": {
"expr": "datum['_arc_end_radians']"
},
"cornerRadius": 0
},
"encoding": {
"color": {
"value": "#CCCCCC"
},
"opacity": {
"value": {
"expr": "ring_background_opacity"
}
}
}
},
{
"name": "RING",
"mark": {
"type": "arc",
"radius": {
"expr": "ring1_outer"
},
"radius2": {
"expr": "ring1_inner"
},
"theta": {
"expr": "datum['_ring_start_radians']"
},
"theta2": {
"expr": "datum['_ring_end_radians']"
},
"fill": "colorcode",
"cornerRadius": 0
},
"encoding": {
"color": {
"field": "colorcode",
"type": "nominal"
}
}
},
{
"description": "VALUE",
"mark": {
"type": "text",
"fontSize": 60
},
"encoding": {
"text": {
"field": "Percent",
"type": "quantitative",
"formatType": "pbiFormat",
"format": "0%"
},
"color": {
"value": {
"expr": "label_color"
}
}
}
}
]
}
Add scale null.
{
"name": "RADIAL_GAUGE",
"data": { "name": "dataset" },
"transform": [
{
"calculate": "360 - ( datum['Degrees'] / 2 )",
"as": "_arc_start_degrees"
},
{
"calculate": "0 + ( datum['Degrees'] / 2 )",
"as": "_arc_end_degrees"
},
{
"calculate": "2 * PI * ( datum['_arc_start_degrees'] - 360 ) / 360",
"as": "_arc_start_radians"
},
{
"calculate": "2 * PI * datum['_arc_end_degrees'] / 360",
"as": "_arc_end_radians"
},
{
"calculate": "datum['_arc_end_radians'] - datum['_arc_start_radians']",
"as": "_arc_total_radians"
},
{
"calculate": "datum['_arc_start_radians']",
"as": "_ring_start_radians"
},
{
"calculate": "datum['_arc_start_radians'] + ( datum['_arc_total_radians'] * datum['Percent'] )",
"as": "_ring_end_radians"
}
],
"params": [
{ "name": "ring_max", "value": 160 },
{ "name": "ring_width", "value": 20 },
{ "name": "ring_gap", "value": 5 },
{ "name": "ring0_color", "value": "#FFFFFF" },
{ "name": "label_color", "value": "#000000" },
{ "name": "ring_background_opacity", "value": 0.3 },
{ "name": "ring0_percent", "value": 100 },
{ "name": "ring0_outer", "expr": "ring_max+2" },
{ "name": "ring0_inner", "expr": "ring_max+1" },
{
"name": "ring1_outer",
"expr": "ring0_inner-ring_gap"
},
{
"name": "ring1_inner",
"expr": "ring1_outer-ring_width"
},
{
"name": "ring1_middle",
"expr": "(ring1_outer + ring1_inner) / 2"
}
],
"layer": [
{
"name": "RING OPAQUE BACKGROUND",
"mark": {
"type": "arc",
"radius": {
"expr": "ring1_outer"
},
"radius2": {
"expr": "ring1_inner"
},
"theta": {
"expr": "datum['_arc_start_radians']"
},
"theta2": {
"expr": "datum['_arc_end_radians']"
},
"cornerRadius": 0
},
"encoding": {
"color": {
"value": "#CCCCCC"
},
"opacity": {
"value": {
"expr": "ring_background_opacity"
}
}
}
},
{
"name": "RING",
"mark": {
"type": "arc",
"radius": {
"expr": "ring1_outer"
},
"radius2": {
"expr": "ring1_inner"
},
"theta": {
"expr": "datum['_ring_start_radians']"
},
"theta2": {
"expr": "datum['_ring_end_radians']"
},
"cornerRadius": 0
},
"encoding": {
"fill": {
"field": "colorcode",
"type": "nominal", "scale":null
}
}
},
{
"description": "VALUE",
"mark": {
"type": "text",
"fontSize": 60
},
"encoding": {
"text": {
"field": "Percent",
"type": "quantitative",
"formatType": "pbiFormat",
"format": "0%"
},
"color": {
"value": {
"expr": "label_color"
}
}
}
}
]
}