# Configuring the control panel with vega visualization

**URL:** <https://discuss.elastic.co/t/configuring-the-control-panel-with-vega-visualization/156348>\
**Category:** Kibana\
**Created:** [November 12, 2018, 9:16pm UTC](https://discuss.elastic.co/t/configuring-the-control-panel-with-vega-visualization/156348 "2018-11-12T21:16:36Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![nyssa](https://avatars.discourse-cdn.com/v4/letter/n/90ced4/32.png) [@nyssa](https://discuss.elastic.co/u/nyssa)\
**Post date:** [November 12, 2018, 9:16pm UTC](https://discuss.elastic.co/t/configuring-the-control-panel-with-vega-visualization/156348/1 "2018-11-12T21:16:36Z")

</div>

Hello!

I am currently working on a dashboard that contains kibana visualizations AND vega visualizations.

I would like to configure this dashboard to use the "controls" panel feature [https://www.elastic.co/guide/en/kibana/master/add-input-controls.html](https://www.elastic.co/guide/en/kibana/master/add-input-controls.html).

However, these input controls don't seem to work with vega visualizations, is there an alternative work around to this?

Any help/thoughts would be appreciated!

---

<div class="post-metadata">

**Author:** ![rashmi](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/rashmi/32/16391_2.png) [@rashmi](https://discuss.elastic.co/u/rashmi)\
**Post date:** [November 12, 2018, 10:13pm UTC](https://discuss.elastic.co/t/configuring-the-control-panel-with-vega-visualization/156348/2 "2018-11-12T22:13:37Z")

</div>

can u plz help @nyuriks

Thanks  
Rashmi

---

<div class="post-metadata">

**Author:** ![nyuriks](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nyuriks/32/26171_2.png) [@nyuriks](https://discuss.elastic.co/u/nyuriks)\
**Post date:** [November 12, 2018, 10:39pm UTC](https://discuss.elastic.co/t/configuring-the-control-panel-with-vega-visualization/156348/3 "2018-11-12T22:39:56Z")

</div>

@nyssa Vega has its [own controls](https://vega.github.io/vega/docs/signals/#input-element-binding), plus you can [customize their positions](https://www.elastic.co/guide/en/kibana/current/vega-useful-links.html#vega-additional-configuration-options) in Kibana.

That said, you might be able to use the built-in Kibana controls that you mentioned using [Vega stream](https://vega.github.io/vega/docs/event-streams/#object). Try to use them via a CSS class or an ID (I haven't tried that, but might be an interesting project). If there is no way to do that, this would be a good feature to add (please create a ticket in the Kibana github repo). Thx!

---

<div class="post-metadata">

**Author:** ![nyssa](https://avatars.discourse-cdn.com/v4/letter/n/90ced4/32.png) [@nyssa](https://discuss.elastic.co/u/nyssa)\
**Post date:** [November 12, 2018, 10:45pm UTC](https://discuss.elastic.co/t/configuring-the-control-panel-with-vega-visualization/156348/4 "2018-11-12T22:45:16Z")

</div>

@nyuriks thanks for getting back to me and for all the info.

Are there any example of the vega stream controls?  
If vega controls are implemented, is that specific to only one vega graph? Or can that control panel be applied to the whole dashboard? In other words, is vega stream the only way to have one control panel for the entire dashboard?

I'll be sure to read into these more, thank you

---

<div class="post-metadata">

**Author:** ![nyuriks](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nyuriks/32/26171_2.png) [@nyuriks](https://discuss.elastic.co/u/nyuriks)\
**Post date:** [November 13, 2018, 12:13am UTC](https://discuss.elastic.co/t/configuring-the-control-panel-with-vega-visualization/156348/5 "2018-11-13T00:13:05Z")

</div>

@nyssa Vega signals are per graph, not per dashboard. In theory, it might be possible to link to them using stream events, but in that case you might as well use the proper Kibana controls instead of the less polished Vega ones.

One of the relatively simple example of event processing is [this demo](https://vega.github.io/vega/examples/budget-forecasts/)

---

<div class="post-metadata">

**Author:** ![nyssa](https://avatars.discourse-cdn.com/v4/letter/n/90ced4/32.png) [@nyssa](https://discuss.elastic.co/u/nyssa)\
**Post date:** [November 13, 2018, 9:53pm UTC](https://discuss.elastic.co/t/configuring-the-control-panel-with-vega-visualization/156348/6 "2018-11-13T21:53:18Z")

</div>

@nyuriks Thanks again for all your insight, I really appreciate it!

I guess to be more detailed about my issue, here are two of the visualizations on my dashboard and I am trying to use the "filter" portion of the controls panel. So when I select a filter on the controls panel (filter by region), it only filters data on the kibana viz not the vega one. A stream can't help with that problem, can it?

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/b/5/b5c73723ee18dd0da004f966f249716f5e299614.png)

---

<div class="post-metadata">

**Author:** ![nyuriks](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nyuriks/32/26171_2.png) [@nyuriks](https://discuss.elastic.co/u/nyuriks)\
**Post date:** [November 13, 2018, 10:26pm UTC](https://discuss.elastic.co/t/configuring-the-control-panel-with-vega-visualization/156348/7 "2018-11-13T22:26:44Z")

</div>

I'm not exactly sure what you mean by filter here. When you select a filter, do you get a new filter in the `filter bar` at the top? If so, your ES query inside Vega can use it (`"%context%": true` parameter) - and re-query ES for the new, filtered data. If you only want to do "local filtering" - in other words you get all the data to the browser, and want the browser to filter things without re-requesting data from the server, than Vega could in theory try to connect to an HTML control on the page (if available), and react to that.

---

<div class="post-metadata">

**Author:** ![nyssa](https://avatars.discourse-cdn.com/v4/letter/n/90ced4/32.png) [@nyssa](https://discuss.elastic.co/u/nyssa)\
**Post date:** [November 13, 2018, 10:47pm UTC](https://discuss.elastic.co/t/configuring-the-control-panel-with-vega-visualization/156348/8 "2018-11-13T22:47:34Z")

</div>

@nyuriks sorry about the confusion.

By filter i mean the new "controls" panel feature on Kibana. [https://www.elastic.co/guide/en/kibana/current/add-input-controls.html](https://www.elastic.co/guide/en/kibana/current/add-input-controls.html)

and this is what my control panel filter looks like right now, its a dropdown menu with a region list.

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/3/6/3605255d8abf42d94f581dbe509111a6337bad9d.png)

When a user clicks on a "c" / "w" / "s" on my dashboard it only filters the kibana viz (left viz of my pic attached in my last reply) not the vega visualization (right viz)

Will context true enable that filtering?

---

<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:** [December 11, 2018, 10:47pm UTC](https://discuss.elastic.co/t/configuring-the-control-panel-with-vega-visualization/156348/9 "2018-12-11T22:47:35Z")

</div>

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