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

[steven.l]

My dashboard screenshot is the following:

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:

---

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

---

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.

[flash1293 (Joe Reuter)]

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

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

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

[steven.l]

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:

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:

---

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.

[flash1293 (Joe Reuter)]

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

  "$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.