powerbivisualizationpowerbi-desktopvega-litedeneb

Deneb gauge in Power BI


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"
          }
        }
      }
    }
  ]
}

screenshot


Solution

  • Add scale null.

    enter image description here

    {
      "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"
              }
            }
          }
        }
      ]
    }