Vega access multiple buckets group bar chart

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

@nyuriks

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. 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!

{
  "$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

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

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