How to visualize two rectangles in Power BI

Question

How to display two rectangles, on inside the other in a Power BI visual? Of course, given rectangle coordinates and sizes. Preferably using native visuals.

Example: Bigger rectangle (frame) size is width:10 hight:8 Inside Rectangle size is width:3, hight:2, x:4, y:5

I do not care about the display of the numbers or axes. Just the blue and red rectangles.

This is not possible with native visuals. Are you happy to use Deneb? — Davide Bacci, Jan 12 '23 at 19:12
I would not be so categorical as to 'not possible'. I can imagine kinda workaround like stacked bar charts with 2 blue and 1 red on the legend. Other possibility is to use a matrix and conditional background - cripple but in the game:-) At the last resort is always an ASCII string :-) — Przemyslaw Remin, Jan 12 '23 at 19:17
@DavidBacci Thanks for suggestion. Deneb is overshot. I am looking at something simple, ready at hand. — Przemyslaw Remin, Jan 12 '23 at 19:20
Yes, there are lots of hacks like using a matrix but they are just hacks. This is simple in Deneb and the visual is both free and certified so is what I would use. — Davide Bacci, Jan 12 '23 at 20:14

Davide Bacci · Answer 1 · 2023-01-13T12:17:10.123

1

In case you change your mind, here is a Vega-Lite version. You can literally just drop the code into Deneb and don't need to do anything else.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 300,
  "height": 240,
  "background": "#9bc2e6",
  "data": {"values": [{"x": 3, "x2": 6, "y": 4, "y2": 6}]},
  "mark": {"type": "rect", "color": "#c00000"},
  "encoding": {
    "x": {
      "field": "x",
      "type": "quantitative",
      "scale": {"domain": [0, 10]},
      "axis": {
        "gridColor": "white",
        "gridWidth": 1,
        "domain": false,
        "title": "x",
        "orient": "top"
      }
    },
    "x2": {"field": "x2"},
    "y": {
      "field": "y",
      "type": "quantitative",
    "scale": {"domain": [8, 0]},
      "axis": {
        "gridColor": "white",
        "gridWidth": 1,
        "domain": false,
        "title": "y"
      }
    },
    "y2": {"field": "y2"}
  }
}

Edit:

You mean like this?

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 300,
  "height": 240,
  "background": "white",
  "layer": [
      {
      "data": {"values": [{"rect":1,"x": 0, "x2": 10, "y": 0, "y2": 8}]},
      "mark": {"type": "rect", "color": "#9bc2e6"}
    },
    {
      "data": {"values": [{"rect":2, "x": 3, "x2": 6, "y": 4, "y2": 6}]},
      "mark": {"type": "rect", "color": "#c00000"}
    }
  ],
  "encoding": {
    "x": {
      "field": "x",
      "type": "quantitative",
      "scale": {"domain": [0, 10]},
      "axis": null
    },
    "x2": {"field": "x2"},
    "y": {
      "field": "y",
      "type": "quantitative",
      "scale": {"domain": [8, 0]},
      "axis": null
    },
    "y2": {"field": "y2"}
  }
}

edited Jan 13 '23 at 12:17

answered Jan 12 '23 at 20:40

Davide Bacci

16,647
3
10
36

1

Thank you. I got no choice, have to give it a try.:-) I'll wait with accepting your answer a couple of days to encourage other approaches and test your solution. – Przemyslaw Remin Jan 13 '23 at 10:59
When you add the deneb visual, make sure you add a dummy measure or column to the field well. This will then allow you to paste in the code above. – Davide Bacci Jan 13 '23 at 11:02
Looks fantastic :-) Would you be kind to provide additional (not replacing) code for drawing of just 2 rectangles but the blue one bounded just like in my question. In your answer the blue rectangle extends beyond, covering the whole background of the chart while it should stick to rectangle dimensions. And I do not want anything on the axes. Neither numbers nor labels. Just straight edge. – Przemyslaw Remin Jan 13 '23 at 11:48
Updated for you. – Davide Bacci Jan 13 '23 at 12:16
Thank you, that's it. How do you pass the parameters to the graph? Bigger rectangle needs just 2 of them (width, and length) and the small rectangle needs 4 parameters x0,y0, x1,y1 (or instead of the pair x1, y1 it can be width and length). Now it is kind of hardcoded. So there should be 6 parameters altogether. – Przemyslaw Remin Jan 13 '23 at 12:27
You can use the dataset field. You're best having a read of Deneb here but let me know if you need me to update and I'll take a look later on. https://deneb-viz.github.io/ – Davide Bacci Jan 13 '23 at 12:28

How to visualize two rectangles in Power BI

1 Answers1