Vega-Lite (Clojure Oz) Parsing Local Time

Question

I'm using Vega-Lite in Clojure through Oz so the syntax below isn't a strict JSON, but hopefully you can see how the syntax maps to JSON.

I'm trying to create a very simple time-series plot where the x-axis is time in hours minutes, eg "18:00" <-- 6:00pm local time. So far I've only been able to get Vega Lite to recognize the time if I use a parser. The following code works, but it outputs to UTC time rather than local time. I can't figure out how to get Vega-Lite to parse it to local time.

Can someone please help?

(def test-plot
  {:data {:values
          [{:time "18:00" :volume 10}
           {:time "18:02" :volume 41}
           {:time "18:07" :volume 192}
           {:time "18:30" :volume 257}
           {:time "19:00" :volume 300}]
          :format {:parse {:time "utc:'%H:%M'"}}}
   :encoding {:x {:field "time" :type "temporal" :timeUnit "hoursminutes"}
              :y {:field "volume" :type "quantitative"}}
   :mark "point"})

;;; to compile and view in Clojure - Oz:
(do
  (println "calling (oz/start-server!)")
  (oz/start-server!)

  (println "calling (oz/view!)")
  (oz/view! test-plot)

  (println "calling (Thread/sleep)")
  (Thread/sleep 5000))

If I use :format {:parse {:time "utc:'%H:%M'"}}} then I get the image below, where Vega-Lite parses the time correctly and then transforms to UTC time.

If however I attempt to remove utc , eg :format {:parse {:time "'%H:%M'"}}} , then I get this image where Vega-Lite no longer parses the time correctly.

Can someone please help me figure out how to get Vega-Lite to parse the time correctly and/or how to represent time in {:data:{values...}} such that Vega-Lite can understand local time and plot with it?

Answer 1

Just provide the following :format {:parse {:time "date:'%H:%M'"}}} and you will get the chart plotted in your local time. You can refer the below config or editor :

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"time": "18:00", "volume": 10},
      {"time": "18:02", "volume": 41},
      {"time": "18:07", "volume": 192},
      {"time": "18:30", "volume": 257},
      {"time": "19:00", "volume": 300}
    ],
    "format": {"parse": {"time": "date:'%H:%M'"}}
  },
  "encoding": {
    "x": {"field": "time", "type": "temporal", "timeUnit": "hoursminutes"},
    "y": {"field": "volume", "type": "quantitative"}
  },
  "mark": "point"
}