# Display Time Range in Vega Text

**URL:** <https://discuss.elastic.co/t/display-time-range-in-vega-text/217689>\
**Category:** Kibana\
**Tags:** vega\
**Created:** [February 3, 2020, 8:34pm UTC](https://discuss.elastic.co/t/display-time-range-in-vega-text/217689 "2020-02-03T20:34:44Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![butchkelley](https://avatars.discourse-cdn.com/v4/letter/b/a4c791/32.png) [@butchkelley](https://discuss.elastic.co/u/butchkelley)\
**Post date:** [February 3, 2020, 8:34pm UTC](https://discuss.elastic.co/t/display-time-range-in-vega-text/217689/1 "2020-02-03T20:34:44Z")

</div>

Hello,  
I’m trying to add text to my vega visualization that displays the selected Time Range. I started with what’s shown below, which gives the current time but I quickly reached a dead-end. Is there a built in signal that accesses the min and max timefilter?

Thanks,  
Butch

```auto

{
  "$schema": "https://vega.github.io/schema/vega/v3.json",
  "title": "Last refreshed",
  "data": {
    "url": {
      "%context%": true,
      "%timefield%": "@timestamp",
      "index": "_all",
      "body": {
        "size": 0
      }
    }
  },
  "marks": [
    {
      "type": "text",
      "encode": {
        "enter": {
          "fill": {"value": "#000"},
          "fontSize": {"value": "30"},
          "text": {"signal": "timeFormat(now(), '%Y-%m-%dT%H:%M:%S')"}
        },
        "update": {"x": {"value": "0"}, "y": {"value": "0"}}
      }
    }
  ]
}

```

---

<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:** [February 3, 2020, 10:10pm UTC](https://discuss.elastic.co/t/display-time-range-in-vega-text/217689/2 "2020-02-03T22:10:45Z")

</div>

Unfortunately there is no built-in signal like that (but that sounds like a good idea to implement it -- please create a ticket in [https://github.com/elastic/kibana](https://github.com/elastic/kibana) ) The only thing that Kibana Vega has is the ability to filter data based on the current timefilter.

As a possible workaround that I am not sure would work: in theory there might be a way to create an ElasticSearch query in such a way so it returns the same value as passed in, thus returning the current timefilter. Just a thought that I never really explored.

---

<div class="post-metadata">

**Author:** ![Midas](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/midas/32/50275_2.png) [@Midas](https://discuss.elastic.co/u/Midas)\
**Post date:** [February 3, 2020, 10:55pm UTC](https://discuss.elastic.co/t/display-time-range-in-vega-text/217689/3 "2020-02-03T22:55:47Z")

</div>

Yuri is correct, you can use Elasticsearch to accomplish what you are trying to do here. Simply create a data call like so:

{"name": "timegrabber", "url": {"index": "\<\>", "%context%": true, "%timefield%": "\<\< insert time field name\>\>", "body": {"aggs": {"time\_buckets": {"date\_histogram": {"field": "\<\>", "interval": {"%autointerval%": true}, "extended\_bounds": {"min": {"%timefilter%": "min"}, "max": {"%timefilter%": "max"}}, "min\_doc\_count": 0}}}, "size": 0}}, "format": {"property": "aggregations.time\_buckets.buckets"}, "transform": [{"type": "aggregate", "fields": ["key\_as\_string", "key\_as\_string"], "ops": ["min", "max"], "as": ["min", "max"]}]}

Alternatively you could call key instead which will be the time in UNIX time. After this, you need to just call your min and max as appropriate to show that in a text call. You should add a time filter too to display in proper format if using the key (in UNIX time) like "text": {"signal": "utcFormat(datum.min, '%x %X')"}.

Once done, all you need to do is add a from to the timegrabber data call and call the datum.min and datum.max respectively.

Please let me know if that works for you!

---

<div class="post-metadata">

**Author:** ![butchkelley](https://avatars.discourse-cdn.com/v4/letter/b/a4c791/32.png) [@butchkelley](https://discuss.elastic.co/u/butchkelley)\
**Post date:** [February 4, 2020, 3:00pm UTC](https://discuss.elastic.co/t/display-time-range-in-vega-text/217689/4 "2020-02-04T15:00:43Z")

</div>

Awesome! That worked! Thank you both for your help.

Also, I created ticket #56743 "_Create Vega signal that accesses the min and max timefilter_" as requested.

Thanks again,  
Butch

---

<div class="post-metadata">

**Author:** ![butchkelley](https://avatars.discourse-cdn.com/v4/letter/b/a4c791/32.png) [@butchkelley](https://discuss.elastic.co/u/butchkelley)\
**Post date:** [February 4, 2020, 5:31pm UTC](https://discuss.elastic.co/t/display-time-range-in-vega-text/217689/5 "2020-02-04T17:31:47Z")

</div>

Midas -

Could you explain what you mean by "_you could call key instead_"? I just realized that @timestamp is a string value which I'm having problems formatting into something a little easier to read. I'm pretty sure you gave me the answer in your last paragraph but I'm not tracking.

Thanks,  
Butch

---

<div class="post-metadata">

**Author:** ![Midas](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/midas/32/50275_2.png) [@Midas](https://discuss.elastic.co/u/Midas)\
**Post date:** [February 4, 2020, 6:19pm UTC](https://discuss.elastic.co/t/display-time-range-in-vega-text/217689/6 "2020-02-04T18:19:14Z")

</div>

Sure, instead of calling key\_as\_string in the aggregate transform, use the "key" in the "fields": section. This will call the time as a UNIX timestamp instead of a string. So basically do this instead:

{"name": "timegrabber", "url": {"index": "\<\>", "%context%": true, "%timefield%": "\<\< insert time field name\>\>", "body": {"aggs": {"time\_buckets": {"date\_histogram": {"field": "\<\>", "interval": {"%autointerval%": true}, "extended\_bounds": {"min": {"%timefilter%": "min"}, "max": {"%timefilter%": "max"}}, "min\_doc\_count": 0}}}, "size": 0}}, "format": {"property": "aggregations.time\_buckets.buckets"}, "transform": [{"type": "aggregate", "fields": ["key", "key"], "ops": ["min", "max"], "as": ["min", "max"]}]}

Hope that helps!

---

<div class="post-metadata">

**Author:** ![butchkelley](https://avatars.discourse-cdn.com/v4/letter/b/a4c791/32.png) [@butchkelley](https://discuss.elastic.co/u/butchkelley)\
**Post date:** [February 4, 2020, 7:36pm UTC](https://discuss.elastic.co/t/display-time-range-in-vega-text/217689/7 "2020-02-04T19:36:19Z")

</div>

Yes, I understand now.

Thanks for your time,  
Butch

---

<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:** [March 3, 2020, 7:36pm UTC](https://discuss.elastic.co/t/display-time-range-in-vega-text/217689/8 "2020-03-03T19:36:35Z")

</div>

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