# How to use Vega visulization in Kibana

**URL:** https://discuss.elastic.co/t/how-to-use-vega-visulization-in-kibana/103023
**Category:** Kibana
**Created:** [October 6, 2017, 1:53pm UTC](https://discuss.elastic.co/t/how-to-use-vega-visulization-in-kibana/103023 "2017-10-06T13:53:10Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![mounika](https://avatars.discourse-cdn.com/v4/letter/m/b4bc9f/32.png) [@mounika](https://discuss.elastic.co/u/mounika)
#### Post date: [October 6, 2017, 1:53pm UTC](https://discuss.elastic.co/t/how-to-use-vega-visulization-in-kibana/103023/1 "2017-10-06T13:53:11Z")

</div>

Hi,

I am trying the query in the below screen shot for vega visulization in kibana, but I am getting the below error. can someone please help me?

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/c/3/c3f09923659d5f405b68dc307ab887dd8c06179f.png)

Thanks

---

<div class="post-metadata">

### Author: ![weltenwort](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/weltenwort/32/53885_2.png) [@weltenwort](https://discuss.elastic.co/u/weltenwort)
#### Post date: [October 6, 2017, 2:23pm UTC](https://discuss.elastic.co/t/how-to-use-vega-visulization-in-kibana/103023/2 "2017-10-06T14:23:40Z")

</div>

Hi @mounika,

could you please check the browser console for any displayed errors? And could you please let us know which versions of Kibana and the vega plugin you are using?

It would also help if you could provide the vega json expression in the screenshot as text for easier reproduction.

---

<div class="post-metadata">

### Author: ![mounika](https://avatars.discourse-cdn.com/v4/letter/m/b4bc9f/32.png) [@mounika](https://discuss.elastic.co/u/mounika)
#### Post date: [October 12, 2017, 3:05pm UTC](https://discuss.elastic.co/t/how-to-use-vega-visulization-in-kibana/103023/3 "2017-10-12T15:05:32Z")

</div>

I am using Kibana 5.5.1 version, and here is the Json request

{  
"$schema": "[https://vega.github.io/schema/vega-lite/v2.json](https://vega.github.io/schema/vega-lite/v2.json)",  
"title": "mock test",  
"data": {  
"url": {  
"index" :"logstash-\*",  
"body" : {  
"query" :{  
"match" : {  
"component": "queries\_new"  
}  
},  
"aggs": {  
"terms": {  
"terms" : {  
"field" : "query.keyword",  
"exclude" :["._describe" ,"show_"]  
}  
}  
}  
}  
}  
},  
"mark": "line",  
"encoding": {  
"x": {  
"field": "query\_time",  
"type": "temporal",  
"axis": {"title": false}  
},  
"y": {  
"field": "type",  
"type": "quantitative",  
"axis": {"title": "Closing Price"}  
}  
}  
}

and I am seeing the below errors in the browser console

TypeError: Cannot convert undefined or null to object  
at Function.keys ()  
at parse (/bundles/kibana.bundle.js?v=15405:263)  
at read (/bundles/kibana.bundle.js?v=15405:271)  
at View.ingest$1 [as ingest] (/bundles/kibana.bundle.js?v=15405:263)  
at /bundles/kibana.bundle.js?v=15405:263  
at processQueue (/bundles/commons.bundle.js?v=15405:38)  
at /bundles/commons.bundle.js?v=15405:38  
at Scope.$eval (/bundles/commons.bundle.js?v=15405:39)  
at Scope.$digest (/bundles/commons.bundle.js?v=15405:39)  
at Scope.$apply (/bundles/commons.bundle.js?v=15405:39)  
(anonymous) @ /bundles/commons.bundle.js?v=15405:38  
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: [October 18, 2017, 6:49am UTC](https://discuss.elastic.co/t/how-to-use-vega-visulization-in-kibana/103023/4 "2017-10-18T06:49:49Z")

</div>

@mounika, there are a few issues - at least that's what I can see without having your data (see [debugging tips about sharing your data](https://github.com/nyurik/kibana-vega-vis#debugging)). You need to give VegaLite an array of objects to draw. Your ElasticSearch query returns data in the following format:

```auto
{
  aggregations: {
    terms: {
      buckets: [
        {...}, {...}, {...}, {...}, ...
      ]
    }
  },
  hits: {
    hits: [
      {...}, {...}, {...}, {...}, ...
    ]
  }
}

```

I assume you want to draw the `aggregations.terms.buckets` in the graph, so you need to add this after the `"url": {...}` block, inside the `"data"` block:

```auto
"format": {
  "property": "aggregations.terms.buckets"
}

```

Also, while not mandatory, you probably don't need all those "hits" - you only want to plot the aggregation results. If so, add `"size": 0` to the `"body"` element of your query. This makes for a good performance optimization.

Lastly, if your query return empty result, you hit a known bug that just [got fixed](https://github.com/vega/vega-loader/commit/c2c35af7a5f7865e61b86e501b18715ebeafc101). I expect to publish a new version release as soon as Vega team makes a release.

Hope this helps!

---

<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: [November 15, 2017, 6:49am UTC](https://discuss.elastic.co/t/how-to-use-vega-visulization-in-kibana/103023/5 "2017-11-15T06:49:53Z")

</div>

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