# Vega Help Infinite extent for field "FIELDNAME": \[Infinity, -Infinity\]

**URL:** <https://discuss.elastic.co/t/vega-help-infinite-extent-for-field-fieldname-infinity-infinity/277485>\
**Category:** Kibana\
**Tags:** vega\
**Created:** [June 30, 2021, 4:23pm UTC](https://discuss.elastic.co/t/vega-help-infinite-extent-for-field-fieldname-infinity-infinity/277485 "2021-06-30T16:23:23Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![dandcp](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@dandcp](https://discuss.elastic.co/u/dandcp)\
**Post date:** [June 30, 2021, 4:23pm UTC](https://discuss.elastic.co/t/vega-help-infinite-extent-for-field-fieldname-infinity-infinity/277485/1 "2021-06-30T16:23:23Z")

</div>

I'm by no means a coder and am trying to do something that I think should be relatively simple.

I have an index that has the following fields (plus others):

\_source.name",  
"\_source['it\_debt\_applies']",  
"\_source['it\_debt\_asset\_class']",  
"\_source['it\_debt\_comments']",  
"\_source['it\_debt\_cost\_of\_no\_action']",  
"\_source['it\_debt\_current\_version']",  
"\_source['it\_debt\_end\_extended\_support']",  
"\_source['it\_debt\_end\_standard\_support\_date']",  
"\_source['it\_debt\_existing\_support\_level']",  
"\_source['it\_debt\_latest\_version']",  
"\_source['it\_debt\_number\_of\_devices']",  
"\_source['it\_debt\_version\_gap']"

I want to use a Vega timeline to chart them based on their "it\_debt\_end\_standard\_support\_date" and "it\_debt\_end\_extended\_support".

The timeline I'm trying to use is this one:

> **[Timelines Example](https://vega.github.io/vega/examples/timelines/)**
>
> Vega - A Visualization Grammar. Vega is a visualization grammar, a declarative format for creating, saving, and sharing interactive visualization designs. With Vega, you can describe the visual appearance and interactive behavior of a visualization...

the static code that they are using is:

```auto
{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "A timeline visualization of the lives of the first five U.S. presidents.",
  "width": 500,
  "height": 80,
  "padding": 5,

  "data": [
    {
      "name": "people",
      "values": [
        {
          "label": "Washington",
          "born": -7506057600000,
          "died": -5366196000000,
          "enter": -5701424400000,
          "leave": -5453884800000
        },
        {
          "label": "Adams",
          "born": -7389766800000,
          "died": -4528285200000,
          "enter": -5453884800000,
          "leave": -5327740800000
        },
        {
          "label": "Jefferson",
          "born": -7154586000000,
          "died": -4528285200000,
          "enter": -5327740800000,
          "leave": -5075280000000
        },
        {
          "label": "Madison",
          "born": -6904544400000,
          "died": -4213184400000,
          "enter": -5075280000000,
          "leave": -4822819200000
        },
        {
          "label": "Monroe",
          "born": -6679904400000,
          "died": -4370518800000,
          "enter": -4822819200000,
          "leave": -4570358400000
        }
      ]
    },
    {
      "name": "events",
      "format": {"type":"json", "parse":{"when":"date"}},
      "values": [
        { "name":"Decl. of Independence", "when":"July 4, 1776" },
        { "name":"U.S. Constitution", "when":"3/4/1789" },
        { "name":"Louisiana Purchase", "when":"April 30, 1803" },
        { "name":"Monroe Doctrine", "when":"Dec 2, 1823" }
      ]
    }
  ],

  "scales": [
    {
      "name": "yscale",
      "type": "band",
      "range": [0, {"signal": "height"}],
      "domain": {"data": "people", "field": "label"}
    },
    {
      "name": "xscale",
      "type": "time",
      "range": "width",
      "round": true,
      "domain": {"data": "people", "fields": ["born", "died"]}
    }
  ],

  "axes": [
    {"orient": "bottom", "scale": "xscale", "format": "%Y"}
  ],

  "marks": [
    {
      "type": "text",
      "from": {"data": "events"},
      "encode": {
        "enter": {
          "x": {"scale": "xscale", "field": "when"},
          "y": {"value": -10},
          "angle": {"value": -25},
          "fill": {"value": "#000"},
          "text": {"field": "name"},
          "fontSize": {"value": 10}
        }
      }
    },
    {
      "type": "rect",
      "from": {"data": "events"},
      "encode": {
        "enter": {
          "x": {"scale": "xscale", "field": "when"},
          "y": {"value": -8},
          "width": {"value": 1},
          "height": {"field": {"group": "height"}, "offset": 8},
          "fill": {"value": "#888"}
        }
      }
    },
    {
      "type": "text",
      "from": {"data": "people"},
      "encode": {
        "enter": {
          "x": {"scale": "xscale", "field": "born"},
          "y": {"scale": "yscale", "field": "label", "offset": -3},
          "fill": {"value": "#000"},
          "text": {"field": "label"},
          "fontSize": {"value": 10}
        }
      }
    },
    {
      "type": "rect",
      "from": {"data": "people"},
      "encode": {
        "enter": {
          "x": {"scale": "xscale", "field": "born"},
          "x2": {"scale": "xscale", "field": "died"},
          "y": {"scale": "yscale", "field": "label"},
          "height": {"value": 2},
          "fill": {"value": "#557"}
        }
      }
    },
    {
      "type": "rect",
      "from": {"data": "people"},
      "encode": {
        "enter": {
          "x": {"scale": "xscale", "field": "enter"},
          "x2": {"scale": "xscale", "field": "leave"},
          "y": {"scale": "yscale", "field": "label", "offset":-1},
          "height": {"value": 4},
          "fill": {"value": "#e44"}
        }
      }
    }
  ]
}

```

I've converted that to use the fields from my index, but for whatever reason it keeps complaining about an infinite extend for my date fields:

Here is my code:

```auto
{
    "$schema": "https://vega.github.io/schema/vega/v5.json",
    "padding": 5,
    "config": {"background": "#f5f5f5"},
    "data": [
      {
        "name": "source",
        "url": {
          "%context%": true,
          "index": "test_XYZ_custom_itdebt",
          "body": {"size": 10000}
        },
        "format": {"property": "hits.hits"},
        "transform": [
          {
            "type": "filter",
            "expr": "datum._source['it_debt_applies'] != null &&datum._source['it_debt_end_extended_support'] != null &&datum._source['it_debt_end_standard_support_date'] != null "
          },
          {
            "type": "project",
            "fields": [
              "_source.name",
              "_source['it_debt_applies']",
              "_source['it_debt_asset_class']",
              "_source['it_debt_comments']",
              "_source['it_debt_cost_of_no_action']",
              "_source['it_debt_current_version']",
              "_source['it_debt_end_extended_support']",
              "_source['it_debt_end_standard_support_date']",
              "_source['it_debt_existing_support_level']",
              "_source['it_debt_latest_version']",
              "_source['it_debt_number_of_devices']",
              "_source['it_debt_version_gap']"
            ],
            "as": [
              "Name",
              "Applies",
              "Asset_Class",
              "Comments",
              "Cost_Of_No_Action",
              "Current_Version",
              "End_Extended_Support",
              "End_Standard_Support_Date",
              "Existing_Support_Level",
              "Latest_Version",
              "Number_Of_Devices",
              "Version_Gap"
            ]
          }
        ]
      },
    {
        "name": "events",
        "format": {"type":"json", "parse":{"when":"date"}},
        "values": [
          { "name":"Decl. of Independence", "when":"July 4, 1776" },
          { "name":"U.S. Constitution", "when":"3/4/1789" },
          { "name":"Louisiana Purchase", "when":"April 30, 1803" },
          { "name":"Monroe Doctrine", "when":"Dec 2, 1823" }
        ]
      }
    ]
    "scales": [
      {
        "name": "yscale",
        "type": "band",
        "range": [0, {"signal": "height"}],
        "domain": {"data": "source", "field": "Name"}
      },
      {
        "name": "xscale",
        "type": "time",
        "range": "width",
        "round": true,
        "domain": {"data": "source", "fields": ["End_Standard_Support_Date", "End_Extended_Support"]}
      }
    ],
     "axes": [
      {"orient": "bottom", "scale": "xscale", "format": "%Y %M"}
    ],
    "marks": [
        {
          "type": "text",
          "from": {"data": "events"},
          "encode": {
            "enter": {
              "x": {"scale": "xscale", "field": "when"},
              "y": {"value": -10},
              "angle": {"value": -25},
              "fill": {"value": "#000"},
              "text": {"field": "name"},
              "fontSize": {"value": 10}
            }
          }
        },
        {
            "type": "text",
            "from": {"data": "source"},
            "encode": {
              "enter": {
                "x": {"scale": "xscale", "field": "End_Standard_Support_Date"},
                "y": {"scale": "yscale", "field": "Name", "offset": -3},
                "fill": {"value": "#000"},
                "text": {"field": "label"},
                "fontSize": {"value": 10}
              }
            }
          },
          {
            "type": "rect",
            "from": {"data": "source"},
            "encode": {
              "enter": {
                "x": {"scale": "xscale", "field": "End_Standard_Support_Date"},
                "x2": {"scale": "xscale", "field": "End_Extended_Support"},
                "y": {"scale": "yscale", "field": "Name"},
                "height": {"value": 2},
                "fill": {"value": "#557"}
              }
            }
          },
        ]
    }    

```

I know I'm missing something simple, any help would be appreciated.

Thanks in advance!

---

<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:** [June 30, 2021, 5:29pm UTC](https://discuss.elastic.co/t/vega-help-infinite-extent-for-field-fieldname-infinity-infinity/277485/2 "2021-06-30T17:29:50Z")

</div>

Hi, to get the best help with Vega you should post a full spec based on the results of your ES query, following the instructions here: [Vega | Kibana Guide [7.13] | Elastic](https://www.elastic.co/guide/en/kibana/current/vega.html#asking-for-help-with-a-vega-spec). What we can do is then copy+paste your _compiled_ output into [Vega Editor](https://vega.github.io/editor/#/custom/vega) to validate that your spec is working correctly, and that you've matched the names of all your `encode` properties to the names in your data.

---

<div class="post-metadata">

**Author:** ![dandcp](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@dandcp](https://discuss.elastic.co/u/dandcp)\
**Post date:** [June 30, 2021, 5:57pm UTC](https://discuss.elastic.co/t/vega-help-infinite-extent-for-field-fieldname-infinity-infinity/277485/3 "2021-06-30T17:57:54Z")

</div>

@wylie thanks for the prompt response.

I've copied the Vega debug to [Timeline Vega · GitHub](https://gist.github.com/dandcp/ea42a7181fe42f3b415c67187233495f)

---

<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:** [June 30, 2021, 6:28pm UTC](https://discuss.elastic.co/t/vega-help-infinite-extent-for-field-fieldname-infinity-infinity/277485/4 "2021-06-30T18:28:39Z")

</div>

Okay, the issue is that your dates are not Javascript dates, which are required for a `time` scale like you've chosen to have. So when using a `time` scale, create new calculated fields:

```auto
        {
          "type": "formula",
          "expr": "toDate(datum.End_Extended_Support)",
          "as": "d_End_Extended_Support"
        },
        {
          "type": "formula",
          "expr": "toDate(datum.End_Standard_Support_Date)",
          "as": "d_End_Standard_Support_Date"
        }

```

And then replace all your `"field": "End_Standard_Support_Date"` with `"field": "d_End_Standard_Support_Date"` to reference the parsed date.

It also looks like you deleted the Y axis, I'd recommend adding that back in under `axes`.

```auto
    {
      "orient": "left",
      "scale": "yscale"
    }

```

---

<div class="post-metadata">

**Author:** ![dandcp](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@dandcp](https://discuss.elastic.co/u/dandcp)\
**Post date:** [June 30, 2021, 6:56pm UTC](https://discuss.elastic.co/t/vega-help-infinite-extent-for-field-fieldname-infinity-infinity/277485/5 "2021-06-30T18:56:17Z")

</div>

@wylie wow, big help. Um...where do I put the calculated fields? Does that go into the Vega script?

---

<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:** [June 30, 2021, 7:08pm UTC](https://discuss.elastic.co/t/vega-help-infinite-extent-for-field-fieldname-infinity-infinity/277485/6 "2021-06-30T19:08:22Z")

</div>

You put them at the end of the `transform` array

---

<div class="post-metadata">

**Author:** ![dandcp](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@dandcp](https://discuss.elastic.co/u/dandcp)\
**Post date:** [July 9, 2021, 2:51pm UTC](https://discuss.elastic.co/t/vega-help-infinite-extent-for-field-fieldname-infinity-infinity/277485/7 "2021-07-09T14:51:36Z")

</div>

@wylie - truly appreciate all of your help. I was able to finally get it working, but now I have two (likely incredibly easy) questions remaining.

I have a field that is the value of the version gap, the field name is "Version\_Gap.value". I want to color my rectangles based off of this field. I have done this before and strangely I did it now and it works when I view the dashboard in safari on my Mac. But when I view it in chrome or any windows users views it they only see the color green.

Here is what I have.

```auto
{
        "name": "color",
        "type": "ordinal",
        "domain": {"data": "source", "field": "Version_Gap.value"},
        //"range": {"scheme": "dark2"}
        "range": ["#7EB26D","EAB839","EF843C","E24D42"],
      }

```

...once again, it works and colors everything correctly, but only when viewing in safari.

Second question is regarding a tooltip. I have another Vega visualization and I have a tooltip that looks like this:

```auto
            tooltip: {"signal": "{\"Name\": datum.name, \"Cost\": format(datum.Cost, '$,.0f'),\"Risk\": datum.Risk_Score,\"Compliance\": datum.BV_Compliance, \"RiskCompliance\": datum.Risk_Compliance}"}

```

I tried using that same syntax (but replaced the fields with the fields from this visualization and I keep getting a parse error.

The only thing I can get to work is a single field using:

```auto
"tooltip": {"field": "End_Extended_Support"}

```

Or I can get two fields if I use:

```auto
            "tooltip": {
                "signal": "[datum.Name, datum.Current_Version]"
                }

```

but that puts the output in an ugly way. What am I missing if I want to just have a tooltip that has several fields with some titles?

---

<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:** [July 9, 2021, 3:09pm UTC](https://discuss.elastic.co/t/vega-help-infinite-extent-for-field-fieldname-infinity-infinity/277485/8 "2021-07-09T15:09:36Z")

</div>

1. It seems like you are missing the # sign from 3/4 colors, so maybe the only valid color is green in some browsers.

2. Your tooltip signal example looks fine, it's not clear what the issue is from what you've shared. It's probably something you need to try again, maybe check that your string is valid JSON.

---

<div class="post-metadata">

**Author:** ![dandcp](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@dandcp](https://discuss.elastic.co/u/dandcp)\
**Post date:** [July 9, 2021, 3:15pm UTC](https://discuss.elastic.co/t/vega-help-infinite-extent-for-field-fieldname-infinity-infinity/277485/9 "2021-07-09T15:15:10Z")

</div>

@wylie - well that's not embarrassing at all.

Thanks for assist!

---

<div class="post-metadata">

**Author:** ![dandcp](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@dandcp](https://discuss.elastic.co/u/dandcp)\
**Post date:** [July 13, 2021, 2:25pm UTC](https://discuss.elastic.co/t/vega-help-infinite-extent-for-field-fieldname-infinity-infinity/277485/10 "2021-07-13T14:25:55Z")

</div>

@wylie - quick question about colors. My Vega chart was working great (thanks to your help) but all of a sudden the colors changed.

I have a field that is called version gap, and it has four possible values (1, 2, 3, 4). I put in a color variable and gave it a range as stated above:

```auto
{
        "name": "color",
        "type": "ordinal",
        "domain": {"data": "source", "field": "Version_Gap.value"},
        // "range": {"scheme": "dark2"}
        "range": ["#7EB26D","#EAB839","#EF843C","#E24D42"],
      }

```

...at first value 1 = #7EB26D and 2 equaled the next value = #EAB839 and so on.

However, when loading the dashboard the next day the colors changed. They are correctly assigning the same color to "a" value, but not "the" value. In other words, all of the 3's are the same color and all of the 4's are the same color, but they seem to change depending on the day time. Is there a way to statically assign value 1 = #7eb26D, or smoother way to make it so the colors don't change?

---

<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:** [July 13, 2021, 4:20pm UTC](https://discuss.elastic.co/t/vega-help-infinite-extent-for-field-fieldname-infinity-infinity/277485/11 "2021-07-13T16:20:45Z")

</div>

I think that if you want to assign a specific color to each result by _name_ you need to create your color scale in a different way. When you tell Vega to assign the colors in an `ordinal` scale it'll use the first value it sees for the first color, etc.

---

<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 10, 2021, 4:21pm UTC](https://discuss.elastic.co/t/vega-help-infinite-extent-for-field-fieldname-infinity-infinity/277485/12 "2021-08-10T16:21:18Z")

</div>

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