What is wrong on inline values?

Question

The "line chart" demo works fine, and is expressed in javascript, as in getting_started.html.

... but when I replace "data" field from URL to inline values, it shows only the axys, no chart into.

It works: "data":{"url":"https://vega.github.io/vega-lite/examples/data/stocks.csv"},

It not works:

var vlSpec = {
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "Google's stock price over time.",
  "data":  {"values": [
      {"symbol":"MSFT","date":"Jan 1 2000","price":39.81},
      {"symbol":"MSFT","date":"Feb 1 2000","price":36.35},
      {"symbol":"MSFT","date":"Mar 1 2000","price":43.22},
      {"symbol":"MSFT","date":"Apr 1 2000","price":28.37},
      {"symbol":"MSFT","date":"May 1 2000","price":25.45}
  ]},
  "transform": [{"filter": "datum.symbol==='GOOG'"}],
  "mark": "line",
  "encoding": {
    "x": {"field": "date", "type": "temporal"},
    "y": {"field": "price", "type": "quantitative"}
  }
};

There are an error at console, that not make sense:

WARN Infinite extent for field "date": [Infinity, -Infinity]

Answer 1

Your specification only contains rows with symbol="MSFT". It also contains a filter transform, {"filter": "datum.symbol==='GOOG'"}, which removes all rows except those with symbol="GOOG". The result is there is no data left to plot.

The warning you see comes from the fact that axis extent is determined from the data, and when there is no data, the extent is left at [-Infinity, Infinity].

If you remove or modify this filter statement, the chart will work. For example:

vlSpec = {
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "Google's stock price over time.",
  "data":  {"values": [
      {"symbol":"MSFT","date":"Jan 1 2000","price":39.81},
      {"symbol":"MSFT","date":"Feb 1 2000","price":36.35},
      {"symbol":"MSFT","date":"Mar 1 2000","price":43.22},
      {"symbol":"MSFT","date":"Apr 1 2000","price":28.37},
      {"symbol":"MSFT","date":"May 1 2000","price":25.45}
  ]},
  "transform": [{"filter": "datum.symbol==='MSFT'"}],
  "mark": "line",
  "encoding": {
    "x": {"field": "date", "type": "temporal"},
    "y": {"field": "price", "type": "quantitative"}
  }
};

The result looks like this (Open the Chart in the Vega Editor):