# Vega access multiple buckets group bar chart

**URL:** <https://discuss.elastic.co/t/vega-access-multiple-buckets-group-bar-chart/185413>\
**Category:** Kibana\
**Created:** [June 12, 2019, 12:26pm UTC](https://discuss.elastic.co/t/vega-access-multiple-buckets-group-bar-chart/185413 "2019-06-12T12:26:51Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![TEJASWI\_CHUNDURI](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/tejaswi_chunduri/32/46271_2.png) [@TEJASWI\_CHUNDURI](https://discuss.elastic.co/u/TEJASWI_CHUNDURI)\
**Post date:** [June 12, 2019, 12:26pm UTC](https://discuss.elastic.co/t/vega-access-multiple-buckets-group-bar-chart/185413/1 "2019-06-12T12:26:51Z")

</div>

Hi please find the below snippet and needs to access the parameters url(yaxis) , cvscore (x axis) and fversion ( group by color label ) in group bar chart

Request:

```
{
  $schema: https://vega.github.io/schema/vega/v5.json
  width: 300
  height: 240
  padding: 5
  data: [
    {
      name: table
      url: {
        %context%: true
       %timefield%: @timestamp
        index: ap*
        body: {
          aggs: {
            2: {
              terms: {
                field: url.keyword
                size: 5
                order: {_count: "asc"}
              }
              aggs: {
                3: {
                  terms: {
                    field: fversion.keyword
                    size: 20
                    order: {_key: "desc"}
                  }
                  aggs: {
                    1: {
                      max: {field: "cv_score"}
                    }
                  }
                }
                bbukc: {
                  bucket_selector: {
                    buckets_path: {the_count: "_count"}
                    script: params.the_count < 2
                  }
                }
              }
            }
          }
          size: 0
        }
      }
      format: {property: "aggregations.2.buckets"}
      transform: [
        {type: "formula", expr: "3.1.value", as: "cv_score"}
      ]
    }
  ]
  scales: [
    {
      name: yscale
      type: band
      domain: {data: "table", field: "key"}
      range: height
      padding: 0.2
    }
    {
      name: xscale
      type: linear
      domain: {data: "table", field: "cvss"}
      range: width
      round: true
      zero: true
      nice: true
    }
    {
      name: color
      type: ordinal
      domain: {data: "table", field: "position"}
      range: {scheme: "category20"}
    }
  ]
  axes: [
    {
      orient: left
      scale: yscale
      tickSize: 0
      labelPadding: 4
      zindex: 1
    }
    {orient: "bottom", scale: "xscale"}
  ]
  marks: [
    {
      type: group
      from: {
        facet: {data: "table", name: "facet", groupby: "key"}
      }
      encode: {
        enter: {
          y: {scale: "yscale", field: "key"}
        }
      }
      signals: [
        {name: "height", update: "bandwidth('yscale')"}
      ]
      scales: [
        {
          name: pos
          type: band
          range: height
          domain: {data: "facet", field: "position"}
        }
      ]
      marks: [
        {
          name: bars
          from: {data: "facet"}
          type: rect
          encode: {
            enter: {
              y: {scale: "pos", field: "position"}
              height: {scale: "pos", band: 1}
              x: {scale: "xscale", field: "cvss"}
              x2: {scale: "xscale", value: 0}
              fill: {scale: "color", field: "position"}
            }
          }
        }
        {
          type: text
          from: {data: "bars"}
          encode: {
            enter: {
              x: {field: "x2", offset: -5}
              y: {
                field: y
                offset: {field: "height", mult: 0.5}
              }
              fill: {value: "white"}
              align: {value: "right"}
              baseline: {value: "middle"}
              text: {field: "datum.value"}
            }
          }
        }
      ]
    }
  ]
}

```

Response:

```
"aggregations" : {
    "2" : {
      "doc_count_error_upper_bound" : -1,
      "sum_other_doc_count" : 13537787,
      "buckets" : [
        {
          **"key" : "http://-hosted-http.com//ccApply XFS",**
          "doc_count" : 1,
          "3" : {
            "doc_count_error_upper_bound" : 0,
            "sum_other_doc_count" : 0,
            "buckets" : [
              {
                **"key" : "9.1.9",**
                "doc_count" : 1,
                "1" : {
                  **"value" : 5.0**
                }
              }
            ]
          }
        },
        {
          **"key" : "http://-http.com/altoromutual/bank/customize.jsp asad",**
          "doc_count" : 1,
          "3" : {
            "doc_count_error_upper_bound" : 0,
            "sum_other_doc_count" : 0,
            "buckets" : [
              {
                **"key" : "9.0-0",**
                "doc_count" : 1,
                "1" : {
                  **"value" : 5.0**
                }
              }
            ]
          }
        }
```

---

<div class="post-metadata">

**Author:** ![TEJASWI\_CHUNDURI](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/tejaswi_chunduri/32/46271_2.png) [@TEJASWI\_CHUNDURI](https://discuss.elastic.co/u/TEJASWI_CHUNDURI)\
**Post date:** [June 18, 2019, 2:58pm UTC](https://discuss.elastic.co/t/vega-access-multiple-buckets-group-bar-chart/185413/2 "2019-06-18T14:58:04Z")

</div>

@nyuriks

---

<div class="post-metadata">

**Author:** ![nyuriks](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nyuriks/32/26171_2.png) [@nyuriks](https://discuss.elastic.co/u/nyuriks)\
**Post date:** [June 18, 2019, 11:53pm UTC](https://discuss.elastic.co/t/vega-access-multiple-buckets-group-bar-chart/185413/3 "2019-06-18T23:53:49Z")

</div>

essentially you have a list of buckets, accessible with `aggregations['2'].buckets` (btw, I would recommend renaming "1", "2", and "3" into something more meaningful). Each bucket has a field `datum.key` a sub-list `datum['3'].buckets` which needs to [be flattened](https://vega.github.io/vega/docs/transforms/flatten/). Inside each sub-bucket you have two fields -- `datum.key` and `datum['1'].value`. Once you flatten everything into a 3 columns, it should be fairly trivial to plot anything you need. Hope this helps!

---

<div class="post-metadata">

**Author:** ![TEJASWI\_CHUNDURI](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/tejaswi_chunduri/32/46271_2.png) [@TEJASWI\_CHUNDURI](https://discuss.elastic.co/u/TEJASWI_CHUNDURI)\
**Post date:** [June 19, 2019, 7:46am UTC](https://discuss.elastic.co/t/vega-access-multiple-buckets-group-bar-chart/185413/4 "2019-06-19T07:46:10Z")

</div>

```
{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 300,
  "height": 240,
  "padding": 5,
  "data": [
    {
      "name": "table",
      "url": {
        "index": "appscan*",
        "%context%": true,
        "body": {
          "aggregations": {
            "2": {
              "doc_count_error_upper_bound": -1,
              "sum_other_doc_count": 232,
              "buckets": [
                {
                  "3": {
                    "doc_count_error_upper_bound": 0,
                    "sum_other_doc_count": 0,
                    "buckets": [
                      {"1": {"value": 5}, "key": "9.0.3.89", "doc_count": 1}
                    ]
                  },
                  "key": "http://xyz.com",
                  "doc_count": 1
                },
                {
                  "3": {
                    "doc_count_error_upper_bound": 0,
                    "sum_other_doc_count": 0,
                    "buckets": [
                      {"1": {"value": 5}, "key": "9.0.3.88", "doc_count": 1}
                    ]
                  },
                  "key": "http://abc.com",
                  "doc_count": 1
                }
              ]
            }
          },
          "size": 0
        }
      },
            "format": {
        "property": "aggregations.2.buckets"
      },
      "transform": [
        {
          "type": "flatten",
          "fields": "datum['3'].buckets",
          "as": "flat"
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "yscale",
      "type": "band",
      "domain": {"data": "table", "field": "key"},
      "range": "height",
      "padding": 1
    },
    {
      "name": "xscale",
      "type": "linear",
      "domain": {"data": "table", "field": "value"},
      "range": "width",
      "round": true,
      "zero": true,
      "nice": true
    },
    {
      "name": "color",
      "type": "ordinal",
      "domain": {"data": "table", "field": "version"},
      "range": {"scheme": "category20"}
    }
  ],
  "axes": [
    {
      "orient": "left",
      "scale": "yscale",
      "tickSize": 0,
      "labelPadding": 4,
      "zindex": 1
    },
    {"orient": "bottom", "scale": "xscale"}
  ],
  "marks": [
    {
      "type": "group",
      "from": {
        "facet": {"data": "table", "name": "facet", "groupby": "value"}
      },
      "encode": {"enter": {"y": {"scale": "yscale", "field": "key"}}},
      "signals": [{"name": "height", "update": "bandwidth('yscale')"}],
      "scales": [
        {
          "name": "pos",
          "type": "band",
          "range": "height",
          "domain": {"data": "facet", "field": "version"}
        }
      ],
      "marks": [
        {
          "name": "bars",
          "from": {"data": "facet"},
          "type": "rect",
          "encode": {
            "enter": {
              "y": {"scale": "pos", "field": "version"},
              "height": {"scale": "pos", "band": 1},
              "x": {"scale": "xscale", "field": "value"},
              "x2": {"scale": "xscale", "value": 0},
              "fill": {"scale": "color", "field": "version"}
            }
          }
        },
        {
          "type": "text",
          "from": {"data": "bars"},
          "encode": {
            "enter": {
              "x": {"field": "x2", "offset": -5},
              "y": {"field": "y", "offset": {"field": "height", "mult": 0.5}},
              "fill": {"value": "white"},
              "align": {"value": "right"},
              "baseline": {"value": "middle"},
              "text": {"field": "datum.value"}
            }
          }
        }
      ]
    }
  ]
}

```

I am trying for grouped bar chart , where x axis is "value", y axis is "url" and group by "version"  
while flatten it throws error "object doesn't support property or method" please help

---

<div class="post-metadata">

**Author:** ![nyuriks](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nyuriks/32/26171_2.png) [@nyuriks](https://discuss.elastic.co/u/nyuriks)\
**Post date:** [June 20, 2019, 2:43pm UTC](https://discuss.elastic.co/t/vega-access-multiple-buckets-group-bar-chart/185413/5 "2019-06-20T14:43:50Z")

</div>

It is fairly difficult to figure out your data this way. Please do two things:

- rename the agg names - instead of calling them "1", "2", ...
- take a look at [https://gist.github.com/nyurik/736c34970ba3c32f3fe3d45d66719b3e](https://gist.github.com/nyurik/736c34970ba3c32f3fe3d45d66719b3e) -- will make it much easier for me to understand your code 🙂

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [July 18, 2019, 2:43pm UTC](https://discuss.elastic.co/t/vega-access-multiple-buckets-group-bar-chart/185413/6 "2019-07-18T14:43:56Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.