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

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!

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.

@wylie thanks for the prompt response.

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

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

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

You put them at the end of the transform array

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

  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.

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

Thanks for assist!

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

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.