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
Salle
Helper I
Helper I

Deneb: Combine vconcat and hconcat

I do not seem to get a combination of vconcat and hconcat working.
Each one works separately on its own but when I want to mix them together something is wrong in my approach.

So if I have a layout of say 4 charts in a square; ROW1: A and B, ROW2: C and D

"vconcat": [                   /*ROW1*/
{
     "hconcat": [             
          {
          // specification A
          },
         {
         // specification B
         }
     ]
},
/* ROW2 */
{
    "hconcat": [
     {
          // specification C
     },
     {
         // specification D
     }     
     ] 
 }
]

 

I also tried a combonation using only one set of "hconcat" but it did no seem to work either with the code used.
So either I mess upp with the ({]}}} or I am approach this completly wrong...

Any suggestions?

 

1 ACCEPTED SOLUTION
giammariam
Super User
Super User

Hey @Salle, it's tough to determine a proper solution without example data. Nevertheless, below is a spec that includes horizontal and vertical concatenation that is hopefully close to what you're after. If this is enough to get you going, please consider liking and kudoing this message.

giammariam_0-1675864657942.png

 

If you need more assistance, could provide what you've tried in your spec and a sanitized dataset? (here's how)

I'd be happy to try and help more. 

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple bar chart with embedded data.",
  "data": {
    "values": [
      {"a": "A", "b": 28},
      {"a": "B", "b": 55},
      {"a": "C", "b": 43},
      {"a": "D", "b": 91},
      {"a": "E", "b": 81},
      {"a": "F", "b": 53},
      {"a": "G", "b": 19},
      {"a": "H", "b": 87},
      {"a": "I", "b": 52},
      {"a": "J", "b": 19},
      {"a": "K", "b": 87},
      {"a": "L", "b": 52}
    ]
  },
  "title": "Frequency By Letter",
  "hconcat": [
    {
      "vconcat": [
        {
          "transform": [{"filter": {"field": "a", "oneOf": ["A", "B", "C"]}}],
          "mark": "bar",
          "encoding": {
            "x": {"field": "a", "type": "nominal", "axis": {"labelAngle": 0, "title": null}},
            "y": {"field": "b", "type": "quantitative"}
          }
        },
        {
          "transform": [{"filter": {"field": "a", "oneOf": ["G", "H", "I"]}}],
          "mark": "bar",
          "encoding": {
            "x": {"field": "a", "type": "nominal", "axis": {"labelAngle": 0, "title": null}},
            "y": {"field": "b", "type": "quantitative"}
          }
        }
      ]
    },
    {
      "vconcat": [
        {
          "transform": [{"filter": {"field": "a", "oneOf": ["D", "E", "F"]}}],
          "mark": "bar",
          "encoding": {
            "x": {"field": "a", "type": "nominal", "axis": {"labelAngle": 0, "title": null}},
            "y": {"field": "b", "type": "quantitative"}
          }
        },
         {
          "transform": [{"filter": {"field": "a", "oneOf": ["J", "K", "L"]}}],
          "mark": "bar",
          "encoding": {
            "x": {"field": "a", "type": "nominal", "axis": {"labelAngle": 0, "title": null}},
            "y": {"field": "b", "type": "quantitative"}
          }
        }
      ]
    }
  ]
}

 



Madison Giammaria
Proud to be a Super User 😄
LinkedIn

Do you frequently use Deneb to provide insights to your stakeholders? Have you considered sponsoring this free and open source custom visual? More info here!

View solution in original post

2 REPLIES 2
giammariam
Super User
Super User

Hey @Salle, it's tough to determine a proper solution without example data. Nevertheless, below is a spec that includes horizontal and vertical concatenation that is hopefully close to what you're after. If this is enough to get you going, please consider liking and kudoing this message.

giammariam_0-1675864657942.png

 

If you need more assistance, could provide what you've tried in your spec and a sanitized dataset? (here's how)

I'd be happy to try and help more. 

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple bar chart with embedded data.",
  "data": {
    "values": [
      {"a": "A", "b": 28},
      {"a": "B", "b": 55},
      {"a": "C", "b": 43},
      {"a": "D", "b": 91},
      {"a": "E", "b": 81},
      {"a": "F", "b": 53},
      {"a": "G", "b": 19},
      {"a": "H", "b": 87},
      {"a": "I", "b": 52},
      {"a": "J", "b": 19},
      {"a": "K", "b": 87},
      {"a": "L", "b": 52}
    ]
  },
  "title": "Frequency By Letter",
  "hconcat": [
    {
      "vconcat": [
        {
          "transform": [{"filter": {"field": "a", "oneOf": ["A", "B", "C"]}}],
          "mark": "bar",
          "encoding": {
            "x": {"field": "a", "type": "nominal", "axis": {"labelAngle": 0, "title": null}},
            "y": {"field": "b", "type": "quantitative"}
          }
        },
        {
          "transform": [{"filter": {"field": "a", "oneOf": ["G", "H", "I"]}}],
          "mark": "bar",
          "encoding": {
            "x": {"field": "a", "type": "nominal", "axis": {"labelAngle": 0, "title": null}},
            "y": {"field": "b", "type": "quantitative"}
          }
        }
      ]
    },
    {
      "vconcat": [
        {
          "transform": [{"filter": {"field": "a", "oneOf": ["D", "E", "F"]}}],
          "mark": "bar",
          "encoding": {
            "x": {"field": "a", "type": "nominal", "axis": {"labelAngle": 0, "title": null}},
            "y": {"field": "b", "type": "quantitative"}
          }
        },
         {
          "transform": [{"filter": {"field": "a", "oneOf": ["J", "K", "L"]}}],
          "mark": "bar",
          "encoding": {
            "x": {"field": "a", "type": "nominal", "axis": {"labelAngle": 0, "title": null}},
            "y": {"field": "b", "type": "quantitative"}
          }
        }
      ]
    }
  ]
}

 



Madison Giammaria
Proud to be a Super User 😄
LinkedIn

Do you frequently use Deneb to provide insights to your stakeholders? Have you considered sponsoring this free and open source custom visual? More info here!

@giammariam Thank you for your response! I will look into the code tonight. My intention was to understand the principles and work on my code to understand it better. I do understand it is easier with the full code available but I think your example will make it easier for me to follow. I will get back if I have additional detail questions or if your help solved my problem.

Helpful resources

Announcements
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