# Vega: Condition based on drop down value
**URL:** https://discuss.elastic.co/t/vega-condition-based-on-drop-down-value/261513
**Category:** Kibana
**Created:** [January 19, 2021, 8:38am UTC](https://discuss.elastic.co/t/vega-condition-based-on-drop-down-value/261513 "2021-01-19T08:38:55Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@sama.sowjanya](https://discuss.elastic.co/u/sama.sowjanya)
#### Post date: [January 19, 2021, 8:38am UTC](https://discuss.elastic.co/t/vega-condition-based-on-drop-down-value/261513/1 "2021-01-19T08:38:55Z")
Hello everyone
The graph both x-axis and y-axis value must **change automatically** when a value is selected from dropdown.
I have a grouped bar chart displaying count of incidents logged on x-axis grouped by year, month on y-axis. There is a "priority" drop down. When priority is selected, the graph must display the values accordingly.
Ex: when I select priority "p1", the graph must display the count of **p1 incidents logged grouped by year and month**.
Below is the code I am trying in vega online editor.
```auto
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 400,
"height": 200,
"padding": 5,
"title": "count of incidents grouped by year & month",
"data": [
{
"name": "table",
"values": [
{
"year": "1885",
"month": "jan",
"ticket": 10,
"priority": "p1",
"inc": "INC001"
},
{
"year": "1885",
"month": "jan",
"ticket": 10,
"priority": "p1",
"inc": "INC001"
},
{
"year": "1885",
"month": "feb",
"ticket": 17,
"priority": "p3",
"inc": "INC002"
},
{
"year": "1885",
"month": "march",
"ticket": 20,
"priority": "p3",
"inc": "INC003"
},
{
"year": "1885",
"month": "april",
"ticket": 15,
"priority": "p4",
"inc": "INC004"
},
{
"year": "1990",
"month": "jan",
"ticket": 27,
"priority": "p2",
"inc": "INC005"
},
{
"year": "1990",
"month": "feb",
"ticket": 32,
"priority": "p3",
"inc": "INC006"
},
{
"year": "1990",
"month": "march",
"ticket": 11,
"priority": "p4",
"inc": "INC007"
},
{
"year": "1990",
"month": "april",
"ticket": 28,
"priority": "p4",
"inc": "INC008"
},
{
"year": "2000",
"month": "jan",
"ticket": 16,
"priority": "p2",
"inc": "INC009"
},
{
"year": "2000",
"month": "feb",
"ticket": 19,
"priority": "p2",
"inc": "INC010"
},
{
"year": "2000",
"month": "march",
"ticket": 29,
"priority": "p1",
"inc": "INC011"
},
{
"year": "2000",
"month": "april",
"ticket": 18,
"priority": "p3",
"inc": "INC012"
},
{
"year": "2000",
"month": "april",
"ticket": 18,
"priority": "p3",
"inc": "INC013"
}
],
"transform": [
{
"type": "aggregate",
"ops": ["count"],
"fields": ["inc"],
"as": ["c_inc"],
"groupby": ["year", "month"]
}
]
}
],
"signals": [
{
"name": "priority",
"value": "p1",
"bind": {"input": "select", "options": ["p1", "p2", "p3", "p4"]}
}
],
"scales": [
{
"name": "xscale",
"type": "band",
"domain": {"data": "table", "field": "year"},
"range": "width",
"padding": 0.2
},
{
"name": "yscale",
"type": "linear",
"domain": {"data": "table", "field": "c_inc"},
"range": "height",
"round": true,
"zero": true,
"nice": true
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "table", "field": "month"},
"range": {"scheme": "category20"}
}
],
"axes": [
{
"orient": "left",
"scale": "yscale",
"tickSize": 0,
"labelPadding": 4,
"zindex": 1,
"title": ["num of inc"]
},
{"orient": "bottom", "scale": "xscale", "title": ["year grouped by month"]}
],
"marks": [
{
"type": "group",
"from": {"facet": {"data": "table", "name": "facet", "groupby": "year"}},
"encode": {"enter": {"x": {"scale": "xscale", "field": "year"}}},
"signals": [{"name": "width", "update": "bandwidth('xscale')"}],
"scales": [
{
"name": "pos",
"type": "band",
"range": "width",
"domain": {"data": "facet", "field": "month"}
}
],
"marks": [
{
"name": "bars",
"from": {"data": "facet"},
"type": "rect",
"encode": {
"enter": {
"x": {"scale": "pos", "field": "month"},
"width": {"scale": "pos", "band": 1},
"y": {"scale": "yscale", "field": "c_inc"},
"y2": {"scale": "yscale", "value": 0},
"fill": {"scale": "color", "field": "month"}
}
}
},
{
"type": "text",
"from": {"data": "bars"},
"encode": {
"enter": {
"y": {"field": "y2", "offset": -5},
"x": {"field": "x", "offset": {"field": "width", "mult": 0.5}},
"fill": [
{
"test": "contrast('white', datum.fill) > contrast('black', datum.fill)",
"value": "white"
},
{"value": "black"}
],
"align": {"value": "right"},
"baseline": {"value": "middle"},
"text": {"field": "datum.value"}
}
}
}
]
}
]
}
```
Thank you
---
### Author:  [@aaron-nimocks](https://discuss.elastic.co/u/aaron-nimocks)
#### Post date: [January 19, 2021, 3:22pm UTC](https://discuss.elastic.co/t/vega-condition-based-on-drop-down-value/261513/2 "2021-01-19T15:22:40Z")
You can filter your data by adding another transformation. The result will just be to show the data that is selected in the dropdown. If you need to show all data then will need to adjust that expression.
```auto
"transform": [
{"type": "filter", "expr": "priority == datum.priority"},
{
"type": "aggregate",
"ops": ["count"],
"fields": ["inc"],
"as": ["c_inc"],
"groupby": ["year", "month"]
}
]
```
---
### Author:  [@sama.sowjanya](https://discuss.elastic.co/u/sama.sowjanya)
#### Post date: [January 20, 2021, 5:40am UTC](https://discuss.elastic.co/t/vega-condition-based-on-drop-down-value/261513/3 "2021-01-20T05:40:44Z")
Thank you @aaron-nimocks
One of the drop down value must be All, to display all the data. And also I am not able to add the legend, legend must be month so that we can easily understand, in which month that incident has been logged. If not legend, we must be able to plot that month name along with year on X-axis.
Can you please help me with the above requirement.
---
### Author:  [@aaron-nimocks](https://discuss.elastic.co/u/aaron-nimocks)
#### Post date: [January 21, 2021, 3:51pm UTC](https://discuss.elastic.co/t/vega-condition-based-on-drop-down-value/261513/4 "2021-01-21T15:51:05Z")
For the dropdown issue you can add the below for the filter.
```auto
{"type": "filter", "expr": "( priority == 'All' ) ? priority != datum.priority : priority == datum.priority"}
```
and then change your signal to add the `All` item.
```auto
{
"name": "priority",
"value": "All",
"bind": {"input": "select", "options": ["All", "p1", "p2", "p3", "p4"]}
}
```
---
### Author:  [@sama.sowjanya](https://discuss.elastic.co/u/sama.sowjanya)
#### Post date: [January 22, 2021, 6:35am UTC](https://discuss.elastic.co/t/vega-condition-based-on-drop-down-value/261513/5 "2021-01-22T06:35:01Z")
Thank you @aaron-nimocks
It works.
---
### Author:  [@system](https://discuss.elastic.co/u/system)
#### Post date: [February 19, 2021, 6:35am UTC](https://discuss.elastic.co/t/vega-condition-based-on-drop-down-value/261513/6 "2021-02-19T06:35:02Z")
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.