# Vega select box aggregations

**URL:** <https://discuss.elastic.co/t/vega-select-box-aggregations/299028>\
**Category:** Kibana\
**Tags:** vega\
**Created:** [March 8, 2022, 2:07am UTC](https://discuss.elastic.co/t/vega-select-box-aggregations/299028 "2022-03-08T02:07:11Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Gustavo\_Llermaly](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/gustavo_llermaly/32/92019_2.png) [@Gustavo\_Llermaly](https://discuss.elastic.co/u/Gustavo_Llermaly)\
**Post date:** [March 8, 2022, 2:07am UTC](https://discuss.elastic.co/t/vega-select-box-aggregations/299028/1 "2022-03-08T02:07:11Z")

</div>

Hello,

I need to create a chart where Y axis can be changed based on a select box. I saw this example in Vega, but not sure how to replicate in Elasticsearch.

Link to visualization:

[Vega Editor](https://vega.github.io/editor/#/url/vega-lite/N4IgJAzgxgFgpgWwIYgFwhgF0wBwqgegIDc4BzJAOjIEtMYBXAI0poHsDp5kTykBaADZ04JACyUAVhDYA7EABoQAdxoATemgBsABh1L4NMljQBmPUpxI1amrLJoArEqQNMbCDQBecNKEwAnji+6ABmdIogAE5wnj5omFEMcEpQcphIdhBoIFY2dg4AvkpqSBl+IMRIgsnZqADaoGkMsokBOQCiZEGYkQBKZQVoAJxKGQDWcLIA+nI5AEw68wCM-Dpaa8MABMs6qHqojgDskWrE0xAMUaTt6ADiU3BR1VsAgjg4wlCDclsAGsEojQplA4FsAMpXG6nOBWKKYBBTTDTWwQT5IAJVGohEAAYTYoVCcF8xSabBabRyACkkFZ5EoBpghqgABxjJCTGZzdCLFZrDY6ba7fZ7Y6nc6Xa5wW4gB6yJ4vd6fGjfJm-AFPYGyUEQqHSmFwhFIlE0NGCDFY5I5AAiRjo1RApJAzVaURldxicFB-UG9jQYnZnNm8h5S1W602Oz2BzFJQleplACEGJ55RAIG8Pl8frJ-oCtTrIVL2iVYUh4YjWiazRbqlb0ABZOC2KB2EkKMkUt05ABiz21vgZvocrMDU2DCzD-MjwpjJzjFwTOWTqdiGaV2bVuY1QJBYKL0NLhsryNR6MxdZxuIYeEdHed5NdMppdJ9TL9qCOY65IZAvPDApCtGorziAZyLsWy4pm26aZsqqrsNu+Z7rqkFHuWRpVme5oXti1KvAACq8AByd6dk+1K0kg9IgIyzK7N+E6hnyEaClGIqHKB4GStC6ArjB65ZiqOZ5pqKEHvq6EVsa2G1nh6AEVAZEPl2z5UTRdEfmyIATOO3J-lOrFARxsZgfGkF8dBaaCfBIk7gW+5LlJmGnqa56WjiiZsGw4zZE6LqUug1pTMgUTjG+zKmIx+n-tObGziB4oQbxID8dZcGbohom7gOqGHmBZbSVhbk4R5OQANLVIgykBd26DEXA9BPOashqNkQ7viOWjRb+sVGexc5JTx+r3I8zyCBlwlbtlDl5ZJBXHjJJVyfWIAABJ9DVj6BSAAAqVzjDQASDrRw5OD1k4sYBA2JQuw1JlZa6TQh6rIblEklgtGEntW7mXjku0AKp9OVHQAJqOgAusUOn9hAoRsFECBoI0IDhIImBPBU4RwIIag5NxTkgHAACODAOpZq6wRuU1ZfZ4lLoU-nVFADDmpjBNlAwCCUGohUub9pX-S4dRfUVvROgjeMo2LLmRLV7SQyLMu4jAbAqidWIgND97o5jUQVBAuNeluOTjDgNCOoUSvE9qbC2B+oAAB7Y8C0voJpDhjEEOJk9RTIZEypCREgZBkDEFAc+gSCkM8ZAnUgTummgshs4IMO3KAOPu5UDre8EOSyGwCB2HnICJ8nqCgOaTC4+ChU5mgyxKDXuMEdYDsjgGOl0IIISp4I6dMy3GJYw0oBG33UCm1XIDm5bs+BAX6CpmQfeRHYESz6r6veugCt3iATB2Pj29qxrFSyEgiI5J7GYEVjSh2Dgbg5JPJuRGwOBbnU9Syye8ttrdmhkzGGoVwqLx9jkJg5ZIg4HVq0BISQUgPkEIjHIABiHsPZcTDDEB0SIhhjC9FQMsRwMMQT22ZP4byGMaA4FdrjU+p1OohzDhHMoOIY4KnjpEJevtyatHtEHE6Ad14ezOkoBGSMyg5EoMsUIVsnTgIqPwnImMna9BcMIMgv4+6hC0UfJAk82w5BLjYdeFC7ad1UXATRjCc6ezYeHPgUdy6x1DidaRyASEgHkYo-OAj-bCJoMHGG7g2B0IYbPbOzCnEuHYa4rhHjeGBJyH7IRgdQmiN7jieJaNEY+LkQopR0MgA)

thanks

---

<div class="post-metadata">

**Author:** ![drewdaemon](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/drewdaemon/32/97779_2.png) [@drewdaemon](https://discuss.elastic.co/u/drewdaemon)\
**Post date:** [March 14, 2022, 7:33pm UTC](https://discuss.elastic.co/t/vega-select-box-aggregations/299028/2 "2022-03-14T19:33:10Z")

</div>

Hi Gustavo,

I was able to copy the configuration you linked to into Kibana's custom visualization editor without any hitches.

 ![Screen Shot 2022-03-14 at 2.13.14 PM](https://us1.discourse-cdn.com/elastic/original/3X/8/f/8fcf8ceb5f41b39fa99488395c5359637d90a380.png)

In case it's helpful, you can get to this editor from the dashboard you want to add the visualization to:

 ![Screen Shot 2022-03-14 at 2.26.07 PM](https://us1.discourse-cdn.com/elastic/original/3X/4/f/4fb6185bdee2e210c531883d3189809072963559.png)

To get your visualization hooked up to your Elasticsearch data you can use an Elasticsearch query as the Vega datasource. Kibana extends Vega so that if you set "data.url" to an object instead of a string, it is interpreted as an Elasticsearch DSL query. See [this doc](https://www.elastic.co/guide/en/kibana/current/vega.html#vega-queries) for more details and for a comprehensive tutorial on building a custom visualization in Kibana.

After hooking up an Elasticsearch query, most of the work to build your custom visualization is using the [Vega-Lite (or plain Vega) grammar](https://vega.github.io/vega-lite/) (nothing Elastic-specific). However, it's worth noting that our custom visualization editor makes things a little more convenient by supporting [Hjson](https://hjson.github.io/) in addition to JSON syntax.

If you're new to Vega-Lite, here is a [good tutorial](https://vega.github.io/vega-lite/tutorials/getting_started.html) to get you started.

Let me know if this helps.

---

<div class="post-metadata">

**Author:** ![Gustavo\_Llermaly](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/gustavo_llermaly/32/92019_2.png) [@Gustavo\_Llermaly](https://discuss.elastic.co/u/Gustavo_Llermaly)\
**Post date:** [March 15, 2022, 11:09pm UTC](https://discuss.elastic.co/t/vega-select-box-aggregations/299028/3 "2022-03-15T23:09:02Z")

</div>

Thanks @drewdaemon , precisely I need help with that data transformation but I will mark your answer as solution anyways because is fair enough to go and read a bit more.

---

<div class="post-metadata">

**Author:** ![drewdaemon](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/drewdaemon/32/97779_2.png) [@drewdaemon](https://discuss.elastic.co/u/drewdaemon)\
**Post date:** [March 16, 2022, 2:43pm UTC](https://discuss.elastic.co/t/vega-select-box-aggregations/299028/4 "2022-03-16T14:43:07Z")

</div>

Sounds good, @Gustavo_Llermaly .

> I need help with that data transformation

Does this mean you're looking for guidance on how to get Vega to use the response from your Elasticsearch query? If so, feel free to post it and I can take a look!

---

<div class="post-metadata">

**Author:** ![Gustavo\_Llermaly](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/gustavo_llermaly/32/92019_2.png) [@Gustavo\_Llermaly](https://discuss.elastic.co/u/Gustavo_Llermaly)\
**Post date:** [March 16, 2022, 3:08pm UTC](https://discuss.elastic.co/t/vega-select-box-aggregations/299028/5 "2022-03-16T15:08:10Z")

</div>

That would be awesome. I'm trying to reproduce it using the kibana ecommerce example data but I read you can not run a new query for each select change so you have to load everything in one query and then hide/show things. There is where I get lost. @Andrew_Tate

---

<div class="post-metadata">

**Author:** ![drewdaemon](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/drewdaemon/32/97779_2.png) [@drewdaemon](https://discuss.elastic.co/u/drewdaemon)\
**Post date:** [March 16, 2022, 8:06pm UTC](https://discuss.elastic.co/t/vega-select-box-aggregations/299028/6 "2022-03-16T20:06:56Z")

</div>

@Gustavo_Llermaly I see. Yes, I think you're right—we only support one initial request.

Go ahead and post

- your specific query/queries (query DSL in a code block)
- a description of what options you want to have appear in the select element
- how exactly you want the graph to change when the selected value is updated.

I can't promise an outcome, but if you send me that info I can add the sample data to a cluster and see what I can do on my end. 👍

---

<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 13, 2022, 8:07pm UTC](https://discuss.elastic.co/t/vega-select-box-aggregations/299028/7 "2022-04-13T20:07:03Z")

</div>

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