Search code examples
powerbidaxvega-litevegadeneb

Convert Vega (Deneb) Gauge to Work in PowerBI

Code: Link

For me it seems like the value of "83%" is hardcoded and I want this to adjust based on a Power BI Measure. I feel like I am really missing something, but isn't there a way to import the JSON, adjust the code and then have a dynamic visual ?

In this screenshot I try to explain what I mean: deneb visual example

I tried to remove the "signals" part and bind the data to the dataset, but I couldn't make it work.

Thanks for any hint :)

Update: Screenshot os unformatted value added: enter image description here

Solution

  • That's my code 😀. You can see other examples here: https://github.com/PBI-David/Deneb-Showcase

    To get this to work in Deneb, create a measure named myMeasure and drop it in the field well in Deneb. Then add the following code.

     {
  "$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": "0",
      "on": [
        {
          "events": {
            "type": "timer",
            "throttle": 0
          },
          "update": "round(data('dataset')[0]['myMeasure'])"
        }
      ]
    }
  ],
  "data": [
    {"name": "dataset"},
    {
      "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}
        }
      }
    }
  ]
}