Preserve heights order of the rectangles when I use time based axis

I am working on this project where I defined the following scales as follows:

  "scales": [
    {
      "name": "xtime",
      "type": "band",
      "range":"width",
      "round": true,
      "domain": {"data": "events", "field": "hr"}
    },
    {
      "name": "txtheight",
      "type": "ordinal",
      "domain": {"data": "events", "field": "hr"},
      "range": [20,	60,	180,	220, 100,	140,	260,	300,	420,	460,	340,	380]
    }
  ],

and the following mark

{
  "type": "rect",
  "from": {"data": "events"},
  "encode": {
    "enter": {
      "x": {"scale": "xtime","field": "hr"},
      "y": {"value": 0},
      "width": {"value": 2},
      "height": {"scale": "txtheight", "field": "hr"},
      "fill": {"scale": "colourScale22", "field": "_source.info"},
      "opacity": {"value": 0.8},
    }
  }
}

hr is defined as follows:

"transform":[
  {"type": "formula", "as": "hr", "expr": "toDate(datum._source['time'])"}]

When I use xtime scales as band type I got the following result

But I want the x axis time based so when I change xtime type into time I got the following

I want to preserve the heights order of the rectangles when I use time based axis. Any help would be appreciated

Issa,

The band scale is correct. You just need to adjust the presentation of the dates. In your axes for the x axis, you can add in:
"encode": {"labels": {"update": {"text": {"signal": "timeFormat(datum.hr, '%x')"}}}}}

Pending how you set your time, you can also run it as utcFormat. For a listing of date/time formats, please reference https://github.com/d3/d3-time-format#locale_format.

Please let me know if that works or not.

Hello I am sorry for the late reply. Unfortunately it didn't work :confused:

Issa,

Can you please be more specific as to what you tried? What specifically did not work?

Thanks!

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.