236 lines
5.1 KiB
Plaintext
236 lines
5.1 KiB
Plaintext
---
|
|
title: "Use in Shiny application"
|
|
output: rmarkdown::html_vignette
|
|
vignette: >
|
|
%\VignetteIndexEntry{Use in Shiny application}
|
|
%\VignetteEngine{knitr::rmarkdown}
|
|
%\VignetteEncoding{UTF-8}
|
|
---
|
|
|
|
```{r, include = FALSE}
|
|
options(rmarkdown.html_vignette.check_title = FALSE)
|
|
knitr::opts_chunk$set(
|
|
collapse = TRUE,
|
|
comment = "#>",
|
|
eval = FALSE
|
|
)
|
|
```
|
|
|
|
```{r, eval=TRUE}
|
|
library(apexcharter)
|
|
```
|
|
|
|
## Charts
|
|
|
|
### Create and update (or destroy and re-create)
|
|
|
|
When a graph has been generated in Shiny, if the values change (via a reactive function), the graph is *not regenerated*, only the data is *updated*. If you have changed specific options in the graphic (such as maximum y axis value, chart's title, ...) these will not be updated. This behavior can be controlled with `auto_update` argument (available in `apexchart()` and `apex()`) :
|
|
|
|
By default, `auto_update` is `TRUE` :
|
|
|
|
```{r}
|
|
apex(..., auto_update = TRUE)
|
|
```
|
|
|
|
If you want to re-create the whole chart, set the option to `FALSE`:
|
|
|
|
```{r}
|
|
apex(..., auto_update = FALSE)
|
|
```
|
|
|
|
You can also use `config_update()` to specify what to update :
|
|
|
|
```{r}
|
|
apex(..., auto_update = config_update(update_options = TRUE))
|
|
```
|
|
|
|
|
|
### Proxy
|
|
|
|
A proxy is also implemented to update charts manually server-side. You can update data:
|
|
|
|
```{r}
|
|
output$my_chart <- renderApexchart({
|
|
apex(data = isolate(data_reactive()), ..., auto_update = FALSE)
|
|
})
|
|
|
|
observeEvent(input$update, {
|
|
apexchartProxy("my_chart") %>%
|
|
ax_proxy_series(data_reactive())
|
|
})
|
|
```
|
|
|
|
Be sure to use `shiny::isolate()` to block any reactivity in `renderApexchart` function and to set `auto_update` to FALSE to prevent updating twice.
|
|
Then you can use in an observe function (or any reactive function) `apexchartProxy()` with the output id to get the chart instance and `ax_proxy_series()` to update data.
|
|
|
|
If you want to update chart's options, use :
|
|
|
|
```{r}
|
|
observeEvent(input$update, {
|
|
apexchartProxy("my_chart") %>%
|
|
ax_proxy_options(list(
|
|
title = list(
|
|
text = "New title"
|
|
),
|
|
xaxis = list(
|
|
max = NEW_VALUE
|
|
)
|
|
))
|
|
})
|
|
```
|
|
|
|
|
|
|
|
## Interactions
|
|
|
|
### Click
|
|
|
|
Click on a chart to select a data point and retrieve value server side with `set_input_click()` :
|
|
|
|
```{r, eval=TRUE}
|
|
data.frame(
|
|
month = month.abb,
|
|
value = sample(1:100, 12)
|
|
) %>%
|
|
apex(aes(month, value), height = "250px") %>%
|
|
ax_title("Click a bar:") %>%
|
|
set_input_click("click")
|
|
```
|
|
|
|
Value server-side will be available through `input$click`.
|
|
|
|
Depending on the type of graphic, you can retrieve :
|
|
|
|
* **bar and column:** category (x-axis).
|
|
* **pie and donut:** label.
|
|
* **time-series:** retrieve x-axis value, you have to display markers
|
|
with size > 0 and set tooltip's options `intersect = TRUE` and `shared = FALSE`.
|
|
* **scatter:** retrieve XY coordinates.
|
|
|
|
|
|
|
|
Multiple selection is possible and you can change the darken effect of selected bars :
|
|
|
|
|
|
```{r, eval=TRUE}
|
|
data.frame(
|
|
month = month.abb,
|
|
value = sample(1:100, 12)
|
|
) %>%
|
|
apex(aes(month, value), height = "250px") %>%
|
|
ax_title("Click several bars:") %>%
|
|
set_input_click(
|
|
inputId = "click",
|
|
multiple = TRUE,
|
|
effect_value = 0.1
|
|
)
|
|
```
|
|
|
|
|
|
|
|
More examples are available with:
|
|
|
|
```{r}
|
|
run_demo_input("click")
|
|
```
|
|
|
|
|
|
|
|
|
|
### Zoom
|
|
|
|
Retrieve the coordinates of the axes when the graph is zoomed in:
|
|
|
|
```{r, eval=TRUE}
|
|
data("economics", package = "ggplot2")
|
|
apex(economics, aes(date, psavert), type = "line", height = "250px") %>%
|
|
set_input_zoom("zoom")
|
|
```
|
|
|
|
Value server-side will be available through `input$zoom` under the form :
|
|
|
|
```{r, echo=FALSE, eval=TRUE}
|
|
list(
|
|
x = list(
|
|
min = "1981-10-24 15:41:16 UTC",
|
|
max = "1992-01-24 06:40:22 UTC"
|
|
),
|
|
y = list(
|
|
min = NULL,
|
|
max = NULL
|
|
)
|
|
)
|
|
```
|
|
|
|
Here values for `y` are `NULL` because zoom is only possible on x-axis, but for a scatter chart for example you can zoom on both axis.
|
|
|
|
|
|
More examples are available with:
|
|
|
|
```{r}
|
|
run_demo_input("zoom")
|
|
```
|
|
|
|
|
|
|
|
### Selection
|
|
|
|
Retrieve the coordinates of the axes when user select an area on a chart (without zooming):
|
|
|
|
```{r, eval=TRUE}
|
|
apex(economics, aes(date, psavert), type = "line", height = "250px") %>%
|
|
set_input_selection("selection")
|
|
```
|
|
|
|
Value server-side will be available through `input$selection` under the form :
|
|
|
|
```{r, echo=FALSE, eval=TRUE}
|
|
list(
|
|
x = list(
|
|
min = "1981-10-24 15:41:16 UTC",
|
|
max = "1992-01-24 06:40:22 UTC"
|
|
)
|
|
)
|
|
```
|
|
|
|
You can define a selected area at start:
|
|
|
|
```{r, eval=TRUE}
|
|
apex(economics, aes(date, psavert), type = "line", height = "250px") %>%
|
|
set_input_selection(
|
|
inputId = "selection",
|
|
xmin = format_date("1980-01-01"),
|
|
xmax = format_date("1985-01-01")
|
|
)
|
|
```
|
|
|
|
|
|
Above selection is only made possible on x-axis, but in case of scatter chart for example, you can select a rectangle (both axis):
|
|
|
|
```{r, eval=TRUE}
|
|
apex(iris, aes(Sepal.Length, Sepal.Width), type = "scatter", height = "250px") %>%
|
|
set_input_selection("selection_scatter", type = "xy")
|
|
```
|
|
|
|
In this case, input value will look like this:
|
|
|
|
```{r, echo=FALSE, eval=TRUE}
|
|
list(
|
|
x = list(
|
|
min = 5.130187,
|
|
max = 5.541228
|
|
),
|
|
y = list(
|
|
min = 2.959623,
|
|
max = 3.860357
|
|
)
|
|
)
|
|
```
|
|
|
|
|
|
More examples are available with:
|
|
|
|
```{r}
|
|
run_demo_input("selection")
|
|
```
|