# How to work with Query Results in Vega

**URL:** <https://discuss.elastic.co/t/how-to-work-with-query-results-in-vega/286643>\
**Category:** Kibana\
**Tags:** vega\
**Created:** [October 13, 2021, 3:33pm UTC](https://discuss.elastic.co/t/how-to-work-with-query-results-in-vega/286643 "2021-10-13T15:33:19Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![nsimi](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nsimi/32/39013_2.png) [@nsimi](https://discuss.elastic.co/u/nsimi)\
**Post date:** [October 13, 2021, 3:33pm UTC](https://discuss.elastic.co/t/how-to-work-with-query-results-in-vega/286643/1 "2021-10-13T15:33:19Z")

</div>

Hello all,

I am directly querying elasticseach from my vega visualization, and I am looking for some education on how to access the results of my query. Can anyone provide an example or point me at something that shows/explains how to access the results of my query?

Thank you!

---

<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:** [October 13, 2021, 3:36pm UTC](https://discuss.elastic.co/t/how-to-work-with-query-results-in-vega/286643/2 "2021-10-13T15:36:25Z")

</div>

Here's where to find it if you are on a newer version.

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/2/0/20d204e0d379e080dd4d8df0e0219d6663044597.png)

---

<div class="post-metadata">

**Author:** ![nsimi](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nsimi/32/39013_2.png) [@nsimi](https://discuss.elastic.co/u/nsimi)\
**Post date:** [October 13, 2021, 4:01pm UTC](https://discuss.elastic.co/t/how-to-work-with-query-results-in-vega/286643/3 "2021-10-13T16:01:38Z")

</div>

I am on 7.12.1, and it doesn't appear to have that, any other place to look in lieu of that?

---

<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:** [October 13, 2021, 4:19pm UTC](https://discuss.elastic.co/t/how-to-work-with-query-results-in-vega/286643/4 "2021-10-13T16:19:55Z")

</div>

I'm on a newer version so I can't show you exactly since it works a little different.

1. Open browser Developer Tools (F12) or right click and Inspect
2. Click on Network Tab
3. Clear the Network Tab with the circle with line through it on Chrome (didn't mark that in picture). This is so you can see new data as it comes in.
4. Make a small change in your spec (usually I just add a space somewhere) and click Update
5. You will see new data in the Network tab
6. I don't know the name of the event since it's changed but you click on that
7. Then click on response and you will see the response

 ![Screen Shot 2021-10-13 at 12.13.59 PM](https://us1.discourse-cdn.com/elastic/original/3X/1/5/15034ff2f87fa1e527c607b65cb5d8a530f19d82.jpeg)

---

<div class="post-metadata">

**Author:** ![nsimi](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nsimi/32/39013_2.png) [@nsimi](https://discuss.elastic.co/u/nsimi)\
**Post date:** [October 13, 2021, 6:07pm UTC](https://discuss.elastic.co/t/how-to-work-with-query-results-in-vega/286643/5 "2021-10-13T18:07:02Z")

</div>

@aaron-nimocks thanks for the help, I don't think I am making myself clear, I have been using vega debug in the browser and the developer tools to see the raw data, what I am trying to figure out is how to get that data into something that is more traditionally like what I see in vega, e.g. I found some examples of people using

```auto
      format: {
        property:{
          hits.hits
        }
      }

```

And then accessing individual results as "datum.x" but when I try to do this vega doesn't like what I am doing so I was hoping for an example that would help me understand how to properly get it into a format like that.

Thank you!

---

<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:** [October 13, 2021, 6:18pm UTC](https://discuss.elastic.co/t/how-to-work-with-query-results-in-vega/286643/6 "2021-10-13T18:18:58Z")

</div>

Ahh ok. Well this depends on what your query and data looks like. Can you post your spec using [GIST](https://gist.github.com/)? The Vega code.

In Developer Tools - Console. Run `JSON.stringify(VEGA_DEBUG.vegalite_spec)` for Vega lite and `JSON.stringify(VEGA_DEBUG.vega_spec)` for Vega.

This will include your data so if it contains something you don't want to share it should be masked.

---

<div class="post-metadata">

**Author:** ![nsimi](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nsimi/32/39013_2.png) [@nsimi](https://discuss.elastic.co/u/nsimi)\
**Post date:** [October 13, 2021, 7:10pm UTC](https://discuss.elastic.co/t/how-to-work-with-query-results-in-vega/286643/7 "2021-10-13T19:10:25Z")

</div>

I will work on getting that right now it throws an exception trying to do that because of the data anyway I appreciate the help and will post when I can get it to work

---

<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:** [October 13, 2021, 7:19pm UTC](https://discuss.elastic.co/t/how-to-work-with-query-results-in-vega/286643/8 "2021-10-13T19:19:24Z")

</div>

The [documentation](https://www.elastic.co/guide/en/kibana/current/vega.html) has a great write up for this. But depending on your query is how you will access it. If it's a query then you most likely would use `hits.hits` but if its an aggregation it will be different like `format: {property: "aggregations.categories.buckets" }`.

---

<div class="post-metadata">

**Author:** ![nsimi](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nsimi/32/39013_2.png) [@nsimi](https://discuss.elastic.co/u/nsimi)\
**Post date:** [October 13, 2021, 7:33pm UTC](https://discuss.elastic.co/t/how-to-work-with-query-results-in-vega/286643/9 "2021-10-13T19:33:40Z")

</div>

OKay Got it I had some dummy data in there to make a graph while I mess with the query stuff to see how it works and it was breaking the print out:

```auto
{
   "$schema":"https://vega.github.io/schema/vega/v5.json",
   "data":[
      {
         "name":"node-data",
         "values":[
            
         ]
      },
      {
         "name":"link-data",
         "values":[
            
         ]
      },
      {
         "name":"query-data",
         "url":{
            "index":"idx*",
            "body":{
               "size":1,
               "query":{
                  "bool":{
                     "must":[
                        {
                           "term":{
                              "event_type.keyword":{
                                 "value":"connection"
                              }
                           }
                        }
                     ]
                  }
               }
            }
         },
         "values":{
            "took":887,
            "timed_out":false,
            "_shards":{
               "total":64,
               "successful":64,
               "skipped":0,
               "failed":0
            },
            "hits":{
               "total":627,
               "max_score":10.452393,
               "hits":[
                  {
                     "_index":"bb8_2_2021",
                     "_type":"_doc",
                     "_id":"aeb652d9-9ba2-442c-9131-d218871570ea",
                     "_score":10.452393,
                     "_source":{
                        "user":"test",
                        "user_function":null,
                        "user_function_normalized":null,
                        "user_email":null,
                        "user_org_type":null,
                        "user_org_type_normalized":null,
                        "device":{
                           "os":"temple",
                           "version":"1.0.0",
                           "device_id":null,
                           "resolution":{
                              "res_x":1920,
                              "res_y":1080
                           }
                        },
                        "location":{
                           "lat":33.8121,
                           "lon":117.919
                        },
                        "location_update":320457600000,
                        "geolocated_location":false,
                        "app_version":"1.1.3-test",
                        "connection":{
                           "state":"connected",
                           "to":"F8EB76B0-DE65-42A3-89B9-25F07CC6A4D7",
                           "with":{
                              "id":"F8EB76B0-DE65-42A3-89B9-25F07CC6A4D7",
                              "email":null,
                              "email_domain":null
                           }
                        },
                        "county":"Xuzhou",
                        "state":"Jiangsu",
                        "country":"China",
                        "migrated":true
                     }
                  }
               ]
            }
         }
      }
   ],
   "signals":[
      {
         "name":"cx",
         "update":"width / 2"
      },
      {
         "name":"cy",
         "update":"height / 2"
      },
      {
         "name":"nodeRadius",
         "value":8,
         "bind":{
            "input":"range",
            "min":1,
            "max":50,
            "step":1
         }
      },
      {
         "name":"nodeCharge",
         "value":-30,
         "bind":{
            "input":"range",
            "min":-100,
            "max":10,
            "step":1
         }
      },
      {
         "name":"linkDistance",
         "value":30,
         "bind":{
            "input":"range",
            "min":5,
            "max":100,
            "step":1
         }
      },
      {
         "name":"static",
         "value":true,
         "bind":{
            "input":"checkbox"
         }
      },
      {
         "description":"State variable for active node fix status.",
         "name":"fix",
         "value":false,
         "on":[
            {
               "events":"symbol:mouseout[!event.buttons], window:mouseup",
               "update":"false"
            },
            {
               "events":"symbol:mouseover",
               "update":"fix || true"
            },
            {
               "events":"[symbol:mousedown, window:mouseup] > window:mousemove!",
               "update":"xy()",
               "force":true
            }
         ]
      },
      {
         "description":"Graph node most recently interacted with.",
         "name":"node",
         "value":null,
         "on":[
            {
               "events":"symbol:mouseover",
               "update":"fix === true ? item() : node"
            }
         ]
      },
      {
         "description":"Flag to restart Force simulation upon data changes.",
         "name":"restart",
         "value":false,
         "on":[
            {
               "events":{
                  "signal":"fix"
               },
               "update":"fix && fix.length"
            }
         ]
      }
   ],
   "scales":[
      {
         "name":"color",
         "type":"ordinal",
         "domain":{
            "data":"node-data",
            "field":"group"
         },
         "range":{
            "scheme":"category20c"
         }
      }
   ],
   "marks":[
      {
         "name":"nodes",
         "type":"symbol",
         "zindex":1,
         "from":{
            "data":"node-data"
         },
         "on":[
            {
               "trigger":"fix",
               "modify":"node",
               "values":"fix === true ? {fx: node.x, fy: node.y} : {fx: fix[0], fy: fix[1]}"
            },
            {
               "trigger":"!fix",
               "modify":"node",
               "values":"{fx: null, fy: null}"
            }
         ],
         "encode":{
            "enter":{
               "fill":{
                  "scale":"color",
                  "field":"group"
               },
               "stroke":{
                  "value":"white"
               }
            },
            "update":{
               "size":{
                  "signal":"2 * nodeRadius * nodeRadius"
               },
               "cursor":{
                  "value":"pointer"
               }
            }
         },
         "transform":[
            {
               "type":"force",
               "iterations":300,
               "restart":{
                  "signal":"restart"
               },
               "static":{
                  "signal":"static"
               },
               "signal":"force",
               "forces":[
                  {
                     "force":"center",
                     "x":{
                        "signal":"cx"
                     },
                     "y":{
                        "signal":"cy"
                     }
                  },
                  {
                     "force":"collide",
                     "radius":{
                        "signal":"nodeRadius"
                     }
                  },
                  {
                     "force":"nbody",
                     "strength":{
                        "signal":"nodeCharge"
                     }
                  },
                  {
                     "force":"link",
                     "links":"link-data",
                     "distance":{
                        "signal":"linkDistance"
                     }
                  }
               ]
            }
         ]
      },
      {
         "type":"path",
         "from":{
            "data":"link-data"
         },
         "interactive":false,
         "encode":{
            "update":{
               "stroke":{
                  "value":"#ccc"
               },
               "strokeWidth":{
                  "value":0.5
               }
            }
         },
         "transform":[
            {
               "type":"linkpath",
               "require":{
                  "signal":"force"
               },
               "shape":"line",
               "sourceX":"datum.source.x",
               "sourceY":"datum.source.y",
               "targetX":"datum.target.x",
               "targetY":"datum.target.y"
            }
         ]
      }
   ],
   "config":{
      "range":{
         "category":{
            "scheme":"elastic"
         }
      },
      "arc":{
         "fill":"#54B399"
      },
      "area":{
         "fill":"#54B399"
      },
      "line":{
         "stroke":"#54B399"
      },
      "path":{
         "stroke":"#54B399"
      },
      "rect":{
         "fill":"#54B399"
      },
      "rule":{
         "stroke":"#54B399"
      },
      "shape":{
         "stroke":"#54B399"
      },
      "symbol":{
         "fill":"#54B399"
      },
      "trail":{
         "fill":"#54B399"
      },
      "title":{
         "color":"#d4dae5"
      },
      "style":{
         "guide-label":{
            "fill":"#98a2b3"
         },
         "guide-title":{
            "fill":"#d4dae5"
         },
         "group-title":{
            "fill":"#d4dae5"
         },
         "group-subtitle":{
            "fill":"#d4dae5"
         }
      },
      "axis":{
         "tickColor":"#343741",
         "domainColor":"#343741",
         "gridColor":"#343741"
      },
      "background":"transparent"
   },
   "width":"container",
   "height":"container",
   "autosize":{
      "type":"fit",
      "contains":"padding"
   }
}

```

---

<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:** [October 13, 2021, 7:47pm UTC](https://discuss.elastic.co/t/how-to-work-with-query-results-in-vega/286643/10 "2021-10-13T19:47:10Z")

</div>

I moved that over to the [Vega Editor](https://vega.github.io/editor/#/url/vega/N4IgJAzgxgFgpgWwIYgFwhgF0wBwqgegIDc4BzJAOjIEtMYBXAI0poHsDp5kTykSArJQBWENgDsQAGhAATJJhSoA2qHFIEcNCACODOACcAngFp5i6SAYGANmlA1xsuAA9tNWS4BUlpm1lG9iAQNABeWqgAjDJ6hoGooH5sdgkgCAwQmGiqIJiGCEFwpOKYAPqYRjhwlADWcEYA7mwGskHESDb62lAS4nBQmOySAL6jALqjozLtnXAQQZhsbDVoAByrAOwyg5qypWwMWagAZh0QcDKlEDBILfOpi4opAGwALDIQDFBQcxDHDC93sEajQcFVWqgAAwyU40GxwCGQ4YyGB0e6gR4dNDPABMWzSSBcVx6BgikUhlFeAhxAGYAJw0lFo7KgUqOZxudBMJirUo4vmQnGRSzlSoREClWRsKAijzaJBwJjPamyOkmOlMJA4kyvV44qDqyI0yJmIXrDaRAQbSFwFCXaDNMkUqm0hn2g4GH5BDKGbR5TKWH0GUr-cQDIZocQAmwyIMhhhhwYSUriZrIGxhBGR6Ox87BxBIOHZmwxqx5-YGMiiqrF0tx5pVipVFNpjqZiFRksyZzEGhe1Jse65RA4eGWUgGEISbSRSgUyGWHt9uBsjs5kCksSdJOSVKb0qcyJ0nHQjdzUrxcmrJHIkA2aUKCOpGwKNA0mmUVaRIUye+7yKRBslB0ket73lAj7JgwODmBENInlSGzPJCKEoTIZBwMkD55Hs4GQbupw2OcMhIGCpQTlOu4gLOs40iY-pZDIPTiH04bTqkmQKOKzGsThliLNoABiqwAKIAEJIWJkImAAIiJyo6jiACCdGrHSYlqjiAiCZCGwAMJ6c8SmvDJGyWA0dAwEEcroMJ4mSdJckKXqKkmGpGkmFpOn6YZxmmZYBZFqgnaloFNiSmwyCOLWUwgD0CYVNoAAaDChDAByWJxeTaAAUjQSDiGQnyWPFJTGNoemouolgIDQZAGFxEKYAY+jjLFxytkcoA4AYbBVAYiXoKimAQJQw3zOMMjIAYNT3DkTbinkLiMSAxy9QUqTmEouj6MYZgKCgt5wGG-gRKAx15AYCyuF1q00HANgQhKYjWD8lCkTg5GGJRIC3sccIpKAMxdOgADEqG-TIfVIFAdDxEDHQg5Et6cqAIRkOoKQgBZsj0AABAQeM4pDIDw8EdWY9o8B1VgBNEyTnhtIjERIiRhVjqkwMs7ebYY0zszdBdvq3pq5wZn0-Mg2kHiyGOf0SLdXPaBABUQCYeY0McJMdSUADKmaSxEJ7y3rFQcwjAvoHQbYyibmAAOpwDTivMzOKEkxmtUu5bN5tUAA) so you can see and learn. Also add a text mark so you can how to use the data.

You can view the values of the data and signals in the UI like below. You get this functionality in a later version of Kibana but right now this might be the best place to learn how to use it.

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

---

<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:** [November 10, 2021, 7:47pm UTC](https://discuss.elastic.co/t/how-to-work-with-query-results-in-vega/286643/11 "2021-11-10T19:47:41Z")

</div>

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