CODEWITHSUNDEEP
vega-litedeneb
CBO
CBO

Reputation: 11

Change my x-axis domain by using a calculated value in vega-lite (deneb)

I am currently creating a temporal bar chart to display a sequence of events by geographical locations. This chart shows events from the selected operating day using a slicer on operating day in PowerBI page. The time scale should run from the selected day at 5 a.m. until the following day at 5 a.m. Here's the code I've managed to write so far. Now, I'd like to adapt it so that the year, month, and day defined in domainMin and domainMax are determined based on the operating_day field in my table (which corresponds to the operating day selected by the user). Do you have any ideas on how to do this, please?

I've thought about using parameters, but I'm just getting started with Vega-Lite, and I'm not sure how to use them effectively.

enter image description here

{
  "data": {"name": "dataset"},
  
  "mark": {
    "type": "bar", 
    "tooltip": true
  },
  
  "encoding":{
    "y": {
      "field": "POI",
      "type": "nominal"
    },
    "x": {
      "field": "Start",
      "type": "temporal",
      "axis": {
        "labelAlign": "center",
        "labelExpr":"timeFormat(datum.value, '%H:%M')"
      },
      "scale": {
        "domainMin": {"year": 2024, "month": 7, "date": 28, "hours": 5},
        "domainMax": {"year": 2024, "month": 7, "date": 29, "hours": 5}
      }
    },
    "x2": {
      "field": "End"
    },
   "color": {
     "field": "Type",
     "type": "nominal",
     "legend": null,
     "scale": {
       "domain": ["A", "B", "C"],
       "range": ["#007D44", "#F39224", "#C52625"]
     }
    }
  }
}

Upvotes: 0

Views: 155

Answers (1)

APB Reports
APB Reports

Reputation: 2451

I would have created a measure to capture a operating_day_filter and format it as:

"YYYY-MM-DD" for example.

Then pass this to Deneb and apply a filter under your data section:

"data": {"name": "dataset"},
"transform": [
    {"filter": "utcFormat(datum.start, '%Y-%m-%d') === datum.operating_day_filter"},
  ],

You can hard-code a test like this:

{"filter": "utcFormat(datum.start, '%Y-%m-%d') === '2023-06-03'"},

Upvotes: 0

Related Questions