# How can I visualize aggregation buckets using vega (not vega-lite)

**URL:** <https://discuss.elastic.co/t/how-can-i-visualize-aggregation-buckets-using-vega-not-vega-lite/194336>\
**Category:** Kibana\
**Created:** [August 7, 2019, 10:35pm UTC](https://discuss.elastic.co/t/how-can-i-visualize-aggregation-buckets-using-vega-not-vega-lite/194336 "2019-08-07T22:35:09Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![anelson-edge](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/anelson-edge/32/52865_2.png) [@anelson-edge](https://discuss.elastic.co/u/anelson-edge)\
**Post date:** [August 7, 2019, 10:35pm UTC](https://discuss.elastic.co/t/how-can-i-visualize-aggregation-buckets-using-vega-not-vega-lite/194336/1 "2019-08-07T22:35:09Z")

</div>

Elasticsearch queries return an array named "buckets".  
All the examples I found for vega assume that the array is named "values.

Try this gist:

> <https://gist.github.com/anelson-vidscale/d40657bab66750e90d280067a3d7a219>

---

<div class="post-metadata">

**Author:** ![flash1293](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/flash1293/32/41227_2.png) [@flash1293](https://discuss.elastic.co/u/flash1293)\
**Post date:** [August 8, 2019, 8:58am UTC](https://discuss.elastic.co/t/how-can-i-visualize-aggregation-buckets-using-vega-not-vega-lite/194336/2 "2019-08-08T08:58:34Z")

</div>

Hi @anelson-edge

The examples you found work with inline data [https://vega.github.io/vega-lite/docs/data.html#inline](https://vega.github.io/vega-lite/docs/data.html#inline) which is specified by a "name" and a "values" prop. Fetching data from elasticsearch works a bit differently, because the data is not included in the vega spec itself but fetched from the server when a user navigates to the page.

This blog article [https://www.elastic.co/blog/getting-started-with-vega-visualizations-in-kibana](https://www.elastic.co/blog/getting-started-with-vega-visualizations-in-kibana) goes into depth how you can do that to get the chart you want.

In your specific case the inline data specifying "values" directly would be replaced with an url like this:

```auto
{
      "name": "aggregations",
      "url": {
        "%context%": true,
        "%timefield%": "@timestamp",
        "index": "<YOUR_INDEXNAME_HERE>",
        "body": {
          "aggs": {"terms": {"terms": {"field": "<YOUR_FIELDNAME_HERE>", "min_doc_count": 0}}},
          "size": 0
        }
      },
      "format": {"property": "aggregations.terms.buckets"}
    }

```

Note that the "format" is part of the data source and specifies the path were the data returned from the url will be

---

<div class="post-metadata">

**Author:** ![anelson-edge](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/anelson-edge/32/52865_2.png) [@anelson-edge](https://discuss.elastic.co/u/anelson-edge)\
**Post date:** [August 8, 2019, 2:29pm UTC](https://discuss.elastic.co/t/how-can-i-visualize-aggregation-buckets-using-vega-not-vega-lite/194336/3 "2019-08-08T14:29:33Z")

</div>

Thank you for the links.  
I had already seen both of the pages you linked to, and I still have some newbie questions.  
AFAICT, format only applies to vega-lite, and not vega/v3. Is that right?  
If that is not right, then can you explain to me how to change the kibana-vega I posted so that it works?

I tried to make a self-contained example here:

> <https://gist.github.com/anelson-vidscale/9a6927cdd19d1b920e3bf23a91252667>

  
Since I'm having such troubles making the data display, can you give me full working example based on the gist I posted one line above this one?

---

<div class="post-metadata">

**Author:** ![flash1293](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/flash1293/32/41227_2.png) [@flash1293](https://discuss.elastic.co/u/flash1293)\
**Post date:** [August 8, 2019, 2:48pm UTC](https://discuss.elastic.co/t/how-can-i-visualize-aggregation-buckets-using-vega-not-vega-lite/194336/4 "2019-08-08T14:48:31Z")

</div>

Indexing the data you gave me the following spec shows a chart for me:

```auto
{
  "$schema":"https://vega.github.io/schema/vega/v3.json",
  
  
  "data": 
    [ {
      "name": "aggregations",
      "url": {
        "%context%": true,
        "index": "alerts*",
        "body" : {
          "size" : 0,
          "aggs": {
            "by_name": {
              "terms": {
                "field": "name"
              }
            }
          }
        }
      },
       format: { property: "aggregations.by_name.buckets" }
    } ],
 

  "scales": [
    {
      "name": "yscale",
      "type": "linear",
      "zero": true,
      "domain": {"data": "aggregations", "field": "doc_count"},
      "range": "height"
    },
    {
      "name": "xscale",
      "type": "band",
      "domain": {"data": "aggregations", "field": "key"},
      "range": "width",
      "padding": 0.05
    }
  ],
  
   "marks": [ {
    "type": "rect",
    "from": { "data": "aggregations" },
    "encode": {
      "update": {
        "x": {"scale": "xscale", "field": "key"},
        "width": {"scale": "xscale", "band": 1},
        "y": {"scale": "yscale", "field": "doc_count"},
        "y2": {"scale": "yscale", "value": 0}
      }
    }
  } ]
}

```

I changed 3 things:

- pull `format` into the data source itself
- The path in the JSON response contains `by_name`, because that's the name of the aggregation in the request - that was missing in `property` in `format`
- Remove the `timefield` filter from the query because the `alerts` index doesn't have a time field

---

<div class="post-metadata">

**Author:** ![anelson-edge](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/anelson-edge/32/52865_2.png) [@anelson-edge](https://discuss.elastic.co/u/anelson-edge)\
**Post date:** [August 8, 2019, 3:20pm UTC](https://discuss.elastic.co/t/how-can-i-visualize-aggregation-buckets-using-vega-not-vega-lite/194336/5 "2019-08-08T15:20:36Z")

</div>

I copy-pasted your vega into my kibana and nothing displays.  
I'm using Kibana 6.7.  
Are you able to try your viz in Kibana 6.7?  
And let me tell you again, how much I appreciate your help!

---

<div class="post-metadata">

**Author:** ![flash1293](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/flash1293/32/41227_2.png) [@flash1293](https://discuss.elastic.co/u/flash1293)\
**Post date:** [August 14, 2019, 1:45pm UTC](https://discuss.elastic.co/t/how-can-i-visualize-aggregation-buckets-using-vega-not-vega-lite/194336/6 "2019-08-14T13:45:06Z")

</div>

Hi @anelson-edge

I forgot to mention one detail, sorry - if I follow your script in the GH gist, I get an error because `name` is not indexed as a keyword which has to be the case to execute terms aggregations on it. Either switching the mapping to make `name` a keyword field or using `name.keyword` directly instead works for me. This is the spec with `name.keyword`:

```auto
{
  "$schema":"https://vega.github.io/schema/vega/v3.json",
  
  
  "data": 
    [ {
      "name": "aggregations",
      "url": {
        "%context%": true,
        "index": "alerts*",
        "body" : {
          "size" : 0,
          "aggs": {
            "by_name": {
              "terms": {
                "field": "name.keyword"
              }
            }
          }
        }
      },
       format: { property: "aggregations.by_name.buckets" }
    } ],
 

  "scales": [
    {
      "name": "yscale",
      "type": "linear",
      "zero": true,
      "domain": {"data": "aggregations", "field": "doc_count"},
      "range": "height"
    },
    {
      "name": "xscale",
      "type": "band",
      "domain": {"data": "aggregations", "field": "key"},
      "range": "width",
      "padding": 0.05
    }
  ],
  
   "marks": [ {
    "type": "rect",
    "from": { "data": "aggregations" },
    "encode": {
      "update": {
        "x": {"scale": "xscale", "field": "key"},
        "width": {"scale": "xscale", "band": 1},
        "y": {"scale": "yscale", "field": "doc_count"},
        "y2": {"scale": "yscale", "value": 0}
      }
    }
  } ]
}

```

---

<div class="post-metadata">

**Author:** ![anelson-edge](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/anelson-edge/32/52865_2.png) [@anelson-edge](https://discuss.elastic.co/u/anelson-edge)\
**Post date:** [August 22, 2019, 6:09pm UTC](https://discuss.elastic.co/t/how-can-i-visualize-aggregation-buckets-using-vega-not-vega-lite/194336/7 "2019-08-22T18:09:12Z")

</div>

I forgot to mention that I was radio silent during my vacation last week.  
For reasons that I don't understand (same browser, same Kibana instance),  
my viz/your-viz are now working for me.  
Thanks again for helping me out.

---

<div class="post-metadata">

**Author:** ![anelson-edge](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/anelson-edge/32/52865_2.png) [@anelson-edge](https://discuss.elastic.co/u/anelson-edge)\
**Post date:** [August 22, 2019, 6:10pm UTC](https://discuss.elastic.co/t/how-can-i-visualize-aggregation-buckets-using-vega-not-vega-lite/194336/8 "2019-08-22T18:10:51Z")

</div>

And I should've said so in my original gist, but I have a default mapping in my Kibana instance that maps all strings to keywords so that was not the problem either. Hmm.

---

<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:** [September 19, 2019, 6:11pm UTC](https://discuss.elastic.co/t/how-can-i-visualize-aggregation-buckets-using-vega-not-vega-lite/194336/9 "2019-09-19T18:11:11Z")

</div>

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