How to use Vega visulization in Kibana

[mounika]

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?

Thanks

[weltenwort (Felix Stürmer)]

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.

[mounika]

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

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

[nyuriks (Yuri Astrakhan)]

@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). You need to give VegaLite an array of objects to draw. Your ElasticSearch query returns data in the following format:

{
  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:

"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. I expect to publish a new version release as soon as Vega team makes a release.

Hope this helps!