CODEWITHSUNDEEP
vega-litevega
Gdogg
Gdogg

Reputation: 147

Parameterize datetime in vega-lite

I am trying to plot a simple line graph of temperature vs. time.

I am trying to make a parameter (e.g. slider) for the datetime (to determine range), but I cannot get a parameter to work with a datetime type. I instead put the year, month, and day as separate (integer) parameters:

  "params": [
    {
      "name": "lowYear",
      "value": 2021,
      "bind": {"input": "range", "min": 2020, "max": 2022, "step": 1}
    },
    {
      "name": "lowMonth",
      "value": 1,
      "bind": {"input": "range", "min": 1, "max": 12, "step": 1}
    },
    {
      "name": "lowDay",
      "value": 1,
      "bind": {"input": "range", "min": 1, "max": 31, "step": 1}
    }
]

I can apply a filter on the date time easily, but this fails when I use an expression for these values.

  "transform": [
    {
      "filter": {
        "field": "timestamp",
        "gte": {"year": 2021, "month": 2, "date": 20}
      }
    }
  ]

But this fails:

  "transform": [
    {
      "filter": {
        "field": "timestamp",
        "gte": {"year": {"expr": "lowYear"}, "month": 2, "date": 20}
      }
    }
  ]

It seems that filters can take expressions, but maybe not when nested in datetimes. Is this the case? How can I parametize a datetime?

Upvotes: 1

Views: 711

Answers (1)

user3141626
user3141626

Reputation: 131

Not sure if you are still looking for an answer to this, but I had a similar problem which I have now solved.

My problem involved getting the scale of the x-axis to represent a whole 12 months, even if no data existed in, for example, December, based on the Year selected from a range control.

scale: {"domain" :[{"expr":"datetime(AnnualPeriod,0,1)"},{"expr":"datetime(AnnualPeriod,11,31)"}]}

where "AnnualPeriod" is the data field bound to the range control

"params": [{"name" : "AnnualPeriod", "value": 2019,"bind" : {"input": "range", "min":1995, "max":2020,"step":1}}],

and the data is filtered by year using this filter:

transform:[{"filter":"year(datum.date_of_transfer)===AnnualPeriod"}],

The bit that I think will help you is:

{"expr":"datetime(AnnualPeriod,0,1)"}

where AnnualPeriod is equivalent to your lowYear and the month is 0 for January and 1 is the 1st.

so yours should read:

"gte": {"expr":"datetime(lowYear,1,20)"}

Note the zero based array for months. 1 = Feb.

Upvotes: 0

Related Questions