# Read data from ElasticSearch data using vega

**URL:** <https://discuss.elastic.co/t/read-data-from-elasticsearch-data-using-vega/238670>\
**Category:** Kibana\
**Tags:** vega\
**Created:** [June 25, 2020, 12:33pm UTC](https://discuss.elastic.co/t/read-data-from-elasticsearch-data-using-vega/238670 "2020-06-25T12:33:51Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![issaissa](https://avatars.discourse-cdn.com/v4/letter/i/3be4f8/32.png) [@issaissa](https://discuss.elastic.co/u/issaissa)\
**Post date:** [June 25, 2020, 12:33pm UTC](https://discuss.elastic.co/t/read-data-from-elasticsearch-data-using-vega/238670/1 "2020-06-25T12:33:51Z")

</div>

This is my vega code:

```auto
    {
      $schema: https://vega.github.io/schema/vega-lite/v2.json
      data: {
    url: {
      %context%: true
      %timefield%: "incident_date_time"
      index: incident*
      body: {
        size: 10000
        _source: ["incident_date_time"]
      }
    }
    # We only need the content of hits.hits array
    format: {property: "hits.hits"}
      }
      mark: bar
      encoding: {
    x: {field: "time", type: "temporal"}
      }
    }

```

I have index called **incident** \* in the index pattern and I am trying to display number of incidents per day (count)

But I am getting empty chart.

 ![empty chart](https://us1.discourse-cdn.com/elastic/original/3X/a/c/ac0f116b75856c1464159856a491ba8caa1ae9cd.png)  
I tired to build it using kibana vis. and it works.  
 ![kibana cahrt](https://us1.discourse-cdn.com/elastic/original/3X/e/2/e29305cf0e5918f11e6ee9c9da8c787a7d2de5e1.png)

This is the data form from dev tools when I run

```auto
GET incident*/_search
{
  "size": 3,
  "_source": ["incident_date_time"]
}

```

```auto
{
  "took" : 2,
  "timed_out" : false,
  "_shards" : {
    "total" : 1,
    "successful" : 1,
    "skipped" : 0,
    "failed" : 0
  },
  "hits" : {
    "total" : {
      "value" : 333,
      "relation" : "eq"
    },
    "max_score" : 1.0,
    "hits" : [
      {
        "_index" : "incident_data",
        "_type" : "_doc",
        "_id" : "2",
        "_score" : 1.0,
        "_source" : {
          "incident_date_time" : "2020-03-19T18:45:31.000Z"
        }
      },
      {
        "_index" : "incident_data",
        "_type" : "_doc",
        "_id" : "3",
        "_score" : 1.0,
        "_source" : {
          "incident_date_time" : "2020-03-19T18:45:51.000Z"
        }
      },
      {
        "_index" : "incident_data",
        "_type" : "_doc",
        "_id" : "4",
        "_score" : 1.0,
        "_source" : {
          "incident_date_time" : "2020-03-19T18:46:23.000Z"
        }
      }
    ]
  }
}

```

Any idea what's wrong

---

<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:** [June 25, 2020, 12:48pm UTC](https://discuss.elastic.co/t/read-data-from-elasticsearch-data-using-vega/238670/2 "2020-06-25T12:48:00Z")

</div>

Give the data set a name. It's a required field. [Data | Vega](https://vega.github.io/vega/docs/data/)

Then in your marks reference it. [Marks | Vega](https://vega.github.io/vega/docs/marks/)

```auto
    {
      $schema: https://vega.github.io/schema/vega-lite/v2.json
      data: {
    url: {
      name: table
      %context%: true
      %timefield%: "incident_date_time"
      index: incident*
      body: {
        size: 10000
        _source: ["incident_date_time"]
      }
    }
    # We only need the content of hits.hits array
    format: {property: "hits.hits"}
      }
      mark: bar
     from: {"data": "table"},
      encoding: {
    x: {field: "time", type: "temporal"}
      }
    }

```

You can see your data in your browsers dev tools console. On the console you can run VEGA\_DEBUG.view.data('data') and it will show you what's in the data set. This is an easy way to troubleshoot if the data or marks is your issue.

---

<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:** [June 25, 2020, 12:50pm UTC](https://discuss.elastic.co/t/read-data-from-elasticsearch-data-using-vega/238670/3 "2020-06-25T12:50:52Z")

</div>

Just noticed you are using Vega-Lite vs Vega which is what I reference. I don't use Vega-Lite so I am not sure it works the same way.

---

<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:** [June 25, 2020, 2:46pm UTC](https://discuss.elastic.co/t/read-data-from-elasticsearch-data-using-vega/238670/4 "2020-06-25T14:46:36Z")

</div>

Your vega-lite spec looks totally fine to me, except that you are encoding a field that doesn't exist: `x: {field: "time", type: "temporal"}` doesn't make sense, because the documents you have don't have a field called `time`. Since your documents contain an ISO 8601 timestamp, you may want to apply a `transform` section above the encodings:

```auto
transform: [{
  calculate: "toDate(datum._source.incident_date_time)",
  as: "time"
}]

encoding: {

```

---

<div class="post-metadata">

**Author:** ![issaissa](https://avatars.discourse-cdn.com/v4/letter/i/3be4f8/32.png) [@issaissa](https://discuss.elastic.co/u/issaissa)\
**Post date:** [June 25, 2020, 3:55pm UTC](https://discuss.elastic.co/t/read-data-from-elasticsearch-data-using-vega/238670/5 "2020-06-25T15:55:01Z")

</div>

Thanks. I got you. Are you aware on how I may use the transform as domain for scale. \

```auto
     transform: [{calculate: "toDate(datum._source.incident_date_time)",as: "time"}],

     "scales": [
       {
         "name": "xscale",
         "type": "time",
         "range":"width",
         "round": true,
         "domain": {"data": "events", "field": "timefield"}
       }
     ],

```

I was using time timefield but as you described it is non informative. How may I use the transformation here?

---

<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:** [June 25, 2020, 6:54pm UTC](https://discuss.elastic.co/t/read-data-from-elasticsearch-data-using-vega/238670/6 "2020-06-25T18:54:07Z")

</div>

It looks like you're trying to mix Vega and Vega-lite specs: try using the docs here [https://vega.github.io/vega-lite/docs/scale.html#example-customizing-domain-for-a-time-scale](https://vega.github.io/vega-lite/docs/scale.html#example-customizing-domain-for-a-time-scale)

---

<div class="post-metadata">

**Author:** ![issaissa](https://avatars.discourse-cdn.com/v4/letter/i/3be4f8/32.png) [@issaissa](https://discuss.elastic.co/u/issaissa)\
**Post date:** [June 29, 2020, 6:39am UTC](https://discuss.elastic.co/t/read-data-from-elasticsearch-data-using-vega/238670/7 "2020-06-29T06:39:14Z")

</div>

Thank you. The issue was in mixing vega and vega-lite and not adding a name for the data. Also, transform-calculate in vega-lite is transform-formula in vega.

---

<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:** [July 27, 2020, 6:39am UTC](https://discuss.elastic.co/t/read-data-from-elasticsearch-data-using-vega/238670/8 "2020-07-27T06:39:14Z")

</div>

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