Date-time formatting • chartjs4r

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.83402937 2023-02-13 0.1551009889    g1
#> 2  0.27147542 2023-02-04 0.4365978106    g1
#> 3  0.89344833 2023-02-02 0.9137591305    g1
#> 4  0.37179486 2023-02-23 0.0008011328    g1
#> 5  0.07965494 2023-02-20 0.1175631576    g1
#> 6  0.36253009 2023-01-31 0.5691020410    g1
#> 7  0.68917052 2023-02-15 0.5365596123    g1
#> 8  0.38948298 2023-02-19 0.2258288877    g1
#> 9  0.05970637 2023-02-06 0.4032682264    g1
#> 10 0.04238823 2023-02-11 0.9417056397    g1
#> 11 0.04543882 2023-02-14 0.0388654252    g1
#> 12 0.20006293 2023-02-03 0.3361993385    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')