# Filter by time range in visual builder

**URL:** <https://discuss.elastic.co/t/filter-by-time-range-in-visual-builder/132157>\
**Category:** Kibana\
**Created:** [May 16, 2018, 2:49pm UTC](https://discuss.elastic.co/t/filter-by-time-range-in-visual-builder/132157 "2018-05-16T14:49:04Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Zareh\_Vazquez](https://avatars.discourse-cdn.com/v4/letter/z/b5e925/32.png) [@Zareh\_Vazquez](https://discuss.elastic.co/u/Zareh_Vazquez)\
**Post date:** [May 16, 2018, 2:49pm UTC](https://discuss.elastic.co/t/filter-by-time-range-in-visual-builder/132157/1 "2018-05-16T14:49:04Z")

</div>

Hi,

I am trying to create visualization in visual builder which allows me to have multiple metrics from different time frames which I can compare. I was expecting to do is by the use of filters where I can use time timestamp to filter for a specific metric. Sadly I could not find the right way to achieve this. By example my configuration for two metrics is like this:

 ![2018-05-16_9-47-37](https://us1.discourse-cdn.com/elastic/original/3X/0/0/00a9d543fd05a090c7e0ed6e56eb27fca5835ea9.png)

Will I be able to do this using the visual builder?

Thanks in advance for your help,

Zareh

---

<div class="post-metadata">

**Author:** ![spalger](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/spalger/32/14092_2.png) [@spalger](https://discuss.elastic.co/u/spalger)\
**Post date:** [May 16, 2018, 9:18pm UTC](https://discuss.elastic.co/t/filter-by-time-range-in-visual-builder/132157/2 "2018-05-16T21:18:28Z")

</div>

This should be possible, is the error displayed anywhere? Can you check the developer console in your browser for errors there? Maybe the network request that Kibana sent has an error in it?

---

<div class="post-metadata">

**Author:** ![Zareh\_Vazquez](https://avatars.discourse-cdn.com/v4/letter/z/b5e925/32.png) [@Zareh\_Vazquez](https://discuss.elastic.co/u/Zareh_Vazquez)\
**Post date:** [May 21, 2018, 2:13pm UTC](https://discuss.elastic.co/t/filter-by-time-range-in-visual-builder/132157/3 "2018-05-21T14:13:03Z")

</div>

Thanks,

Besides the message in the center "the request for this panel failed", there is nothing there.

The console did not have any error, but while looking into the network trace, there response is the following, something did not like about the dates:

```
{
	"61ca57f0-469d-11e7-af02-69e470af7417": {
		"id": "61ca57f0-469d-11e7-af02-69e470af7417",
		"error": {
			"error": {
				"root_cause": [{
					"type": "query_shard_exception",
					"reason": "Failed to parse query [realTimestamp:[04/28/2018 00:00:00 TO 04/30/2018 23:59:59]]",
					"index_uuid": "qoiDy5d9TXu_qfmNoU54jg",
					"index": "pkh_ampdata"
				}],
				"type": "search_phase_execution_exception",
				"reason": "all shards failed",
				"phase": "query",
				"grouped": true,
				"failed_shards": [{
					"shard": 0,
					"index": "pkh_ampdata",
					"node": "V9FJtrjBRAGpyZeBWYSqdA",
					"reason": {
						"type": "query_shard_exception",
						"reason": "Failed to parse query [realTimestamp:[04/28/2018 00:00:00 TO 04/30/2018 23:59:59]]",
						"index_uuid": "qoiDy5d9TXu_qfmNoU54jg",
						"index": "pkh_ampdata",
						"caused_by": {
							"type": "parse_exception",
							"reason": "Cannot parse 'realTimestamp:[04/28/2018 00:00:00 TO 04/30/2018 23:59:59]': Encountered \" <RANGE_GOOP> \"00:00:00 \"\"atline1,
							column26.\nWasexpecting: \n\"TO\" ...\n ",
							"caused_by": {
								"type": "parse_exception",
								"reason": "Encountered \" <RANGE_GOOP> \"00:00:00 \"\"atline1,
								column26.\nWasexpecting: \n\"TO\" ...\n "
							}
						}
					}
				}]
			},
			"status": 400
		},
		"series": []
	}
}

```

Here is how the requests is sent:

```
{
	"timerange": {
		"timezone": "America/Chicago",
		"min": "2018-01-01T06:00:00.000Z",
		"max": "2018-05-21T13:52:48.212Z"
	},
	"filters": [{
		"bool": {
			"must": [{
				"match_all": {
					
				}
			}],
			"must_not": []
		}
	}],
	"panels": [{
		"id": "61ca57f0-469d-11e7-af02-69e470af7417",
		"type": "timeseries",
		"series": [{
			"id": "61ca57f1-469d-11e7-af02-69e470af7417",
			"color": "#68BC00",
			"split_mode": "filter",
			"metrics": [{
				"id": "61ca57f2-469d-11e7-af02-69e470af7417",
				"type": "avg",
				"field": "tti"
			}],
			"seperate_axis": 0,
			"axis_position": "right",
			"formatter": "number",
			"chart_type": "line",
			"line_width": 1,
			"point_size": 1,
			"fill": 0.5,
			"stacked": "none",
			"label": "Metric 1",
			"filter": "realTimestamp:[04/28/2018 00:00:00 TO 04/30/2018 23:59:59]"
		}],
		"time_field": "realTimestamp",
		"index_pattern": "pkh_ampdata*",
		"interval": "auto",
		"axis_position": "left",
		"axis_formatter": "number",
		"show_legend": 1,
		"show_grid": 1,
		"background_color_rules": [{
			"id": "46dc5c70-5d00-11e8-a18c-0beb271a8add"
		}],
		"bar_color_rules": [{
			"id": "47c312f0-5d00-11e8-a18c-0beb271a8add"
		}],
		"gauge_color_rules": [{
			"id": "48ad72f0-5d00-11e8-a18c-0beb271a8add"
		}],
		"gauge_width": 10,
		"gauge_inner_width": 10,
		"gauge_style": "half"
	}],
	"state": {
		
	}
}

```

Any ideas?

Thanks again,

Zareh

---

<div class="post-metadata">

**Author:** ![spalger](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/spalger/32/14092_2.png) [@spalger](https://discuss.elastic.co/u/spalger)\
**Post date:** [May 21, 2018, 3:46pm UTC](https://discuss.elastic.co/t/filter-by-time-range-in-visual-builder/132157/4 "2018-05-21T15:46:54Z")

</div>

> [@Zareh\_Vazquez](#):
>
> 04/28/2018 00:00:00

Try formatting your dates are ISO8601, which doesn't have spaces `2018-04-28T00:00:00Z`

---

<div class="post-metadata">

**Author:** ![Zareh\_Vazquez](https://avatars.discourse-cdn.com/v4/letter/z/b5e925/32.png) [@Zareh\_Vazquez](https://discuss.elastic.co/u/Zareh_Vazquez)\
**Post date:** [May 21, 2018, 5:17pm UTC](https://discuss.elastic.co/t/filter-by-time-range-in-visual-builder/132157/5 "2018-05-21T17:17:05Z")

</div>

Thanks,

It is getting closer, now I did not get the error, but after setting the filter all the values are null, even when I have values. If I use the time range for the filter days I want to use, I get data.

By example, here is the request:

```
{
	"timerange": {
		"timezone": "America/Chicago",
		"min": "2018-01-01T06:00:00.000Z",
		"max": "2018-05-21T13:52:48.212Z"
	},
	"filters": [{
		"bool": {
			"must": [{
				"match_all": {
					
				}
			}],
			"must_not": []
		}
	}],
	"panels": [{
		"id": "61ca57f0-469d-11e7-af02-69e470af7417",
		"type": "timeseries",
		"series": [{
			"id": "be882880-5d19-11e8-a18c-0beb271a8add",
			"color": "#68BC00",
			"split_mode": "filter",
			"metrics": [{
				"id": "be882881-5d19-11e8-a18c-0beb271a8add",
				"type": "avg",
				"field": "tti"
			}],
			"seperate_axis": 0,
			"axis_position": "right",
			"formatter": "number",
			"chart_type": "line",
			"line_width": 1,
			"point_size": 1,
			"fill": 0.5,
			"stacked": "none",
			"filter": "realTimestamp:[2018-04-28T00:00:00Z TO 2018-04-30T23:59:59Z]"
		}],
		"time_field": "realTimestamp",
		"index_pattern": "pkh_ampdata*",
		"interval": "auto",
		"axis_position": "left",
		"axis_formatter": "number",
		"show_legend": 1,
		"show_grid": 1,
		"background_color_rules": [{
			"id": "46dc5c70-5d00-11e8-a18c-0beb271a8add"
		}],
		"bar_color_rules": [{
			"id": "47c312f0-5d00-11e8-a18c-0beb271a8add"
		}],
		"gauge_color_rules": [{
			"id": "48ad72f0-5d00-11e8-a18c-0beb271a8add"
		}],
		"gauge_width": 10,
		"gauge_inner_width": 10,
		"gauge_style": "half"
	}],
	"state": {
		
	}
}

```

Here is the response with all the values in null:

```
{
	"61ca57f0-469d-11e7-af02-69e470af7417": {
		"id": "61ca57f0-469d-11e7-af02-69e470af7417",
		"series": [{
			"id": "be882880-5d19-11e8-a18c-0beb271a8add",
			"label": "Average of tti",
			"color": "#68BC00",
			"data": [[1514786400000,
			null],
			[1514872800000,
			null],
			[1514959200000,
			null],
			[1515045600000,
			null],
			[1515132000000,
			null],
			[1515218400000,
			null],
			[1515304800000,
			null],
			[1515391200000,
			null],
			[1515477600000,
			null],
			[1515564000000,
			null],
			[1515650400000,
			null],
			[1515736800000,
			null],
			[1515823200000,
			null],
			[1515909600000,
			null],
			[1515996000000,
			null],

```

If I remove the filter, then I get values for the entire "timerange", by example the requests:

```
{
	"timerange": {
		"timezone": "America/Chicago",
		"min": "2018-01-01T06:00:00.000Z",
		"max": "2018-05-21T13:52:48.212Z"
	},
	"filters": [{
		"bool": {
			"must": [{
				"match_all": {
					
				}
			}],
			"must_not": []
		}
	}],
	"panels": [{
		"id": "61ca57f0-469d-11e7-af02-69e470af7417",
		"type": "timeseries",
		"series": [{
			"id": "be882880-5d19-11e8-a18c-0beb271a8add",
			"color": "#68BC00",
			"split_mode": "filter",
			"metrics": [{
				"id": "be882881-5d19-11e8-a18c-0beb271a8add",
				"type": "avg",
				"field": "tti"
			}],
			"seperate_axis": 0,
			"axis_position": "right",
			"formatter": "number",
			"chart_type": "line",
			"line_width": 1,
			"point_size": 1,
			"fill": 0.5,
			"stacked": "none",
			"filter": ""
		}],
		"time_field": "realTimestamp",
		"index_pattern": "pkh_ampdata*",
		"interval": "auto",
		"axis_position": "left",
		"axis_formatter": "number",
		"show_legend": 1,
		"show_grid": 1,
		"background_color_rules": [{
			"id": "46dc5c70-5d00-11e8-a18c-0beb271a8add"
		}],
		"bar_color_rules": [{
			"id": "47c312f0-5d00-11e8-a18c-0beb271a8add"
		}],
		"gauge_color_rules": [{
			"id": "48ad72f0-5d00-11e8-a18c-0beb271a8add"
		}],
		"gauge_width": 10,
		"gauge_inner_width": 10,
		"gauge_style": "half"
	}],
	"state": {
		
	}
}

```

The response

```
    {
    	"61ca57f0-469d-11e7-af02-69e470af7417": {
    		"id": "61ca57f0-469d-11e7-af02-69e470af7417",
    		"series": [{
    			"id": "be882880-5d19-11e8-a18c-0beb271a8add",
    			"label": "Average of tti",
    			"color": "#68BC00",
    			"data": [[1514786400000,
    			1.3842592592592593],
    			[1514872800000,
    			1.6571879936808847],
    			[1514959200000,
    			2.1179048414023374],
    			[1515045600000,
    			1.6928525434642627],
    			[1515132000000,
    			1.6211301645759006],
    			[1515218400000,
    			1.5224223840551936],
    			[1515304800000,
    			1.4774883099532399],
    			[1515391200000,
    			1.7007271815446339],
    			[1515477600000,
    			1.5827852120662282],
    			[1515564000000,
    			1.6726449590806198],
    			[1515650400000,
    			1.5666724769043054],
    			[1515736800000,
    			1.517156862745098],
    			[1515823200000,
    			1.4471749226006192],
    			[1515909600000,
```

---

<div class="post-metadata">

**Author:** ![alexf](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/alexf/32/43211_2.png) [@alexf](https://discuss.elastic.co/u/alexf)\
**Post date:** [May 23, 2018, 8:56pm UTC](https://discuss.elastic.co/t/filter-by-time-range-in-visual-builder/132157/6 "2018-05-23T20:56:34Z")

</div>

Hi Zareh,

Do the timeranges need to be absolute? Or can they be relative?

Even with the filters working, I believe it will make it difficult to compare as the data points will still be plotted in their original time ranges.

Could you utilizes the offset functionality the visual builder offers? This would allow you to compare say the current month to the previous month.

 ![screencapture-localhost-5610-app-kibana-2018-05-23-21_50_16](https://us1.discourse-cdn.com/elastic/original/3X/f/7/f7580092672711270d01b8c349574c804d7f545c.png)

If this fits your use case, it's probably the easiest way to compare two or multiple timeframes.

@simianhacker do you have any other ideas?

Alex

---

<div class="post-metadata">

**Author:** ![Zareh\_Vazquez](https://avatars.discourse-cdn.com/v4/letter/z/b5e925/32.png) [@Zareh\_Vazquez](https://discuss.elastic.co/u/Zareh_Vazquez)\
**Post date:** [June 4, 2018, 7:15pm UTC](https://discuss.elastic.co/t/filter-by-time-range-in-visual-builder/132157/7 "2018-06-04T19:15:41Z")

</div>

Hi Alex,

Thank you for the suggestion, the times has to be absolute, but my intend was not to use a line chart, but rather by a metric, trying to compare by example the average of a number from two different time frames from within the same visualization.

 ![2018-06-04_14-24-14](https://us1.discourse-cdn.com/elastic/original/3X/8/2/821a68c69f78da0e7f4cf871bfdd50483ad223c5.png)

My work around now is by creating two visualizations and put them side to side in a dashboard, but the problem with this approach is that I need to maintain more visualization, and this multiply by different type of groupings it adds up.

Is there any other way that I can achieve this?

Zareh

---

<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 2, 2018, 7:15pm UTC](https://discuss.elastic.co/t/filter-by-time-range-in-visual-builder/132157/8 "2018-07-02T19:15:50Z")

</div>

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