# Customize panel time range not work with vega visualize on my dashboard

**URL:** <https://discuss.elastic.co/t/customize-panel-time-range-not-work-with-vega-visualize-on-my-dashboard/213335>\
**Category:** Kibana\
**Tags:** vega\
**Created:** [December 30, 2019, 11:32am UTC](https://discuss.elastic.co/t/customize-panel-time-range-not-work-with-vega-visualize-on-my-dashboard/213335 "2019-12-30T11:32:18Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![steven.l](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/steven.l/32/47498_2.png) [@steven.l](https://discuss.elastic.co/u/steven.l)\
**Post date:** [December 30, 2019, 11:32am UTC](https://discuss.elastic.co/t/customize-panel-time-range-not-work-with-vega-visualize-on-my-dashboard/213335/1 "2019-12-30T11:32:18Z")

</div>

My dashboard screenshot is the following:

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/9/3/93f29592813e6cbd5f59af6c6f71f5dc733cc4d1.png)

I want to set my plot with "Last 1 minute", however, it still shows the whole timeline at the x-axis.

* * *

I have checked my kibana index patterns, it seems that the "@datatime" have the clock icon, the screenshot is following:

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/8/3/839627050e047dd8562174be733f3fe018725da7.png)

* * *

My discover page shows my "@datetime" format liked the following:

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/a/7/a7eeb3d047fa402f6a8aebd1f03eee366a72907e.png)

* * *

And my vega code of x-axis (@timestamp) on this chart is the following:  
"encoding": {  
"x": {  
"field": "\_source.@timestamp",  
"type": "temporal",  
"axis": { "title": "Timeline", "format": " %d %b %a %H:%M:%S" }  
}

I am not sure that vega code may cause time range not work or not.

* * *

my version : 7.5.1  
Could anyone can help me with this issue.

---

<div class="post-metadata">

**Author:** ![flash1293](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/flash1293/32/41227_2.png) [@flash1293](https://discuss.elastic.co/u/flash1293)\
**Post date:** [December 30, 2019, 1:31pm UTC](https://discuss.elastic.co/t/customize-panel-time-range-not-work-with-vega-visualize-on-my-dashboard/213335/2 "2019-12-30T13:31:15Z")

</div>

To include the timefilter of the panel into the query sent by Vega, you have to specify the `%timefield%` property in the `url`:

```auto
url: {
  // Specify the time filter (upper right corner) with this field
  %timefield%: @timestamp

```

See also [https://www.elastic.co/guide/en/kibana/current/vega-querying-elasticsearch.html](https://www.elastic.co/guide/en/kibana/current/vega-querying-elasticsearch.html)

If you did that and it still doesn't work, please follow these steps [https://gist.github.com/nyurik/736c34970ba3c32f3fe3d45d66719b3e](https://gist.github.com/nyurik/736c34970ba3c32f3fe3d45d66719b3e) and paste the result here.

---

<div class="post-metadata">

**Author:** ![steven.l](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/steven.l/32/47498_2.png) [@steven.l](https://discuss.elastic.co/u/steven.l)\
**Post date:** [December 31, 2019, 2:16am UTC](https://discuss.elastic.co/t/customize-panel-time-range-not-work-with-vega-visualize-on-my-dashboard/213335/3 "2019-12-31T02:16:10Z")

</div>

Hi Joe Reuter,  
I have tried your reference and my original vega code like the following:

* * *

```
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json", 
  "data":{
    "url": {   
      "index": "test",
      "%context%": true,      
        "body": {
          "size": 100,      
        }
    },
    "format": {"property": "hits.hits"}
  }
  ....

```

And my plot could show as the following screenshot:

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/7/0/708a7f969f554dac4d17fe676a2c702cae7c1897.png)

However, I edited the vega code by your reference as the following:

```
  "data":{
    "url": {
      "index": "test",
      "%context%": true,
      "%timefield%": "@timestamp",
        "body": {
          // When aggegating, do not return individual documents that match the query
          "size": 100,
          // Data aggegation...
          "aggs": {
        	// Name of the aggegation - your Vega graph will use it to parse the results
        	"hist": {
        	  "date_histogram": {
        		"field": "@timestamp",
        		// interval value will depend on the daterange picker
        		// Use an integer to set approximate bucket count
        		"interval": {"%autointerval%": true},
        		// Make sure we get an entire range, even if it has no data
        		"extended_bounds": {
        		  "min": {"%timefilter%": "min"},
        		  "max": {"%timefilter%": "max"}
        		},
        		// Use this for linear (e.g. line, area) graphs
        		// Without it, empty buckets will not show up
        		"min_doc_count": 0
        	  }
        	}
          }
        }
    },
    "format": {"property": "hits.hits"}
  }

```

* * *

and the screenshot will be empty like:

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/7/f/7f9fdddf9b40e81d3752ad9a212446a3d8846ca6.png)

* * *

I found that if I add this line :  
` **"%timefield%": "@timestamp"** `  
in my code, and the plot will be empty. When I remove this line, the plot can show.

I am not sure about something wrong on my vega code.

---

<div class="post-metadata">

**Author:** ![flash1293](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/flash1293/32/41227_2.png) [@flash1293](https://discuss.elastic.co/u/flash1293)\
**Post date:** [December 31, 2019, 9:57am UTC](https://discuss.elastic.co/t/customize-panel-time-range-not-work-with-vega-visualize-on-my-dashboard/213335/4 "2019-12-31T09:57:42Z")

</div>

Just add the `%timefield%` property, don't copy the whole example. In your case it would be

```auto
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json", 
  "data":{
    "url": {   
      "index": "test",
      "%context%": true,
      "%timefield%": "@timestamp",
        "body": {
          "size": 100,      
        }
    },
    "format": {"property": "hits.hits"}
  }
  ....

```

(exactly the same as your current spec, just adding the`%timefield%` property, so Kibana knows what filter to add for your time range).

Also make sure your `test` index actually contains data for the range you configured in the time picker and that your time field is actually called `@timestamp`.

If that doesn't work, please follow the steps in the gist I linked above and post the results here, otherwise I'm not able to help you. It makes also sense to post an example document of yours to make sure it has the shape your vega spec expects.

---

<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:** [January 28, 2020, 9:57am UTC](https://discuss.elastic.co/t/customize-panel-time-range-not-work-with-vega-visualize-on-my-dashboard/213335/5 "2020-01-28T09:57:52Z")

</div>

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