brush chart example

NAMESPACE

@@ -36,6 +36,7 @@ export(ax_yaxis2)
 export(bar_opts)
 export(config_update)
 export(events_opts)
+export(format_date)
 export(format_num)
 export(heatmap_opts)
 export(parse_df)

R/format.R

@@ -38,3 +38,26 @@ check_locale <- function(x) {
   }
 }
 
+
+
+
+#' Format date in JS
+#'
+#' @param x Date to use in JavaScript
+#'
+#' @return a JavaScript string
+#' @export
+#'
+format_date <- function(x) {
+  stopifnot(length(x) == 1)
+  JS(sprintf("new Date('%s').getTime()", x))
+}
+
+
+
+
+
+
+
+
+

man/format_date.Rd

@@ -0,0 +1,17 @@
+% Generated by roxygen2: do not edit by hand
+% Please edit documentation in R/format.R
+\name{format_date}
+\alias{format_date}
+\title{Format date in JS}
+\usage{
+format_date(x)
+}
+\arguments{
+\item{x}{Date to use in JavaScript}
+}
+\value{
+a JavaScript string
+}
+\description{
+Format date in JS
+}

vignettes/sync-charts.Rmd

@@ -17,19 +17,19 @@ knitr::opts_chunk$set(
 ```{r setup}
 library(apexcharter)
 data("economics", package = "ggplot2")
-economics <- tail(economics, 150)
 ```
 
 
+## Sync charts
+
 With [Apexcharts](https://apexcharts.com) you can sync (tooltip, zoom) several charts together by providing a group and id to each charts. This works in Shiny and Markdown. Here a basic example :
 
 ```{r example-1, eval=FALSE}
 apex(
-  data = economics, 
+  data = tail(economics, 150), 
   mapping = aes(x = date, y = pce),
   type = "line"
 ) %>% 
-  ax_stroke(width = 2) %>% 
   ax_chart(
     group = "economics", id = "pce" # <- define common group and unique id
   ) %>% 
@@ -40,11 +40,10 @@ apex(
   )
 
 apex(
-  data = economics, 
+  data = tail(economics, 150), 
   mapping = aes(x = date, y = psavert),
   type = "line"
 ) %>% 
-  ax_stroke(width = 2) %>% 
   ax_chart(
     group = "economics", id = "psavert" # <- define common group and unique id
   ) %>% 
@@ -59,3 +58,51 @@ apex(
 ```{r run-example-1, echo=FALSE, ref.label="example-1"}
 
 ```
+
+
+
+## Brush chart
+
+Create a brush chart to navigate into a synced chart.
+
+```{r example-2, eval=FALSE}
+apex(
+  data = economics, 
+  mapping = aes(x = date, y = psavert),
+  type = "line"
+) %>% 
+  ax_chart(
+    id = "target-chart",
+    toolbar = list(
+      autoSelected = "pan",
+      show = FALSE
+    )
+  )
+
+apex(
+  data = economics, 
+  mapping = aes(x = date, y = psavert),
+  type = "line", 
+  height = "130px"
+) %>% 
+  ax_chart(
+    brush = list(
+      target = "target-chart",
+      enabled = TRUE
+    ),
+    selection = list(
+      enabled = TRUE,
+      xaxis = list(
+        min = format_date(economics$date[1]),
+        max = format_date(economics$date[100])
+      )
+    )
+  ) %>% 
+  ax_xaxis(labels = list(show = FALSE)) %>% 
+  ax_yaxis(labels = list(show = FALSE))
+```
+
+
+```{r run-example-2, echo=FALSE, ref.label="example-2"}
+
+```