diff --git a/inst/examples-input/selection/app.R b/inst/examples-input/selection/app.R index a42ff5d..572bb30 100644 --- a/inst/examples-input/selection/app.R +++ b/inst/examples-input/selection/app.R @@ -41,7 +41,6 @@ server <- function(input, output, session) { output$chart2 <- renderApexchart({ apex(iris, aes(Sepal.Length, Sepal.Width), type = "scatter") %>% - ax_chart(zoom = list(type = "xy")) %>% set_input_selection("selection_scatter", type = "xy") }) output$result2 <- renderPrint({ diff --git a/inst/htmlwidgets/apexcharter.js b/inst/htmlwidgets/apexcharter.js index 96f3e42..bbb8a70 100644 --- a/inst/htmlwidgets/apexcharter.js +++ b/inst/htmlwidgets/apexcharter.js @@ -91,9 +91,9 @@ HTMLWidgets.widget({ if (x.shinyEvents.selection.type == "x") { selectionValue = {x: xaxis.xaxis}; } 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") { - selectionValue = {y: xaxis.yaxis}; + selectionValue = {y: getYaxis(xaxis)}; } Shiny.setInputValue(id, selectionValue); }; @@ -218,8 +218,13 @@ function getSelection(chartContext, selectedDataPoints, serieIndex) { function getYaxis(axis) { var yzoom = { min: null, max: null }; - if (typeof axis.yaxis != "undefined" && axis.yaxis !== null && axis.yaxis.length > 0) { - var y_axis = axis.yaxis[0]; + if (typeof axis.yaxis != "undefined" && axis.yaxis !== null) { + 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") { yzoom.min = y_axis.min; } diff --git a/vignettes/shiny-integration.Rmd b/vignettes/shiny-integration.Rmd index 6a52ca0..f4b0757 100644 --- a/vignettes/shiny-integration.Rmd +++ b/vignettes/shiny-integration.Rmd @@ -47,7 +47,7 @@ apex(..., auto_update = config_update(update_options = TRUE)) ### 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} 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. If you want to update chart's options, use : @@ -94,10 +94,10 @@ data.frame( ) %>% apex(aes(month, value), height = "250px") %>% 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 : @@ -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} @@ -120,7 +120,7 @@ data.frame( apex(aes(month, value), height = "250px") %>% ax_title("Click several bars:") %>% set_input_click( - inputId = "month_click", + inputId = "click", multiple = TRUE, effect_value = 0.1 ) @@ -144,10 +144,10 @@ 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_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} list( @@ -171,3 +171,65 @@ More examples are available with: 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") +```