# Vega visualisation

**URL:** <https://discuss.elastic.co/t/vega-visualisation/309217>\
**Category:** Kibana\
**Tags:** vega\
**Created:** [July 8, 2022, 3:55pm UTC](https://discuss.elastic.co/t/vega-visualisation/309217 "2022-07-08T15:55:18Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![meyer1](https://avatars.discourse-cdn.com/v4/letter/m/b487fb/32.png) [@meyer1](https://discuss.elastic.co/u/meyer1)\
**Post date:** [July 8, 2022, 3:55pm UTC](https://discuss.elastic.co/t/vega-visualisation/309217/1 "2022-07-08T15:55:18Z")

</div>

Hello everyone,

I would like to make an online visualization using some fields of my document which looks like this:

```auto
"otherFieldA" : "...",
"otherFieldB" : "...",
"otherFieldC" : "...",
"mainField" : [
            {
              "_id" : ".....",
              "fieldA" : "....",
              "fieldB" : "....",
              "fieldC" : "date",
              "fieldD" : ...,
              "fieldE" : ...
            },
           {
              "_id" : ".....",
              "fieldA" : "....",
              "fieldB" : "....",
              "fieldC" : "date",
              "fieldD" : ...,
              "fieldE" : ...
            },
            {
              "_id" : ".....",
              "fieldA" : "....",
              "fieldB" : "....",
              "fieldC" : "date",
              "fieldD" : ...,
              "fieldE" : ...
            }
]

```

I would like to access the fields in mainField when I do a Vega visualization.

Thanks in advance for your help and feedback.

---

<div class="post-metadata">

**Author:** ![aaron-nimocks](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/aaron-nimocks/32/73965_2.png) [@aaron-nimocks](https://discuss.elastic.co/u/aaron-nimocks)\
**Post date:** [July 12, 2022, 5:56pm UTC](https://discuss.elastic.co/t/vega-visualisation/309217/2 "2022-07-12T17:56:49Z")

</div>

Typically you will need to [flatten](https://vega.github.io/vega/docs/transforms/flatten/) an array using a transformation to access data within.

---

<div class="post-metadata">

**Author:** ![meyer1](https://avatars.discourse-cdn.com/v4/letter/m/b487fb/32.png) [@meyer1](https://discuss.elastic.co/u/meyer1)\
**Post date:** [July 13, 2022, 9:40am UTC](https://discuss.elastic.co/t/vega-visualisation/309217/3 "2022-07-13T09:40:46Z")

</div>

Is the transformation done when I write the code for the vega visualization or upstream?

And what kind of transformation do I have to do to keep everything consistent?

for example, that the field C "date" of the first object corresponds to the field A of the first object ?

Thank you in advance for your answer!

---

<div class="post-metadata">

**Author:** ![aaron-nimocks](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/aaron-nimocks/32/73965_2.png) [@aaron-nimocks](https://discuss.elastic.co/u/aaron-nimocks)\
**Post date:** [July 13, 2022, 3:42pm UTC](https://discuss.elastic.co/t/vega-visualisation/309217/4 "2022-07-13T15:42:05Z")

</div>

It's in the Vega code. You can load the data into Vega and then transform. See [this](https://vega.github.io/editor/#/examples/vega/stacked-bar-chart) example to get an idea. Open up the data viewer and you see the data and the transformation.

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

---

<div class="post-metadata">

**Author:** ![meyer1](https://avatars.discourse-cdn.com/v4/letter/m/b487fb/32.png) [@meyer1](https://discuss.elastic.co/u/meyer1)\
**Post date:** [July 19, 2022, 12:08pm UTC](https://discuss.elastic.co/t/vega-visualisation/309217/5 "2022-07-19T12:08:57Z")

</div>

Thank you for your answer,

the problem is that I have thousands of entries so I don't think I can put this in a table by hand.

Would you have another solution for my case?

Thank you in advance for your future feedback

---

<div class="post-metadata">

**Author:** ![aaron-nimocks](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/aaron-nimocks/32/73965_2.png) [@aaron-nimocks](https://discuss.elastic.co/u/aaron-nimocks)\
**Post date:** [July 19, 2022, 12:22pm UTC](https://discuss.elastic.co/t/vega-visualisation/309217/6 "2022-07-19T12:22:01Z")

</div>

Please check out the [Vega documentation](https://www.elastic.co/guide/en/kibana/current/vega.html). I hardcoded the data above for an example but you can still pull your data from an index.

Maybe load the demo data that comes with Kibana and view those Vega visualizations to see what's possible.

---

<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 16, 2022, 12:22pm UTC](https://discuss.elastic.co/t/vega-visualisation/309217/7 "2022-08-16T12:22:48Z")

</div>

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