# Trouble showing data in Vega-lite

**URL:** <https://discuss.elastic.co/t/trouble-showing-data-in-vega-lite/260216>\
**Category:** Kibana\
**Tags:** vega\
**Created:** [January 5, 2021, 2:01pm UTC](https://discuss.elastic.co/t/trouble-showing-data-in-vega-lite/260216 "2021-01-05T14:01:49Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Aishna\_Gupta](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/aishna_gupta/32/77345_2.png) [@Aishna\_Gupta](https://discuss.elastic.co/u/Aishna_Gupta)\
**Post date:** [January 5, 2021, 2:01pm UTC](https://discuss.elastic.co/t/trouble-showing-data-in-vega-lite/260216/1 "2021-01-05T14:01:49Z")

</div>

Hello Everyone,  
I'm new to Vega-lite. I'm trying to plot a bar graph using Vega-lite getting data from an Index. But the data does not show up in the view, only the axes.

This is the script I'm using:

```auto
   {
      "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
      "data": {
        "url": {
          "index": "my-index",
          "%context%": true,
          "size":2000,
          "body": {}
        },
        "format": {"property": "hits.hits"}
      },
      "mark": "bar",
      "transform": [
        {
          "calculate": "datum._source.property.a",
          "as": "a"
        },
        {
              "calculate": "datum._source.property.b",
              "as": "b"
            }
        
      ],
      "encoding": {
        "x": {
          "field": "a",
          "type": "ordinal",
          "axis": {"title": "A"}
        },
        "y":{
          "field": "b",
          "type": "temporal",
          "axis": {"title": "B"}
        }
      }
    }

```

And data looks like:

```auto
{
  "took" : 1,
  "timed_out" : false,
  "_shards" : {
    "total" : 5,
    "successful" : 5,
    "skipped" : 0,
    "failed" : 0
  },
  "hits" : {
    "total" : 1499,
    "max_score" : 1.0,
    "hits" : [
      {
        "_index" : "my-index",
        "_type" : "data",
        "_id" : "AcwtemoBAxKStAaIEnOV",
        "_score" : 1.0,
        "_source" : {
          "property" : {
                "a": 1,
                "b": 3
            }
        }
      },
      {
        "_index" : "my-index",
        "_type" : "data",
        "_id" : "BMwtemoBAxKStAaIEnOV",
        "_score" : 1.0,
        "_source" : {
          "property" : {
                "a": 2,
                "b": 2
            }
        }
      }
    ]
  }

```

I saw multiple posts with similar problem but authors have not posted the solution that worked for them. Requesting help from fellow community members.

---

<div class="post-metadata">

**Author:** ![wylie](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/wylie/32/81794_2.png) [@wylie](https://discuss.elastic.co/u/wylie)\
**Post date:** [January 5, 2021, 3:52pm UTC](https://discuss.elastic.co/t/trouble-showing-data-in-vega-lite/260216/2 "2021-01-05T15:52:19Z")

</div>

Hi, welcome! Are you using Kibana 7.8 or prior? Vega debugging has gotten much easier in 7.10, where we introduced a debugging panel in the Kibana inspector. It looks like you're using an older version though.

I think you will get the best help if you provide a Vega-lite spec that we can copy+paste into the online Vega editor to test. Please follow the instructions here to ask for Vega help. You may need to follow the instructions on copying it from the browser console, instead of the Inspect tab.

> **[Vega reference | Kibana Guide \[7.10\] | Elastic](https://www.elastic.co/guide/en/kibana/current/vega-reference.html#asking-for-help-with-a-vega-spec)**

---

<div class="post-metadata">

**Author:** ![aaron-nimocks](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/aaron-nimocks/32/73965_2.png) [@aaron-nimocks](https://discuss.elastic.co/u/aaron-nimocks)\
**Post date:** [January 5, 2021, 4:20pm UTC](https://discuss.elastic.co/t/trouble-showing-data-in-vega-lite/260216/4 "2021-01-05T16:20:08Z")

</div>

Here is the [Vega Editor link](https://vega.github.io/editor/#/url/vega-lite/N4IgJAzgxgFgpgWwIYgFwhgF0wBwqgegIDc4BzJAOjIEtMYBXAI0poHsDp5kTykBaADZ04JAEyUAVhDYA7EABoQAEySYUqUAwBOgtBmx5CBJDhqVZONjVmZWHACwB2ZQDM4AZgCsARiRexJCgoJmUABh8vOEUQVzZtZEw0UBxtNhw4bUwAT30YOghKfMwIEABfMqVkbQBrfSYkbRjMbSRZCDiEtABtUCgkQSgGQTVo9FVMBgRKAH0ZHSg4SlT0zJzKFCUkUvQUSr6BoZHMMZU1Kdn57UXltIys7MomGO368oBdJThZKDZlGzIyRAAA8ga4aHBBMp9JsQDkMvp4v9ZAMXsCaDtQJg6IJTgBBcqVEC5TSxCFQt5KeGnE4IKytPRbdGYuE404AIUJFSAA) and it works so that leads me to believe your query isn't returning the same data you posted.

How do you know what the data looks like?

Also you have `"%context%": true,` so if you have any filters set it could be the problem.

---

<div class="post-metadata">

**Author:** ![Aishna\_Gupta](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/aishna_gupta/32/77345_2.png) [@Aishna\_Gupta](https://discuss.elastic.co/u/Aishna_Gupta)\
**Post date:** [January 5, 2021, 5:35pm UTC](https://discuss.elastic.co/t/trouble-showing-data-in-vega-lite/260216/5 "2021-01-05T17:35:10Z")

</div>

Hey Aaron, thank you so much for your reply.  
I check the data via the response received in the developer panel.  
After looking at the data I realised that the issue can be probably with the transform

> [@Aishna\_Gupta](#):
>
> ```auto
> "transform": [
> {
> "calculate": "datum._source.property.a",
> "as": "a"
> },
> {
> "calculate": "datum._source.property.b",
> "as": "b"
> }
>         
> 
> ```

Could you clarify the following please:

```auto
{
  "took" : 1,
  "timed_out" : false,
  "_shards" : {
    "total" : 5,
    "successful" : 5,
    "skipped" : 0,
    "failed" : 0
  },
  "hits" : {
    "total" : 1499,
    "max_score" : 1.0,
    "hits" : [
      {
        "_index" : "my-index",
        "_type" : "data",
        "_id" : "AcwtemoBAxKStAaIEnOV",
        "_score" : 1.0,
        "_source" : {
          "property" : {
                "a": 1,
                "b": {
                      "c": 2,
                      "d": 2
                 }
            }
        }
      },
      {
        "_index" : "my-index",
        "_type" : "data",
        "_id" : "BMwtemoBAxKStAaIEnOV",
        "_score" : 1.0,
        "_source" : {
          "property" : {
                "a": 2,
                "b": {
                      "c": 3,
                      "d": 4
                 }
            }
        }
      }
    ]
  }

```

(Edit: b is now a nested property)  
If the data looks something like this then will the following transform work?

```auto
"transform": [
        {
          "calculate": "datum._source.property.b.c.",
          "as": "c"
        },
        {
              "calculate": "datum._source.property.b.d",
              "as": "d"
            }
        
      ],

```

Thank you in advance 🙂

---

<div class="post-metadata">

**Author:** ![Aishna\_Gupta](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/aishna_gupta/32/77345_2.png) [@Aishna\_Gupta](https://discuss.elastic.co/u/Aishna_Gupta)\
**Post date:** [January 5, 2021, 5:36pm UTC](https://discuss.elastic.co/t/trouble-showing-data-in-vega-lite/260216/6 "2021-01-05T17:36:10Z")

</div>

Hi Wylie, we are using Kibana 7.6.2

---

<div class="post-metadata">

**Author:** ![wylie](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/wylie/32/81794_2.png) [@wylie](https://discuss.elastic.co/u/wylie)\
**Post date:** [January 5, 2021, 5:56pm UTC](https://discuss.elastic.co/t/trouble-showing-data-in-vega-lite/260216/7 "2021-01-05T17:56:44Z")

</div>

Based on your latest response it looks like you might have found the issue on your own. I don't think I can help you more unless you show what your `VEGA_DEBUG.vegalite_spec` contains from the browser console.

---

<div class="post-metadata">

**Author:** ![aaron-nimocks](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/aaron-nimocks/32/73965_2.png) [@aaron-nimocks](https://discuss.elastic.co/u/aaron-nimocks)\
**Post date:** [January 5, 2021, 6:01pm UTC](https://discuss.elastic.co/t/trouble-showing-data-in-vega-lite/260216/8 "2021-01-05T18:01:18Z")

</div>

> [@Aishna\_Gupta](#):
>
> `"calculate": "datum._source.property.b.c.",`

You have a `.` after c. Remove that and try again.

---

<div class="post-metadata">

**Author:** ![Aishna\_Gupta](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/aishna_gupta/32/77345_2.png) [@Aishna\_Gupta](https://discuss.elastic.co/u/Aishna_Gupta)\
**Post date:** [January 5, 2021, 6:11pm UTC](https://discuss.elastic.co/t/trouble-showing-data-in-vega-lite/260216/9 "2021-01-05T18:11:27Z")

</div>

Hi, I tried but did not work. Thanks for identifying this typo.  
Used Vega-editor for replicating what I am trying to do. I hope this helps me convey better.

[Vega-Editor-Link](https://vega.github.io/editor/#/url/vega-lite/N4IgJAzgxgFgpgWwIYgFwhgF0wBwqgegIDc4BzJAOjIEtMYBXAI0poHsDp5kTykBaADZ04JAEyUAVhDYA7EABoQAEySYUqUAwBOgtBmx5CBJDhqVZONjVmZWHAIwAOAGwAzN3DhuHYqH6YAFjdlAHYXQMUQNzZtZEw0UBxtNhw4bUwAT30YOghKXMwIEABfEqVkbQBrfSYkbSjMbSRZCBi4tABtUCy0-TdBNUw4eSU3GjhBZWLUTpU1BgRKAH0ZHSg4SmTU9KzKJhAAXSUkGbnVdSPynsy+9G3JOCgEsYmps-n1Sigjk4+fw7XEC9OD6B5PF7RN7TLqfKjKX4gU6whGA44gEZQNjKGxkRIgAAe+PGkwR6B+ShB+liONkSD0JwJNBmPToglB6AAgqVyiBspooaT9AjKbcOcDEFZmgykUyWcC2eKAEI8spAA)

Unfortunately, I cannot share the exact data so I'm trying to replicate the use-case.

---

<div class="post-metadata">

**Author:** ![wylie](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/wylie/32/81794_2.png) [@wylie](https://discuss.elastic.co/u/wylie)\
**Post date:** [January 5, 2021, 6:47pm UTC](https://discuss.elastic.co/t/trouble-showing-data-in-vega-lite/260216/10 "2021-01-05T18:47:08Z")

</div>

The spec you shared is pretty different from what you originally posted- there are several syntax errors. I removed the entire transform section because it didn't seem necessary?

```auto
{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "data": {
    "url": "https://api.npoint.io/186ffeef12c2cb4fd764",
    "format": {"property": "hits.hits"}
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "_source.property.b.c", "type": "ordinal", "axis": {"title": "A"}},
    "y": {"field": "_source.property.b.d", "type": "temporal", "axis": {"title": "B"}}
  }
}

```

---

<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:** [February 2, 2021, 6:47pm UTC](https://discuss.elastic.co/t/trouble-showing-data-in-vega-lite/260216/11 "2021-02-02T18:47:13Z")

</div>

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