R highchart xrange charts for 24hour time period

Question

I have referred to the example for xrange charts from this link https://jkunst.com/highcharter/articles/highcharts.html.

My x-axis for xrange chart is within a day (24hr period) unlike the original example.

The graph doesn't reflect time correctly according to data. Any thoughts on how to fix this?

library(data.table)
library(lubridate)
library(highcharter)

N <- 7

DT <- data.table(start = c("2023-09-04 05:45:01 CST","2023-09-04 06:28:17 CST",
     "2023-09-04 06:51:39 CST","2023-09-04 07:25:30 CST","2023-09-04 08:20:13 CST",
     "2023-09-04 09:20:41 CST","2023-09-04 09:34:33 CST"),
             end = c("2023-09-04 07:10:38 CST","2023-09-04 07:38:01 CST",
      "2023-09-04 08:35:34 CST","2023-09-04 08:48:26 CST","2023-09-04 09:29:07 CST",
      "2023-09-04 10:30:34 CST","2023-09-04 10:53:42 CST"),
             methods =  c("Prototyping", "Development","Testing", "Validation", 
                         "Modelling","Prototyping","Development"),
             cat = rep(1:5, length.out = N) - 1, progress = round(stats::runif(N), 1))%>%
      mutate(StDay_Time = 
            as.numeric(as.POSIXct(start,
                    format="%Y-%m-%d %H:%M:%S",tz="Asia/Taipei"))*1000)%>%
      mutate(EnDay_Time = 
            as.numeric(as.POSIXct(end,format="%Y-%m-%d  %H:%M:%S",tz="Asia/Taipei"))*1000)

     hchart(DT,"xrange",
        hcaes(x = StDay_Time, x2 = EnDay_Time, y = cat,partialFill = progress),
        dataLabels = list(enabled = TRUE))%>% 
        hc_xAxis(title = FALSE,type = "datetime")%>% 
        hc_yAxis(title = FALSE,categories = DT$methods)

I believe there might be some issue with formatting of my data to suit x-axis timeline for high charts. Maybe it is not formatted correctly as per time zones or according UNIX timestamp.

Appreciate any help possible....Thanks

Answer 1

If you're referring to the fact that the times are being displayed incorrectly (e.g., with a timezone shift), this might be due to the highcharter package's conversion of times to UTC.

Let's try the following approach:

1. When converting the date to POSIXct format, use tz = "UTC" to ensure the dates are treated as UTC times.
2. Set the formatting of the X-axis to utilize the date format "%Y-%m-%d %H:%M:%S", so it displays the full date and time without milliseconds.

Here's the modified code:

library(data.table)
library(lubridate)
library(highcharter)

N <- 7

DT <- data.table(
  start = c("2023-09-04 05:45:01 CST","2023-09-04 06:28:17 CST",
            "2023-09-04 06:51:39 CST","2023-09-04 07:25:30 CST",
            "2023-09-04 08:20:13 CST","2023-09-04 09:20:41 CST",
            "2023-09-04 09:34:33 CST"),
  end = c("2023-09-04 07:10:38 CST","2023-09-04 07:38:01 CST",
          "2023-09-04 08:35:34 CST","2023-09-04 08:48:26 CST",
          "2023-09-04 09:29:07 CST","2023-09-04 10:30:34 CST",
          "2023-09-04 10:53:42 CST"),
  methods = c("Prototyping", "Development","Testing", "Validation", 
              "Modelling","Prototyping","Development"),
  cat = rep(1:5, length.out = N) - 1,
  progress = round(stats::runif(N), 1)
)

DT[, StDay_Time := as.numeric(as.POSIXct(start, format="%Y-%m-%d %H:%M:%S", tz="UTC"))*1000]
DT[, EnDay_Time := as.numeric(as.POSIXct(end, format="%Y-%m-%d %H:%M:%S", tz="UTC"))*1000]

hchart(DT,"xrange",
       hcaes(x = StDay_Time, x2 = EnDay_Time, y = cat,partialFill = progress),
       dataLabels = list(enabled = TRUE))%>% 
  hc_xAxis(title = FALSE,type = "datetime")%>% 
  hc_yAxis(title = FALSE,categories = DT$methods)