Date-time formatting

library(chartjs4r)
library(ggplot2) # cross comparisons

Introduction

Chartjs does not ship with a date formatter, and relies on extensions. This package has included chartjs-adapter-date-fns(https://github.com/chartjs/chartjs-adapter-date-fns), which comes from https://date-fns.org/ . Finding the format page of latter’s doc is essential. Here are some examples.

The scatter example data, ships with a date column, with random values within the month of January 2023.

cjs_example_data('scatter')
#>      x_numbers     x_time  y_numbers group
#> 1  0.080750138 2024-10-19 0.03123033    g1
#> 2  0.834333037 2024-11-08 0.22556253    g1
#> 3  0.600760886 2024-10-29 0.30083081    g1
#> 4  0.157208442 2024-10-27 0.63646561    g1
#> 5  0.007399441 2024-10-16 0.47902455    g1
#> 6  0.466393497 2024-10-25 0.43217126    g1
#> 7  0.497777389 2024-11-03 0.70643384    g1
#> 8  0.289767245 2024-11-07 0.94857658    g1
#> 9  0.732881987 2024-10-26 0.18033877    g1
#> 10 0.772521511 2024-11-05 0.21689988    g1
#> 11 0.874600661 2024-11-04 0.68016292    g1
#> 12 0.174940627 2024-10-20 0.49884561    g1

Since the function always returns random dates, we’ll hard set them by creating an object

time_data <- cjs_example_data('scatter')

The two thing to look out for with time scales in chartjs are the parameters - time.unit and time.displayFormats.

time_data %>% 
  chartjs() %>% 
  cjs_add_bars(x = x_time, y = y_numbers) %>% 
  cjs_scale_datetime(id = 'x', time.unit = 'day')

We use time.displayFormats to format dates - search https://date-fns.org for date formats (at time of writing https://date-fns.org/v2.29.3/docs/format).

time_data %>% 
  chartjs() %>% 
  cjs_add_bars(x = x_time, y = y_numbers) %>% 
  cjs_scale_datetime(id = 'x', time.unit = 'day', time.displayFormats = 'dd/MM/yyyy')

time_data %>% 
  chartjs() %>% 
  cjs_add_bars(x = x_time, y = y_numbers) %>% 
  cjs_scale_datetime(id = 'x', time.unit = 'day', time.displayFormats = 'do LLL yyyy')

time_data %>% 
  chartjs() %>% 
  cjs_add_bars(x = x_time, y = y_numbers) %>% 
  cjs_scale_datetime(id = 'x', time.unit = 'day', time.displayFormats = 'EEEE')

time_data %>% 
  chartjs() %>% 
  cjs_add_bars(x = x_time, y = y_numbers) %>% 
  cjs_scale_datetime(id = 'x', time.unit = 'month', time.displayFormats = 'LLLL yyyy')

# 12 rows exist, create a monthly data set
time_data2 <- time_data 
time_data2$x_time <- seq.Date(from = as.Date('2023-01-01'), to = as.Date('2023-12-01'), by = 'month')

time_data2 %>% 
  chartjs() %>% 
  cjs_add_bars(x = x_time, y = y_numbers) %>% 
  cjs_scale_datetime(id = 'x', time.unit = 'month', time.displayFormats = 'LLLL yyyy')

Times

Default

# 12 rows exist, create a hourly data
time_data2$x_time <- sample(size = 12, x = seq.POSIXt(from = as.POSIXct('2023-01-01 00:00:01'), to = as.POSIXct('2023-01-01 23:59:59'), by = 'hour'))

time_data2 %>% 
  chartjs() %>% 
  cjs_add_bars(x = x_time, y = y_numbers) %>% 
  cjs_scale_datetime(id = 'x', time.unit = 'hour')

time_data2 %>% 
  chartjs() %>% 
  cjs_add_bars(x = x_time, y = y_numbers) %>% 
  cjs_scale_datetime(id = 'x', time.unit = 'hour', time.displayFormats = 'HHmm')

time_data2 %>% 
  chartjs() %>% 
  cjs_add_bars(x = x_time, y = y_numbers) %>% 
  cjs_scale_datetime(id = 'x', time.unit = 'hour', time.displayFormats = 'h:mm a')