How to display my chart from highcharter package correctly in my blogdown site? website available

Question

I have a website that I created using the R package blogdown, which in turn is built on the Hugo framework. This website allows me to post R markdown files. The issue is the following: I need the interactive graph I created in R using the highcharter package to be displayed in my post. When I execute the R markdown file, it is displayed normally, but when I ask blogdown to serve the site at localhost:1234, the space where the graph should be displayed is blank. However, I asked blogdown to build the folder with the corresponding files, and when I check those folders, I see that the javascript files and others are created so that the highchart interactive graph can be displayed correctly. I uploaded it to the server, and checking in the developer option, I can see the errors that the javascript throws, which you can find at https://leonelmoreno.netlify.app/portfolio/2023-04-01-prueba-de-highchart/

and the blank space corresponds to where the interactive graph should be. I have tried creating the interactive graph separately, exporting it, and then including it in the R markdown file, but it didn't work. Also, after blogdown serves the site and builds my website with files and folders, I went to the root html file and added , but it didn't work either. I appreciate any comments or suggestions that can help me render the highcharter package graph correctly.

Answer 1

This is the solution:

---
title: Km
author: DA
date: '2023-04-02'
slug: []
draft: no 
categories:
  - R
tags:
  - R Markdown
description: This is meta description
image: images/portfolio/item1.jpg
---
```{r}
library(tidyverse)
library(ggplot2)
library(highcharter)
library(car)
library(widgetframe)
library(htmltools)

datos <- read_csv("fuel2.csv")
head(datos)
modelo <- lm(consumed ~ 0 + km, data = datos)
summary(modelo)

# Extraer los coeficientes del modelo de regresión lineal
pendiente <- coef(modelo)[1]
pendiente
# Crear una función para calcular el valor ajustado de 'consumed' basado en 'km'
# Función para calcular el valor ajustado de 'consumed' basado en 'km'
ajuste_consumo <- function(km) {
  return(pendiente * km)
}
# Crear una función para calcular el valor ajustado de 'consumed' basado en 'km', con intervalo de confianza del 95%
ajuste_consumo_con_intervalo <- function(km) {
  predicciones <- predict(modelo, newdata = data.frame(km = km), interval = "confidence")
  paste(round(predicciones[1], 2), " [", round(predicciones[2], 2), ", ", round(predicciones[3], 2), "]")
}
# Crear el gráfico interactivo
grafico_interactivo <- highchart() %>%
  hc_title(text = "Regresión Lineal: Consumo de Combustible vs. Kilómetros") %>%
  hc_subtitle(text = paste("Consumed = ", round(pendiente, 4), " * km")) %>%
  hc_xAxis(title = list(text = "Kilómetros")) %>%
  hc_yAxis(title = list(text = "Consumo de Combustible (L)")) %>%
  hc_add_series(data = datos, type = "scatter", hcaes(x = km, y = consumed),
                name = "Datos Observados") %>%
  hc_add_series(data = data.frame(km = datos$km, consumed = ajuste_consumo(datos$km)),
                type = "line", hcaes(x = km, y = consumed),
                name = "Ajuste de Regresión Lineal")
frameWidget(grafico_interactivo)
```