Animation with Highcharter Library

[andrefpoli]

Hi I'd like to understand if it's possible to generate a gif not using ggplot but instead Highcharter when generating graphs?

I'm struggling with it since the gif file always returns a blank page. Even when I disable the default animation from highcharter charts, i get the same result.

[yulijia]

Hi, Would you mind providing a reproducible example? I think Highcharter is one of HTML widgets that creates interactively data visualisation. I feel it is difficult to create gifs based on HTML widgets via animation package.

[andrefpoli]

Hi, thanks for the response. Find Below an example.

if (!require("pacman")) install.packages("pacman")
pacman::p_load(
  "fixedincome",
  "rb3",
  "bizdays",
  "dplyr",
  "ggplot2",
  "highcharter",
  "animation"
)

#function that creates plot object

hc_plot_ft <- function(
    hc,
    title,
    subtitle,
    source,
    range     = TRUE,
    navigator = TRUE
)

{
  # create plot object
  dyh_plot <- hc %>%
    hc_title(text = title) %>%
    hc_subtitle(text = subtitle) %>%
    hc_credits(
      enabled = TRUE,
      text    = paste0("Source: ", source),
      style   = list(color ="black",fontSize = "12px")
    ) %>%
    hc_xAxis(title = FALSE,
             labels    = list(color ="black",style = list(fontSize = "12px"))
    )%>%
    hc_yAxis(
      labels    = list(color ="black",format = "{value:.2f}%",style = list(fontSize = "12px")),
      title     = FALSE,
      plotLines = list(
        list(
          value = 0,
          color = "#0D0808",
          width = 1
        )
      )
    ) %>%
    hc_tooltip(shared = TRUE) %>%
    hc_add_theme(theme_DYH_2) %>%
    hc_navigator(enabled = navigator)

  if (range) {
    dyh_plot <- dyh_plot %>%
      hc_rangeSelector(
        selected          = 4,
        enabled           = TRUE,
        allButtonsEnabled = TRUE,
        inputEnabled      = FALSE,
        dropdown          = "always"
      )
  } else dyh_plot

  dyh_plot

}

#theme used
theme_DYH_2 <- hc_theme_merge(
  hc_theme_ft_2(),
  hc_theme(
    chart = list(style = list(fontFamily = "Droid Serif", color = "#333")),
    title = list(
      style = list(fontFamily = "Droid Serif", color = "black", fontWeight = "bold"),
      align = "center"
    ),
    subtitle = list(
      style = list(fontFamily = "Droid Serif", fontWeight = "bold"),
      align = "center"
    ),
    legend = list(align = "center", verticalAlign = "bottom"),
    xAxis = list(
      align = "center",
      gridLineDashStyle = "Dot",
      gridLineWidth      = 1,
      gridLineColor      = "#CEC6B9",
      lineColor          = "#CEC6B9",
      minorGridLineColor = "#CEC6B9",
      tickColor          = "#CEC6B9",
      tickWidth          = 1
    ),
    yAxis = list(
      align = "center",
      gridLineDashStyle = "Dot",
      gridLineColor      = "#CEC6B9",
      lineColor          = "#CEC6B9",
      minorGridLineColor = "#CEC6B9",
      tickColor          = "#CEC6B9",
      tickWidth          = 1
    )
  )
)

# Colors for the plots
colors <- c(
  blue   = "#282f6b",
  red    = "#b22200",
  yellow = "#eace3f",
  green  = "#224f20",
  purple = "#5f487c",
  orange = "#b35c1e",
  turquoise  = "#419391",
  green_two  = "#839c56",
  light_blue = "#3b89bc",
  blue_ft = "#0D7680",
  marrom_ft = "#8F223A",
  grey_ft = "#505B70"
)

# FUTUROS NEGOCIADOS NA B3
df <- futures_mget(
  first_date = "2022-09-30",
  last_date = preceding(Sys.Date() - 1, "Brazil/ANBIMA")
)

# FILTRA DI FUTURO
df_di1 <- df |> filter(commodity == "DI1")

# CONVERTE CODIGO P/ MATURITY, FIXING E ACHA TAXA IMPLICITA
df_di1_futures <- df_di1 |>
  mutate(
    maturity_date = maturity2date(maturity_code),
    fixing = following(maturity_date, "Brazil/ANBIMA"),
    business_days = bizdays(refdate, fixing, "Brazil/ANBIMA"),
    adjusted_tax = round(implied_rate("discrete", business_days / 252, 100000 / price),4)
  ) |>
  filter(business_days > 0)

first_date = min(df_di1_futures$refdate)
last_date = max(df_di1_futures$refdate)

df_ft <- df_di1_futures %>%
  filter(df_di1_futures$refdate == first_date) %>%
  hchart("line", hcaes(x = business_days, y = 100*adjusted_tax), color = colors["blue_ft"]) %>%
  hc_legend(enabled  = FALSE) %>%
  hc_plot_ft(
    title     = "CURVAS PRE",
    subtitle  = "Accumulated growth rate in 4 quarters",
    source    = "B3",
    range     = FALSE,
    navigator = FALSE
  )

df_ft

# VE RANGE DE DATAS NAO DUPLICADOS
dates_d <- unique(df_di1_futures[1])
dates_d <- dates_d[-1,]

ani.record(reset = TRUE)
anim <- animation::saveGIF(
  expr ={
    df_ft <- df_di1_futures %>%
      filter(df_di1_futures$refdate == first_date) %>%
      hchart("line", hcaes(x = business_days, y = 100*adjusted_tax), color = colors["blue_ft"]) %>%
      hc_legend(enabled  = FALSE) %>%
      hc_plotOptions(series =list(animation = FALSE)) %>%
      hc_plot_ft(
        title     = "CURVAS PRE",
        subtitle  = "Accumulated growth rate in 4 quarters",
        source    = "B3",
        range     = FALSE,
        navigator = FALSE
      )

    print(df_ft)

    for(date in 1:length(dates_d[[1]])) {
      df_temp = df_di1_futures %>%
        filter(df_di1_futures$refdate == dates_d[[1]][date])

      df_ft <- df_ft %>%
        hc_add_series(df_temp,"line", hcaes(x = business_days, y = 100*adjusted_tax), color = "grey") %>%
        hc_legend(enabled  = FALSE) %>%
        hc_plotOptions(series =list(animation = FALSE)) %>%
        hc_plot_ft(
          title     = "CURVAS PRE",
          subtitle  = "Accumulated growth rate in 4 quarters",
          source    = "B3",
          range     = FALSE,
          navigator = FALSE
        )
      ani.record(reset = TRUE, replay.cur = TRUE)
      print(df_ft)
    }
  },
  #movie.name = "plot_graph",
  interval = 1.0,
  ani.height = 400,
  ani.width = 750,
  convert = "magick"
)