# Vega lite visualization

**URL:** https://discuss.elastic.co/t/vega-lite-visualization/252173
**Category:** Kibana
**Created:** [October 15, 2020, 10:34am UTC](https://discuss.elastic.co/t/vega-lite-visualization/252173 "2020-10-15T10:34:27Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![hiba](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/hiba/32/110919_2.png) [@hiba](https://discuss.elastic.co/u/hiba)
#### Post date: [October 15, 2020, 10:34am UTC](https://discuss.elastic.co/t/vega-lite-visualization/252173/1 "2020-10-15T10:34:27Z")

</div>

Hi Team,

i'm very new to vega visualization i try to make a visualization like this

 ![Capture1](https://us1.discourse-cdn.com/elastic/original/3X/7/9/794bd18681c79b737156f3066aeee5e2d35ede36.png)

i have a simple script like this :

```auto
{
  $schema: https://vega.github.io/schema/vega-lite/v2.json
  data: {
    # URL object is a context-aware query to Elasticsearch
    url: {
      # The %-enclosed keys are handled by Kibana to modify the query
      # before it gets sent to Elasticsearch. Context is the search
      # filter as shown above the dashboard. Timefield uses the value 
      # of the time picker from the upper right corner.
      %context%: true
      %timefield%: @timestamp
      index: distributor
      body: {
        size: 1000
        _source: [
          type
        ]
      }
    }
    # We only need the content of hits.hits array
    format: {
      property: hits.hits
    }
  }
 
  transform: [
    {
      type: formula
      expr: data('values').count
      as: count
    }
  ]

  mark: circle
  encoding: {
    x: {
      field: _source.type
      type: nominal
      axis: {
        title: Distributor}}
        y: {
          field: count
          type: quantitative
          axis: {
            title: number}}
            color: {
              field: _source.type
              type: nominal
              legend: {
                title: Distributor type
              }
            }
            shape: {
              field: _source.type
              type: nominal
            }
          }
        }
      }
    }
  }
}

```

 ![Capture2](https://us1.discourse-cdn.com/elastic/original/3X/4/d/4d03a5f04fa3792f0c6f2adf18151287f7dfc7d3.png)

any help please !

---

<div class="post-metadata">

### Author: ![wylie](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/wylie/32/81794_2.png) [@wylie](https://discuss.elastic.co/u/wylie)
#### Post date: [October 15, 2020, 2:27pm UTC](https://discuss.elastic.co/t/vega-lite-visualization/252173/2 "2020-10-15T14:27:30Z")

</div>

For general advice I've written some new [vega tutorials and reference docs](https://www.elastic.co/guide/en/kibana/current/vega-lite-tutorial.html) for Kibana which were written for 7.9.0 and later, but you can adapt the concepts there to older versions as well.

You appear to be using `_source` instead of using Elasticsearch aggregations. Please try the tutorial I wrote to use aggregations.

For specific advice, the `transform` block that you've written doesn't look like a valid Vega-lite [calculation](https://vega.github.io/vega-lite/docs/calculate.html).

If you want more help, the best option for you is to use the browser console to inspect `VEGA_DEBUG.vegalite_spec` and to share that (only a few docs are needed, please change the size to 1 or 2)

---

<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 12, 2020, 2:27pm UTC](https://discuss.elastic.co/t/vega-lite-visualization/252173/3 "2020-11-12T14:27:33Z")

</div>

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