# Vegalite integration with Kibana

**URL:** <https://discuss.elastic.co/t/vegalite-integration-with-kibana/122439>\
**Category:** Kibana\
**Created:** [March 5, 2018, 5:54am UTC](https://discuss.elastic.co/t/vegalite-integration-with-kibana/122439 "2018-03-05T05:54:58Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![paul1243](https://avatars.discourse-cdn.com/v4/letter/p/e99b99/32.png) [@paul1243](https://discuss.elastic.co/u/paul1243)\
**Post date:** [March 5, 2018, 5:54am UTC](https://discuss.elastic.co/t/vegalite-integration-with-kibana/122439/1 "2018-03-05T05:54:59Z")

</div>

Hi,  
I've tried creating a Visualization with Vega, I've the response something like below, how do I create a property for the highlighted data. Could someone please help.

```auto
"took": 765,
"timed_out": false,
"_shards": {
  "total": 215,
  "successful": 215,
  "skipped": 0,
  "failed": 0
},
"hits": {
  "total": 933,
  "max_score": 0,
  "hits": []
},
"aggregations": {
  "2": {
    "doc_count_error_upper_bound": 0,
    "sum_other_doc_count": 0,
    "buckets": [
      {
        "5": {
          "doc_count_error_upper_bound": 0,
          "sum_other_doc_count": 39,
          "buckets": [
            {
              "key": 146, <---
              "doc_count": 1,
              "Passed": { "value": 3 }, <---
              "total_cases": { "value": 3 }, <---
              "Failed": { "value": 0 }, <---
              "Skipped": { "value": 0 } <---
            }
          ]
        },
        "key": "Example1", <---
        "doc_count": 40
      },
      {
        "5": {
          "doc_count_error_upper_bound": 0,
          "sum_other_doc_count": 48,
          "buckets": [
            {
              "key": 145, <---
              "doc_count": 1,
              "Passed": { "value": 2 }, <---
              "total_cases": { "value": 2 }, <---
              "Failed": { "value": 0 }, <---
              "Skipped": { "value": 0 } <---
            }
          ]
        },
        "key": "Example2", <---
        "doc_count": 49
      },

```

---

<div class="post-metadata">

**Author:** ![rashmi](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/rashmi/32/16391_2.png) [@rashmi](https://discuss.elastic.co/u/rashmi)\
**Post date:** [March 5, 2018, 4:05pm UTC](https://discuss.elastic.co/t/vegalite-integration-with-kibana/122439/2 "2018-03-05T16:05:08Z")

</div>

cc @nyuriks : My colleague Yuri might be able to help you with this.

Thanks  
Rashmi

---

<div class="post-metadata">

**Author:** ![paul1243](https://avatars.discourse-cdn.com/v4/letter/p/e99b99/32.png) [@paul1243](https://discuss.elastic.co/u/paul1243)\
**Post date:** [March 6, 2018, 5:42am UTC](https://discuss.elastic.co/t/vegalite-integration-with-kibana/122439/3 "2018-03-06T05:42:51Z")

</div>

Sure. Thank you. 🙂

---

<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:** [March 6, 2018, 7:24am UTC](https://discuss.elastic.co/t/vegalite-integration-with-kibana/122439/4 "2018-03-06T07:24:44Z")

</div>

@paul1243 Sorry, I am not sure I understood. Could you sketch what you are trying to draw, e.g. a simple image, and post it here? Also, please post your ES query - in some cases it is possible to change it to simplify the graph. Thanks!

---

<div class="post-metadata">

**Author:** ![paul1243](https://avatars.discourse-cdn.com/v4/letter/p/e99b99/32.png) [@paul1243](https://discuss.elastic.co/u/paul1243)\
**Post date:** [March 6, 2018, 9:50am UTC](https://discuss.elastic.co/t/vegalite-integration-with-kibana/122439/5 "2018-03-06T09:50:25Z")

</div>

Hi @nyuriks,  
I'd like to create a bar stack chart, something like below:  
 ![image](https://us1.discourse-cdn.com/elastic/original/3X/a/9/a9095cac34d9a24be747670e66df75419f37cc45.png)

Here is the request:

```auto
GET test_versions-*/_search
{
  "size": 0,
  "aggs": {
    "2": {
      "terms": {
        "field": "file_name.keyword",
        "size": 50,
        "order": {
          "_key": "asc"
        }
      },
      "aggs": {
        "5": {
          "terms": {
            "field": "build_number",
            "size": 1,
            "order": {
              "_key": "desc"
            }
          },
          "aggs": {
            "total_cases": {
              "sum": { "field": "total_cases" }
            },
            "Passed": {
              "sum": { "field": "Passed" }
            },
            "Failed": {
              "sum": { "field": "Failed" }
            },
            "Skipped": {
              "sum": { "field": "Aborted" }
            }
          }
        }
      }
    }
  }
}

```

And the response I posted on my first post. Thanks for your help.

---

<div class="post-metadata">

**Author:** ![paul1243](https://avatars.discourse-cdn.com/v4/letter/p/e99b99/32.png) [@paul1243](https://discuss.elastic.co/u/paul1243)\
**Post date:** [March 7, 2018, 9:13am UTC](https://discuss.elastic.co/t/vegalite-integration-with-kibana/122439/6 "2018-03-07T09:13:30Z")

</div>

Hi @nyuriks - Could you please have a look at my post. Thanks !

---

<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:** [March 9, 2018, 2:33am UTC](https://discuss.elastic.co/t/vegalite-integration-with-kibana/122439/7 "2018-03-09T02:33:53Z")

</div>

@paul1243, you have several variables that you are trying to stack on top of each other, but they are all inside the same "object" (in the bucket list). Vega Lite does not support "fold" transformation yet (there is a github issues), but Vega can do it just fine. Also, you have two nested aggregations - first by `file_name.keyword` (top 50), followed by `build_number` (first one). Is that intentional? If the second aggregation is always size=1, this makes things a lot easier. In any case, here's the graph, hope that helps. Replace the values with your url to make it dynamic (I renamed `2` and `5` into easy to read names, so you might want to change your query too.

```auto
{
  "$schema": "https://vega.github.io/schema/vega/v3.json",
  "padding": 5,
  "data": [
    {
      "name": "table",
      "values": {
        "aggregations": {
          "byFilename": {
            "doc_count_error_upper_bound": 0,
            "sum_other_doc_count": 0,
            "buckets": [
              {
                "byBuild": {
                  "doc_count_error_upper_bound": 0,
                  "sum_other_doc_count": 39,
                  "buckets": [
                    {
                      "key": 146,
                      "doc_count": 1,
                      "Passed": {"value": 3},
                      "total_cases": {"value": 3},
                      "Failed": {"value": 0},
                      "Skipped": {"value": 0}
                    }
                  ]
                },
                "key": "Example1",
                "doc_count": 40
              },
              {
                "byBuild": {
                  "doc_count_error_upper_bound": 0,
                  "sum_other_doc_count": 48,
                  "buckets": [
                    {
                      "key": 145,
                      "doc_count": 1,
                      "Passed": {"value": 2},
                      "total_cases": {"value": 2},
                      "Failed": {"value": 0},
                      "Skipped": {"value": 0}
                    }
                  ]
                },
                "key": "Example2",
                "doc_count": 49
              }
            ]
          }
        }
      },
      "format": {"property": "aggregations.byFilename.buckets"},
      "transform": [
        {
          "type": "formula",
          "expr": "datum.byBuild.buckets[0].total_cases.value",
          "as": "total_cases"
        },
        {
          "type": "formula",
          "expr": "datum.byBuild.buckets[0].Passed.value",
          "as": "Passed"
        },
        {
          "type": "formula",
          "expr": "datum.byBuild.buckets[0].Failed.value",
          "as": "Failed"
        },
        {
          "type": "formula",
          "expr": "datum.byBuild.buckets[0].Skipped.value",
          "as": "Skipped"
        },
        {
          "type": "fold",
          "fields": ["total_cases", "Passed", "Failed", "Skipped"],
          "as": ["metric", "metricValue"]
        },
        {
          "type": "stack",
          "groupby": ["key"],
          "sort": {"field": "metric"},
          "field": "metricValue"
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "band",
      "range": "width",
      "domain": {"data": "table", "field": "key"}
    },
    {
      "name": "y",
      "type": "linear",
      "range": "height",
      "nice": true,
      "zero": true,
      "domain": {"data": "table", "field": "y1"}
    },
    {
      "name": "color",
      "type": "ordinal",
      "range": "category",
      "domain": {"data": "table", "field": "metric"}
    }
  ],
  "axes": [
    {"orient": "bottom", "scale": "x", "zindex": 1},
    {"orient": "left", "scale": "y", "zindex": 1}
  ],
  "legends": [{"fill": "color"}],
  "marks": [
    {
      "type": "rect",
      "from": {"data": "table"},
      "encode": {
        "enter": {
          "x": {"scale": "x", "field": "key"},
          "width": {"scale": "x", "band": 1, "offset": -1},
          "y": {"scale": "y", "field": "y0"},
          "y2": {"scale": "y", "field": "y1"},
          "fill": {"scale": "color", "field": "metric"}
        }
      }
    }
  ]
}

```

---

<div class="post-metadata">

**Author:** ![paul1243](https://avatars.discourse-cdn.com/v4/letter/p/e99b99/32.png) [@paul1243](https://discuss.elastic.co/u/paul1243)\
**Post date:** [March 11, 2018, 12:19pm UTC](https://discuss.elastic.co/t/vegalite-integration-with-kibana/122439/8 "2018-03-11T12:19:55Z")

</div>

WoW.. This is awesome @nyuriks . Thank you so much.  
X-Axis Labels are coming in Horizontal, so the names of the file names are overlapping. How do I get the labels Vertically. Thanks. 🙂

---

<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:** [March 12, 2018, 11:20pm UTC](https://discuss.elastic.co/t/vegalite-integration-with-kibana/122439/9 "2018-03-12T23:20:28Z")

</div>

You can change the angle of the axes labels. For Vega, see [axes docs](https://vega.github.io/vega/docs/axes/) (search for angle). For Vega Lite, there is a labelAngle axes param.

---

<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:** [April 9, 2018, 11:20pm UTC](https://discuss.elastic.co/t/vegalite-integration-with-kibana/122439/10 "2018-04-09T23:20:30Z")

</div>

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