# Conditional setting of values in VEGA (for gantt chart)

**URL:** <https://discuss.elastic.co/t/conditional-setting-of-values-in-vega-for-gantt-chart/266580>\
**Category:** Kibana\
**Tags:** vega\
**Created:** [March 8, 2021, 3:34pm UTC](https://discuss.elastic.co/t/conditional-setting-of-values-in-vega-for-gantt-chart/266580 "2021-03-08T15:34:21Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Nicole\_Hirshler](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nicole_hirshler/32/77268_2.png) [@Nicole\_Hirshler](https://discuss.elastic.co/u/Nicole_Hirshler)\
**Post date:** [March 8, 2021, 3:34pm UTC](https://discuss.elastic.co/t/conditional-setting-of-values-in-vega-for-gantt-chart/266580/1 "2021-03-08T15:34:21Z")

</div>

I want to create gantt chat display where "end" bar is dependent on the application status.  
If "status" is "Running" - I want to set endTime to "now()"  
If "status" is "not Running" - I want to use endTime field from the index.  
I created a simple example below and it is not working (the code is commented).  
Is there a way to implement something like that?  
{  
"$schema": "[https://vega.github.io/schema/vega-lite/v2.json](https://vega.github.io/schema/vega-lite/v2.json)",  
"title": "Survey progress",  
"data": {  
"values": [  
{"survey": "test1@host1",  
"endTime": "2021-02-18T17:01:52.886696Z",  
"startTime": "2021-02-18T17:01:52.886696Z",  
"appDisplayName": "app1",  
"status": "Running"},  
{"survey": "test2@host2",  
"endTime": "2021-02-25T13:15:05.501355Z",  
"startTime": "2021-01-22T13:10:08.921617Z",  
"appDisplayName": "app2",  
"status" : "Successful"}  
]  
},  
"transform": [  
{"calculate": "now()","as": "end"}  
],  
"mark": "bar",  
"encoding": {  
"y": {"field": "survey","type": "ordinal"},  
"x": {"field": "startTime","type": "temporal", axis:{title:"time"}},  
"x2": {"field": "endTime"},  
//"x2": {"condition": {  
//"test": {  
// "field" : "status",  
//"equal" : "Running",  
//"field" : "end"  
//},  
//"field":"endTime" }  
//},  
"color": {field:"appDisplayName", type:"nominal"}  
}  
}

---

<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:** [March 8, 2021, 3:54pm UTC](https://discuss.elastic.co/t/conditional-setting-of-values-in-vega-for-gantt-chart/266580/2 "2021-03-08T15:54:36Z")

</div>

You can do conditional logic in Vega expressions: [Expressions | Vega](https://vega.github.io/vega/docs/expressions/#if)

So maybe something like this: `{ calculate: "datum.status == 'Running' ? now() : toDate(datum.endtime)", as: "end" }`

I think this matches your explanation of what you wanted, but you may need to tweak it

---

<div class="post-metadata">

**Author:** ![Nicole\_Hirshler](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nicole_hirshler/32/77268_2.png) [@Nicole\_Hirshler](https://discuss.elastic.co/u/Nicole_Hirshler)\
**Post date:** [March 11, 2021, 8:14am UTC](https://discuss.elastic.co/t/conditional-setting-of-values-in-vega-for-gantt-chart/266580/3 "2021-03-11T08:14:06Z")

</div>

Thanks for your suggestion. With some additional tweaking it worked.  
I had to add additional transform to the endTime.

"transform": [  
{"calculate": "toDate(datum.endTime)", "as": "qq"},  
{"calculate": "datum.status == 'Running' ? now() : datum.qq", "as": "end" }  
],

Another question I have is why startTime and endTime are displayed differently while they are defined exactly in the same format. See the attached image.

 ![vega1](https://us1.discourse-cdn.com/elastic/original/3X/4/e/4e55d0a43d758ca8133358391da4cb4c5d363566.png)

---

<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:** [March 11, 2021, 2:58pm UTC](https://discuss.elastic.co/t/conditional-setting-of-values-in-vega-for-gantt-chart/266580/4 "2021-03-11T14:58:21Z")

</div>

Vega-Lite does an automatic rewriting of `temporal` scale data, like your X axis, to be time format. You have two options:

1. Provide the `qq` field as your x axis field instead, to avoid the rewriting
2. Apply a date format to your tooltip

---

<div class="post-metadata">

**Author:** ![Nicole\_Hirshler](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nicole_hirshler/32/77268_2.png) [@Nicole\_Hirshler](https://discuss.elastic.co/u/Nicole_Hirshler)\
**Post date:** [March 14, 2021, 8:16am UTC](https://discuss.elastic.co/t/conditional-setting-of-values-in-vega-for-gantt-chart/266580/5 "2021-03-14T08:16:36Z")

</div>

Adding formatting to the tooltip as you suggested works great.

"tooltip": [  
{"field": "survey", "type": "ordinal", "title": "Seismic Survey"},  
{"field": "startTime", "timeUnit" : "yearmonthdatehoursminutes", "title": "Start Time"},  
{"field": "end", "timeUnit" : "yearmonthdatehoursminutes", "title": "End Time"}  
]

---

<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:** [April 11, 2021, 8:17am UTC](https://discuss.elastic.co/t/conditional-setting-of-values-in-vega-for-gantt-chart/266580/6 "2021-04-11T08:17:18Z")

</div>

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