# Infinite extent for field “amount”: \[Infinity, -Infinity\]

**URL:** <https://discuss.elastic.co/t/infinite-extent-for-field-amount-infinity-infinity/319876>\
**Category:** Kibana\
**Tags:** vega\
**Created:** [November 27, 2022, 6:08am UTC](https://discuss.elastic.co/t/infinite-extent-for-field-amount-infinity-infinity/319876 "2022-11-27T06:08:32Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![sieky](https://avatars.discourse-cdn.com/v4/letter/s/cdc98d/32.png) [@sieky](https://discuss.elastic.co/u/sieky)\
**Post date:** [November 27, 2022, 6:08am UTC](https://discuss.elastic.co/t/infinite-extent-for-field-amount-infinity-infinity/319876/1 "2022-11-27T06:08:32Z")

</div>

I am a new to vega.I just follow vega website's tutorials and create a bar chart sucessfully.But,when I replace data source:

```auto
"data": [
{
"name": "table",
"values": [
{"category": "A", "amount": 28},
{"category": "B", "amount": 55},
...

```

with an index (I created a csv file and imported to ES),and modify related parameters, like this:

```json
{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 400,
  "height": 200,
  "padding": 5,

  "data": [
    {
      "name": "dt_source",
      "url": {"index": "bar_example"}
    }
  ],

  "signals": [
    {
      "name": "tooltip",
      "value": {},
      "on": [
        {"events": "rect:mouseover", "update": "datum"},
        {"events": "rect:mouseout", "update": "{}"}
      ]
    }
  ],

  "scales": [
    {
      "name": "xscale",
      "type": "band",
      "domain": {"data": "dt_source", "field": "category"},
      "range": "width",
      "padding": 0.05,
      "round": true
    },
    {
      "name": "yscale",
      "domain": {"data": "dt_source", "field": "amount"},
      "nice": true,
      "range": "height"
    }
  ],

  "axes": [
    { "orient": "bottom", "scale": "xscale" },
    { "orient": "left", "scale": "yscale" }
  ],

  "marks": [
    {
      "type": "rect",
      "from": {"data":"dt_source"},
      "encode": {
        "enter": {
          "x": {"scale": "xscale", "field": "category"},
          "width": {"scale": "xscale", "band": 1},
          "y": {"scale": "yscale", "field": "amount"},
          "y2": {"scale": "yscale", "value": 0}
        },
        "update": {
          "fill": {"value": "steelblue"}
        },
        "hover": {
          "fill": {"value": "red"}
        }
      }
    },
    {
      "type": "text",
      "encode": {
        "enter": {
          "align": {"value": "center"},
          "baseline": {"value": "bottom"},
          "fill": {"value": "#333"}
        },
        "update": {
          "x": {"scale": "xscale", "signal": "tooltip.category", "band": 0.5},
          "y": {"scale": "yscale", "signal": "tooltip.amount", "offset": -2},
          "text": {"signal": "tooltip.amount"},
          "fillOpacity": [
            {"test": "isNaN(tooltip.amount)", "value": 0},
            {"value": 1}
          ]
        }
      }
    }
  ]
}

```

It says:

```auto
Infinite extent for field “amount”: [Infinity, -Infinity]

```

I know I must made a very simple mistake,but I don't know where was wrong,I need help!

---

<div class="post-metadata">

**Author:** ![nickofthyme](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nickofthyme/32/60032_2.png) [@nickofthyme](https://discuss.elastic.co/u/nickofthyme)\
**Post date:** [December 8, 2022, 7:26pm UTC](https://discuss.elastic.co/t/infinite-extent-for-field-amount-infinity-infinity/319876/2 "2022-12-08T19:26:46Z")

</div>

Hey @sieky welcome!

Thanks for asking this question.

I think the only missing part in your understanding is just where the data comes from and how it is passed to vega. But if you are looking for a good kibana-related vega tutorial, [here](https://www.elastic.co/blog/getting-started-with-vega-visualizations-in-kibana) is a good resource.

So in the simple example you posted with explicitly defined `data[0].values`. The final shape of the `table` dataset that vega sees looks like this...

| category | amount |
| --- | --- |
| A | 28 |
| B | 55 |
| ... | ... |

> Side note you can view each dataset from the **Vega debug** view from the **Inspect** panel.
> 
> ![image](https://us1.discourse-cdn.com/elastic/original/3X/9/8/980a22fd1219b4526181afd89f91cc6372dfbb94.png)

Now when you pull _dynamic_ data from Elasticsearch, simply defining the `data[0].url.index` is not sufficient, you must provide an `aggregation` to query the index, this [link](https://www.elastic.co/guide/en/kibana/6.7/vega-querying-elasticsearch.html) explains this in more detail.

A good approach to obtain this query is to just build out the basic shape of the visualization in **Lens** then just copy the query from the **Inspect -\> Requests -\> Request** tab, as shown below.

![ezgif.com-gif-maker](https://us1.discourse-cdn.com/elastic/original/3X/c/6/c66b3a36414bde2e83fcd894abe73f0bcb0f0f4c.gif)

In our case the **request** would look something like this...

```json
{
  "aggs": {
    "0": {
      "terms": {
        "field": "category.keyword",
        "order": {
          "1": "desc"
        },
        "size": 5
      },
      "aggs": {
        "1": {
          "sum": {
            "field": "amount"
          }
        }
      }
    }
  },
  "size": 0,
  "fields": [],
  "script_fields": {},
  "stored_fields": [
    "*"
  ],
  "runtime_mappings": {},
  "_source": {
    "excludes": []
  },
  "query": {
    "bool": {
      "must": [],
      "filter": [],
      "should": [],
      "must_not": []
    }
  }
}

```

> You could simplify this and change the `aggs` key names if you'd like but I'll just keep it as is for the sake of this demo.

And the raw ES **response** of this would look like this...

```json
{
  "took": 0,
  "timed_out": false,
  "_shards": {
    "total": 1,
    "successful": 1,
    "skipped": 0,
    "failed": 0
  },
  "hits": {
    "total": {
      "value": 2,
      "relation": "eq"
    },
    "max_score": null,
    "hits": []
  },
  "aggregations": {
    "0": {
      "doc_count_error_upper_bound": 0,
      "sum_other_doc_count": 0,
      "buckets": [
        {
          "1": {
            "value": 55
          },
          "key": "B",
          "doc_count": 1
        },
        {
          "1": {
            "value": 28
          },
          "key": "A",
          "doc_count": 1
        }
      ]
    }
  }
}

```

At this point our vega config looks like this...

> **Click to see full config**
>
> ```json
> {
> "$schema":"https://vega.github.io/schema/vega/v5.json",
> "padding":5,
> "data":[
> {
> "name":"dt_source",
> "url":{
> "index":"bar_example",
> "body":{
> "aggs":{
> "0":{
> "terms":{
> "field":"category.keyword",
> "order":{
> "1":"desc"
> },
> "size":5
> },
> "aggs":{
> "1":{
> "sum":{
> "field":"amount"
> }
> }
> }
> }
> },
> "size":0,
> "fields":[
>                   
> ],
> "script_fields":{
>                   
> },
> "stored_fields":[
> "*"
> ],
> "runtime_mappings":{
>                   
> },
> "_source":{
> "excludes":[
>                      
> ]
> },
> "query":{
> "bool":{
> "must":[
>                         
> ],
> "filter":[
>                         
> ],
> "should":[
>                         
> ],
> "must_not":[
>                         
> ]
> }
> }
> }
> }
> }
> ],
> "signals":[
> {
> "name":"tooltip",
> "value":{
>             
> },
> "on":[
> {
> "events":"rect:mouseover",
> "update":"datum"
> },
> {
> "events":"rect:mouseout",
> "update":"{}"
> }
> ]
> }
> ],
> "scales":[
> {
> "name":"xscale",
> "type":"band",
> "domain":{
> "data":"dt_source",
> "field":"category"
> },
> "range":"width",
> "padding":0.05,
> "round":true
> },
> {
> "name":"yscale",
> "domain":{
> "data":"dt_source",
> "field":"amount"
> },
> "nice":true,
> "range":"height"
> }
> ],
> "axes":[
> {
> "orient":"bottom",
> "scale":"xscale"
> },
> {
> "orient":"left",
> "scale":"yscale"
> }
> ],
> "marks":[
> {
> "type":"rect",
> "from":{
> "data":"dt_source"
> },
> "encode":{
> "enter":{
> "x":{
> "scale":"xscale",
> "field":"category"
> },
> "width":{
> "scale":"xscale",
> "band":1
> },
> "y":{
> "scale":"yscale",
> "field":"amount"
> },
> "y2":{
> "scale":"yscale",
> "value":0
> }
> },
> "update":{
> "fill":{
> "value":"steelblue"
> }
> },
> "hover":{
> "fill":{
> "value":"red"
> }
> }
> }
> },
> {
> "type":"text",
> "encode":{
> "enter":{
> "align":{
> "value":"center"
> },
> "baseline":{
> "value":"bottom"
> },
> "fill":{
> "value":"#333"
> }
> },
> "update":{
> "x":{
> "scale":"xscale",
> "signal":"tooltip.category",
> "band":0.5
> },
> "y":{
> "scale":"yscale",
> "signal":"tooltip.amount",
> "offset":-2
> },
> "text":{
> "signal":"tooltip.amount"
> },
> "fillOpacity":[
> {
> "test":"isNaN(tooltip.amount)",
> "value":0
> },
> {
> "value":1
> }
> ]
> }
> }
> }
> ]
> }
> 
> ```

But this still does not work because if we look again at the `dt_source` dataset in the **Vega debug** tab, we see that the dataset values are only using the top values from the **Response**.

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/1/7/176df1d50002371f8b3d2f3cc55bdafd4e143dcb.png)

To fix this we need to use the `data[0].format` property. This is basically like [`lodash.get`](https://lodash.com/docs/4.17.15#get) that replaces the dataset with whatever is found at the defined path. In our case we want this to point to the buckets that contain our data values, this path is defined based on our defined `aggs` as `aggregations.0.buckets`.

```json
{
   "format": {
      "property": "aggregations.0.buckets"
   }
}

```

With this change the `dt_source` now shows the bucket values...

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/8/f/8fc5cf6f73faadfb4273c6a408695b709f0e6bdf.png)

You could leave it here and just access the values as is (i.e. `1.value` instead of `amount` and `key` instead of `category`). But a cleaner way would be to just define a [`transform`](https://vega.github.io/vega/docs/transforms/) on the `data` object that creates a new column based on the result of an expression. In our case we want to extract `key` as `category` and `[1].value` as `amount`.

```json
{
  "transform":[
    {
      "type":"formula",
      "expr":"datum.key",
      "as":"category"
    },
    {
      "type":"formula",
      "expr":"datum[1].value",
      "as":"amount"
    }
  ]
}

```

> Note: the `datum` value is a reserved variable to access the columnar data row. Also, since we defined the aggs name as `1` it is inferred as a number/index and must be accessed via bracket notation (i.e. `[1]`) in the `expr`[ession].

With these changes the `dt_source` dataset is now in the expected form (see below) and can be used with your original vega config.

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

> **Click to see final config**
>
> ```json
> {
> "$schema":"https://vega.github.io/schema/vega/v5.json",
> "padding":5,
> "data":[
> {
> "name":"dt_source",
> "url":{
> "index":"bar_example",
> "body":{
> "aggs":{
> "0":{
> "terms":{
> "field":"category.keyword",
> "order":{
> "1":"desc"
> },
> "size":5
> },
> "aggs":{
> "1":{
> "sum":{
> "field":"amount"
> }
> }
> }
> }
> },
> "size":0,
> "fields":[
>             
> ],
> "script_fields":{
>             
> },
> "stored_fields":[
> "*"
> ],
> "runtime_mappings":{
>             
> },
> "_source":{
> "excludes":[
>               
> ]
> },
> "query":{
> "bool":{
> "must":[
>                 
> ],
> "filter":[
>                 
> ],
> "should":[
>                 
> ],
> "must_not":[
>                 
> ]
> }
> }
> }
> },
> "format":{
> "property":"aggregations.0.buckets"
> },
> "transform":[
> {
> "type":"formula",
> "expr":"datum.key",
> "as":"category"
> },
> {
> "type":"formula",
> "expr":"datum[1].value",
> "as":"amount"
> }
> ]
> }
> ],
> "signals":[
> {
> "name":"tooltip",
> "value":{
>         
> },
> "on":[
> {
> "events":"rect:mouseover",
> "update":"datum"
> },
> {
> "events":"rect:mouseout",
> "update":"{}"
> }
> ]
> }
> ],
> "scales":[
> {
> "name":"xscale",
> "type":"band",
> "domain":{
> "data":"dt_source",
> "field":"category"
> },
> "range":"width",
> "padding":0.05,
> "round":true
> },
> {
> "name":"yscale",
> "domain":{
> "data":"dt_source",
> "field":"amount"
> },
> "nice":true,
> "range":"height"
> }
> ],
> "axes":[
> {
> "orient":"bottom",
> "scale":"xscale"
> },
> {
> "orient":"left",
> "scale":"yscale"
> }
> ],
> "marks":[
> {
> "type":"rect",
> "from":{
> "data":"dt_source"
> },
> "encode":{
> "enter":{
> "x":{
> "scale":"xscale",
> "field":"category"
> },
> "width":{
> "scale":"xscale",
> "band":1
> },
> "y":{
> "scale":"yscale",
> "field":"amount"
> },
> "y2":{
> "scale":"yscale",
> "value":0
> }
> },
> "update":{
> "fill":{
> "value":"steelblue"
> }
> },
> "hover":{
> "fill":{
> "value":"red"
> }
> }
> }
> },
> {
> "type":"text",
> "encode":{
> "enter":{
> "align":{
> "value":"center"
> },
> "baseline":{
> "value":"bottom"
> },
> "fill":{
> "value":"#333"
> }
> },
> "update":{
> "x":{
> "scale":"xscale",
> "signal":"tooltip.category",
> "band":0.5
> },
> "y":{
> "scale":"yscale",
> "signal":"tooltip.amount",
> "offset":-2
> },
> "text":{
> "signal":"tooltip.amount"
> },
> "fillOpacity":[
> {
> "test":"isNaN(tooltip.amount)",
> "value":0
> },
> {
> "value":1
> }
> ]
> }
> }
> }
> ]
> }
> 
> ```

---

<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:** [January 5, 2023, 7:26pm UTC](https://discuss.elastic.co/t/infinite-extent-for-field-amount-infinity-infinity/319876/3 "2023-01-05T19:26:53Z")

</div>

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