# Vega-lite vs Kibana

**URL:** https://discuss.elastic.co/t/vega-lite-vs-kibana/146301
**Category:** Kibana
**Created:** [August 28, 2018, 8:57am UTC](https://discuss.elastic.co/t/vega-lite-vs-kibana/146301 "2018-08-28T08:57:32Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![pgianf](https://avatars.discourse-cdn.com/v4/letter/p/b5a626/32.png) [@pgianf](https://discuss.elastic.co/u/pgianf)
#### Post date: [August 28, 2018, 8:57am UTC](https://discuss.elastic.co/t/vega-lite-vs-kibana/146301/1 "2018-08-28T08:57:33Z")

</div>

Hi  
I've this graph definition that works in vega-editor instead using kibana that graph won't render, the error is Cannot read property 'count' of undefined and VEGA\_DEBUG.view.data('source\_0') is undefined.  
Here there is the json file

```
{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "data": {"url": "https://gist.githubusercontent.com/pgianf/627ff2f2a06b4733e4542b6e6c7ca27b/raw/0b60966281fe7a5d35b26c1f261692b6681e5c14/test_2018.json"
  ,
    "format": {"property": "hits.hits"}
    },
 "transform": [
   {"timeUnit": "yearmonthdatehours", "field": "_source.data", "as": "tempo"}  
 ],
  "width": 1500, "height": 950, 
  "layer": [
     {"mark": "bar",
      "encoding": {
        "x": {"aggregate": "sum", "field": "_source.count", "type": "quantitative"},
        "y": {"field": "tempo", "type": "temporal"} ,
         "color": {"field": "_source.tipologia", "type": "nominal"}
        
        }
     } 
  ] 
}
```

---

<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: [August 28, 2018, 5:57pm UTC](https://discuss.elastic.co/t/vega-lite-vs-kibana/146301/2 "2018-08-28T17:57:54Z")

</div>

@pgianf this is a limitation of the older VegaLite version that was used in Kibana. It cannot access sub-fields properly in some case, and you need to extract those subfields to the top level using `calculate`:

```
{
  $schema: https://vega.github.io/schema/vega-lite/v2.json
  data: {
    url: https://gist.githubusercontent.com/pgianf/627ff2f2a06b4733e4542b6e6c7ca27b/raw/0b60966281fe7a5d35b26c1f261692b6681e5c14/test_2018.json
    format: {property: "hits.hits"}
  }
  transform: [
    {calculate: "datum._source.count", as: "count"}
    {calculate: "datum._source.tipologia", as: "tipologia"}
    {timeUnit: "yearmonthdatehours", field: "_source.data", as: "tempo"}
  ]
  width: 1500
  height: 950
  layer: [
    {
      mark: bar
      encoding: {
        x: {aggregate: "sum", field: "count", type: "quantitative"}
        y: {field: "tempo", type: "temporal"}
        color: {field: "tipologia", type: "nominal"}
      }
    }
  ]
}
```

---

<div class="post-metadata">

### Author: ![pgianf](https://avatars.discourse-cdn.com/v4/letter/p/b5a626/32.png) [@pgianf](https://discuss.elastic.co/u/pgianf)
#### Post date: [August 29, 2018, 6:43am UTC](https://discuss.elastic.co/t/vega-lite-vs-kibana/146301/3 "2018-08-29T06:43:18Z")

</div>

What about mouse over events? is there any differences with Kibana? I cannot see the legend when mouse goes over the bars.

 ![33](https://us1.discourse-cdn.com/elastic/original/3X/2/4/24ba9dc7e8ccd8d911f4d876daa04292831d82bf.png)

---

<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 26, 2018, 6:43am UTC](https://discuss.elastic.co/t/vega-lite-vs-kibana/146301/4 "2018-09-26T06:43:20Z")

</div>

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