brush chart example
This commit is contained in:
parent
a0ec017373
commit
8a3bf8d6e8
|
@ -36,6 +36,7 @@ export(ax_yaxis2)
|
||||||
export(bar_opts)
|
export(bar_opts)
|
||||||
export(config_update)
|
export(config_update)
|
||||||
export(events_opts)
|
export(events_opts)
|
||||||
|
export(format_date)
|
||||||
export(format_num)
|
export(format_num)
|
||||||
export(heatmap_opts)
|
export(heatmap_opts)
|
||||||
export(parse_df)
|
export(parse_df)
|
||||||
|
|
23
R/format.R
23
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))
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
}
|
|
@ -17,19 +17,19 @@ knitr::opts_chunk$set(
|
||||||
```{r setup}
|
```{r setup}
|
||||||
library(apexcharter)
|
library(apexcharter)
|
||||||
data("economics", package = "ggplot2")
|
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 :
|
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}
|
```{r example-1, eval=FALSE}
|
||||||
apex(
|
apex(
|
||||||
data = economics,
|
data = tail(economics, 150),
|
||||||
mapping = aes(x = date, y = pce),
|
mapping = aes(x = date, y = pce),
|
||||||
type = "line"
|
type = "line"
|
||||||
) %>%
|
) %>%
|
||||||
ax_stroke(width = 2) %>%
|
|
||||||
ax_chart(
|
ax_chart(
|
||||||
group = "economics", id = "pce" # <- define common group and unique id
|
group = "economics", id = "pce" # <- define common group and unique id
|
||||||
) %>%
|
) %>%
|
||||||
|
@ -40,11 +40,10 @@ apex(
|
||||||
)
|
)
|
||||||
|
|
||||||
apex(
|
apex(
|
||||||
data = economics,
|
data = tail(economics, 150),
|
||||||
mapping = aes(x = date, y = psavert),
|
mapping = aes(x = date, y = psavert),
|
||||||
type = "line"
|
type = "line"
|
||||||
) %>%
|
) %>%
|
||||||
ax_stroke(width = 2) %>%
|
|
||||||
ax_chart(
|
ax_chart(
|
||||||
group = "economics", id = "psavert" # <- define common group and unique id
|
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"}
|
```{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"}
|
||||||
|
|
||||||
|
```
|
Loading…
Reference in New Issue