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

dandcp · June 30, 2021, 4:23pm

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:

the static code that they are using is:

{
  "$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:

{
    "$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!

wylie · June 30, 2021, 5:29pm

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. What we can do is then copy+paste your compiled output into Vega Editor 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.

dandcp · June 30, 2021, 5:57pm

@wylie thanks for the prompt response.

I've copied the Vega debug to Timeline Vega · GitHub

wylie · June 30, 2021, 6:28pm

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:

        {
          "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.

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

dandcp · June 30, 2021, 6:56pm

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

wylie · June 30, 2021, 7:08pm

You put them at the end of the transform array

dandcp · July 9, 2021, 2:51pm

@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.

{
        "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:

            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:

"tooltip": {"field": "End_Extended_Support"}

Or I can get two fields if I use:

            "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?

wylie · July 9, 2021, 3:09pm

It seems like you are missing the # sign from 3/4 colors, so maybe the only valid color is green in some browsers.
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.

dandcp · July 9, 2021, 3:15pm

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

Thanks for assist!

dandcp · July 13, 2021, 2:25pm

@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:

{
        "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?

wylie · July 13, 2021, 4:20pm

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.

system · August 10, 2021, 4:21pm

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

Topic		Replies	Views
Infinite extent for field “amount”: [Infinity, -Infinity] Kibana vega	2	2697	January 5, 2023
Infinite extent for field "<field name>" : [Infinity, -Infinity] Kibana vega	6	648	February 16, 2023
Infinite extent for field Kibana vega	14	1438	August 23, 2022
Infinite extent for field "times": [Infinity, -Infinity] when data size set as 0 or larger than 10000 Kibana vega	2	1058	January 11, 2022
Vega visualization Kibana fields Kibana	3	454	May 7, 2018

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

Related topics