CODEWITHSUNDEEP
parametersbar-chartvega-lite
az5112
az5112

Reputation: 642

How to parameterise the timeUnit in Vega-Lite?

I have created a simple bar chart that shows counts per time period. In the next step I want to make the time period configurable. I have added a params block and defined parameter aggWindow. This adds a select box to the chart.

How should I propagate the selected value of the parameter so that it gets reflected in the chart? I was hoping changing

  "timeUnit": "date"

to

  "timeUnit" : {"param": "aggWindow"}

would do the trick but this syntax appears illegal.

Here is a link to the chart.

A similar example is available here but it uses Vega, not Vega-lite.

Upvotes: 1

Views: 530

Answers (1)

wahab memon
wahab memon

Reputation: 2416

I have tried to transform the date field using timeUnitSpecifier and used it as a nominal field for x-axis, this seems to convert and use my timeunits properly from params. I didn't find any expr which will support the timeUnit config. But my example is not temporal, so there won't be any continuous axis.

Below is the config or refer the editor sample:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "...",
  "width": 400,
  "height": 300,
  "padding": 5,
  "data": {
    "values": [
      {"opened": "2021-01-12 11:11:12"},
      {"opened": "2021-01-13 11:11:02"},
      {"opened": "2021-01-14 01:11:54"},
      {"opened": "2021-02-12 01:11:34"},
      {"opened": "2021-02-18 02:11:02"},
      {"opened": "2021-02-22 03:31:10"},
      {"opened": "2021-03-07 04:35:32"},
      {"opened": "2021-03-21 11:31:54"},
      {"opened": "2021-03-22 11:36:22"},
      {"opened": "2021-03-29 01:35:52"}
    ]
  },
  "params": [
    {
      "name": "aggWindow",
      "value": "date",
      "bind": {
        "name": "Time period ",
        "input": "select",
        "options": [["month","date"], "date", "week", "month"]
      }
    }
  ],
  "transform": [
    {
      "calculate": "timeFormat(time(datum.opened), timeUnitSpecifier(aggWindow))",
      "as": "convertedDate"
    }
  ],
  "mark": "bar",
  "encoding": {
    "x": {"field": "convertedDate", "type": "nominal"},
    "y": {"aggregate": "count", "type": "quantitative"}
  }
}

Upvotes: 1

Related Questions