# Scatter Plot with drop down box in kibana

**URL:** https://discuss.elastic.co/t/scatter-plot-with-drop-down-box-in-kibana/191389
**Category:** Kibana
**Created:** [July 19, 2019, 12:15pm UTC](https://discuss.elastic.co/t/scatter-plot-with-drop-down-box-in-kibana/191389 "2019-07-19T12:15:27Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![Nirajan](https://avatars.discourse-cdn.com/v4/letter/n/6bbea6/32.png) [@Nirajan](https://discuss.elastic.co/u/Nirajan)
#### Post date: [July 19, 2019, 12:15pm UTC](https://discuss.elastic.co/t/scatter-plot-with-drop-down-box-in-kibana/191389/1 "2019-07-19T12:15:27Z")

</div>

Hello Everyone,

I am trying to design a scatter plot with vega. I want a drop down box to choose the values for both x-axis and y-axis, which on choosing would change the scatter plot accordingly. But i tried with the examples given in "[https://vega.github.io/vega/examples/scatter-plot-null-values/](https://vega.github.io/vega/examples/scatter-plot-null-values/)", it seems that i could only get the drop down menu with an empty plot.

Initially i was using vega-lite to display the scatter plot which was fine but after i added the code to add drop down box , the scatter plot gets removed and only the drop down box remains.

**Here is the script:**

{  
"$schema": "[https://vega.github.io/schema/vega-lite/v2.json](https://vega.github.io/schema/vega-lite/v2.json)",

"signals": [  
{ "name": "y-axis", "value": "\_source.MeanWindSpeed",  
"bind": {"input": "select", "options": ["\_source.MeanWindSpeed"]} },  
{ "name": "x-axis", "value": "\_source.Status",  
"bind": {"input": "select", "options": ["\_source.Status"]} },  
{ "name": "nullSize", "value": 8 },  
{ "name": "nullGap", "update": "nullSize + 10" }  
],

data: {  
url: {  
%context%: true  
index: s164\_dfig\_47\_040105  
body: {  
size: 10000,

```
    _source: ["Status", "MeanWindSpeed"]
  }
}
format: {property: "hits.hits" }

```

}

mark: {type: "point"},

encoding: {

```
x: {
  field: _source.Status
  type: nominal
}
y: {
  field: _source.MeanWindSpeed
  type: quantitative
},
color: {
  // Make the color of each point depend on the _source.extension field
  field: _source.Status
  // Treat different values as completely unrelated values to each other.
  // You could switch this to quantitative if you have a numeric field and
  // want to create a color scale from one color to another depending on that
  // field's value.
  type: nominal
  // Rename the legend title so it won't just state: "_source.extension"
  legend: { title: 'Load Case Result' }
}
shape: {
  // Also make the shape of each point dependent on the extension.
  field: _source.Status
  type: quantitative
}

```

}  
}

Thanks in advance..

Best Regards,  
Nirajan Shrestha

---

<div class="post-metadata">

### Author: ![bhavyarm](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/bhavyarm/32/22392_2.png) [@bhavyarm](https://discuss.elastic.co/u/bhavyarm)
#### Post date: [July 22, 2019, 2:37pm UTC](https://discuss.elastic.co/t/scatter-plot-with-drop-down-box-in-kibana/191389/2 "2019-07-22T14:37:24Z")

</div>

@nyuriks can we please get some help here?

Thanks,  
Bhavya

---

<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: [August 19, 2019, 2:44pm UTC](https://discuss.elastic.co/t/scatter-plot-with-drop-down-box-in-kibana/191389/3 "2019-08-19T14:44:44Z")

</div>

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