added selection in vignette shiny
This commit is contained in:
parent
7312588c47
commit
8238c0709e
|
@ -41,7 +41,6 @@ server <- function(input, output, session) {
|
||||||
|
|
||||||
output$chart2 <- renderApexchart({
|
output$chart2 <- renderApexchart({
|
||||||
apex(iris, aes(Sepal.Length, Sepal.Width), type = "scatter") %>%
|
apex(iris, aes(Sepal.Length, Sepal.Width), type = "scatter") %>%
|
||||||
ax_chart(zoom = list(type = "xy")) %>%
|
|
||||||
set_input_selection("selection_scatter", type = "xy")
|
set_input_selection("selection_scatter", type = "xy")
|
||||||
})
|
})
|
||||||
output$result2 <- renderPrint({
|
output$result2 <- renderPrint({
|
||||||
|
|
|
@ -91,9 +91,9 @@ HTMLWidgets.widget({
|
||||||
if (x.shinyEvents.selection.type == "x") {
|
if (x.shinyEvents.selection.type == "x") {
|
||||||
selectionValue = {x: xaxis.xaxis};
|
selectionValue = {x: xaxis.xaxis};
|
||||||
} else if (x.shinyEvents.selection.type == "xy") {
|
} else if (x.shinyEvents.selection.type == "xy") {
|
||||||
selectionValue = {x: xaxis.xaxis, y: xaxis.yaxis};
|
selectionValue = {x: xaxis.xaxis, y: getYaxis(xaxis)};
|
||||||
} else if (x.shinyEvents.selection.type == "y") {
|
} else if (x.shinyEvents.selection.type == "y") {
|
||||||
selectionValue = {y: xaxis.yaxis};
|
selectionValue = {y: getYaxis(xaxis)};
|
||||||
}
|
}
|
||||||
Shiny.setInputValue(id, selectionValue);
|
Shiny.setInputValue(id, selectionValue);
|
||||||
};
|
};
|
||||||
|
@ -218,8 +218,13 @@ function getSelection(chartContext, selectedDataPoints, serieIndex) {
|
||||||
|
|
||||||
function getYaxis(axis) {
|
function getYaxis(axis) {
|
||||||
var yzoom = { min: null, max: null };
|
var yzoom = { min: null, max: null };
|
||||||
if (typeof axis.yaxis != "undefined" && axis.yaxis !== null && axis.yaxis.length > 0) {
|
if (typeof axis.yaxis != "undefined" && axis.yaxis !== null) {
|
||||||
var y_axis = axis.yaxis[0];
|
var y_axis;
|
||||||
|
if (axis.yaxis.hasOwnProperty("min")) {
|
||||||
|
y_axis = axis.yaxis;
|
||||||
|
} else {
|
||||||
|
y_axis = axis.yaxis[0];
|
||||||
|
}
|
||||||
if (y_axis.hasOwnProperty("min") && typeof y_axis.min != "undefined") {
|
if (y_axis.hasOwnProperty("min") && typeof y_axis.min != "undefined") {
|
||||||
yzoom.min = y_axis.min;
|
yzoom.min = y_axis.min;
|
||||||
}
|
}
|
||||||
|
|
|
@ -47,7 +47,7 @@ apex(..., auto_update = config_update(update_options = TRUE))
|
||||||
|
|
||||||
### Proxy
|
### Proxy
|
||||||
|
|
||||||
A proxy is also implemented to update charts manually in oberserver. You can update data:
|
A proxy is also implemented to update charts manually server-side. You can update data:
|
||||||
|
|
||||||
```{r}
|
```{r}
|
||||||
output$my_chart <- renderApexchart({
|
output$my_chart <- renderApexchart({
|
||||||
|
@ -60,7 +60,7 @@ observeEvent(input$update, {
|
||||||
})
|
})
|
||||||
```
|
```
|
||||||
|
|
||||||
Be sure to use `shiny::isolate()` to block any reactivity in `renderApexchart` function and to set `auto_update` to FALSE te prevevnt updating twice.
|
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.
|
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 :
|
If you want to update chart's options, use :
|
||||||
|
@ -94,10 +94,10 @@ data.frame(
|
||||||
) %>%
|
) %>%
|
||||||
apex(aes(month, value), height = "250px") %>%
|
apex(aes(month, value), height = "250px") %>%
|
||||||
ax_title("Click a bar:") %>%
|
ax_title("Click a bar:") %>%
|
||||||
set_input_click("month_click")
|
set_input_click("click")
|
||||||
```
|
```
|
||||||
|
|
||||||
Value server-side will be available through `input$month_click`.
|
Value server-side will be available through `input$click`.
|
||||||
|
|
||||||
Depending on the type of graphic, you can retrieve :
|
Depending on the type of graphic, you can retrieve :
|
||||||
|
|
||||||
|
@ -109,7 +109,7 @@ Depending on the type of graphic, you can retrieve :
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Multiple slection is possible and you can change the darken effect of selected bars :
|
Multiple selection is possible and you can change the darken effect of selected bars :
|
||||||
|
|
||||||
|
|
||||||
```{r, eval=TRUE}
|
```{r, eval=TRUE}
|
||||||
|
@ -120,7 +120,7 @@ data.frame(
|
||||||
apex(aes(month, value), height = "250px") %>%
|
apex(aes(month, value), height = "250px") %>%
|
||||||
ax_title("Click several bars:") %>%
|
ax_title("Click several bars:") %>%
|
||||||
set_input_click(
|
set_input_click(
|
||||||
inputId = "month_click",
|
inputId = "click",
|
||||||
multiple = TRUE,
|
multiple = TRUE,
|
||||||
effect_value = 0.1
|
effect_value = 0.1
|
||||||
)
|
)
|
||||||
|
@ -144,10 +144,10 @@ Retrieve the coordinates of the axes when the graph is zoomed in:
|
||||||
```{r, eval=TRUE}
|
```{r, eval=TRUE}
|
||||||
data("economics", package = "ggplot2")
|
data("economics", package = "ggplot2")
|
||||||
apex(economics, aes(date, psavert), type = "line", height = "250px") %>%
|
apex(economics, aes(date, psavert), type = "line", height = "250px") %>%
|
||||||
set_input_zoom("zoom_ts")
|
set_input_zoom("zoom")
|
||||||
```
|
```
|
||||||
|
|
||||||
Value server-side will be available through `input$zoom_ts` unde the form :
|
Value server-side will be available through `input$zoom` under the form :
|
||||||
|
|
||||||
```{r, echo=FALSE, eval=TRUE}
|
```{r, echo=FALSE, eval=TRUE}
|
||||||
list(
|
list(
|
||||||
|
@ -171,3 +171,65 @@ More examples are available with:
|
||||||
run_input_demo("zoom")
|
run_input_demo("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_input_demo("selection")
|
||||||
|
```
|
||||||
|
|
Loading…
Reference in New Issue