frappeCharts/dev/demo/demo.Rmd

---
output: js4shiny::html_document_js
---

```{r htmldeps, echo=FALSE}
library(htmltools)

tagList(
  div(id = "chart"),
  htmltools::htmlDependency(
    name = "frappe-charts",
    version = "1.3.0",
    package = "frappeCharts",
    src = "htmlwidgets/lib/frappe-charts",
    script = "frappe-charts.min.iife.js",
    all_files = TRUE
  )
)
```

```{r data}
data <- list(
  labels = rep(c("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"), 4),
  datasets = list(
    list(name = "Python", values = runif(7 * 4, 0, 50)),
    list(name = "R", values = runif(7 * 4, 0, 100))
  )
)

opts <- list(
  title = "My AwesomeR Chart",
  type = "line",
  height = 250,
  colors = c("#466683", "#44bc96"),
  data = data,
  lineOptions = list(regionFill = TRUE, hideDots = FALSE),
  axisOptions = list(xIsSeries = TRUE),
  isNavigable = TRUE
)

tags$script(
  id = "chart-opts",
  type = "application/json",
  htmlwidgets:::toJSON(opts)
)
```

```{js}
let x = document.getElementById('chart-opts')
x = JSON.parse(x.textContent)

// const data = {
//     labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
//     datasets: [
//       { name: "R", values: [18, 40, 30, 35, 8, 52, 17, -4] },
//       { name: "Python", values: [30, 50, -10, 15, 18, 32, 27, 14] }
//     ]
// }

const chart = new frappe.Chart("#chart", x)
```