diff --git a/DESCRIPTION b/DESCRIPTION index 62079a2..26bcb2f 100644 --- a/DESCRIPTION +++ b/DESCRIPTION @@ -1,5 +1,5 @@ Package: apexcharter -Version: 0.0.1.920 +Version: 0.0.2.900 Title: Create Interactive Chart with the JavaScript 'ApexCharts' Library Description: Provides an 'htmlwidgets' interface to 'apexcharts.js'. Authors@R: c( diff --git a/inst/examples-proxy/bar-auto/server.R b/inst/examples-proxy/bar-auto/server.R new file mode 100644 index 0000000..a3966f6 --- /dev/null +++ b/inst/examples-proxy/bar-auto/server.R @@ -0,0 +1,32 @@ + + +library(shiny) +library(apexcharter) +library(dplyr) + +data("mpg", package = "ggplot2") + +function(input, output, session) { + + data_r <- reactive({ + mympg <- mpg %>% + filter(cty >= input$cty & year %in% input$year) %>% + count(manufacturer, year) + + if (input$keepallx) { + mympg <- left_join( + x = mpg %>% distinct(manufacturer, year), + y = mympg, + by = c("manufacturer", "year") + ) + } + + mympg + }) + + + output$chart <- renderApexchart({ + apex(data = data_r(), type = "bar", mapping = aes(x = manufacturer, y = n, fill = year)) + }) + +} diff --git a/inst/examples-proxy/bar-auto/ui.R b/inst/examples-proxy/bar-auto/ui.R new file mode 100644 index 0000000..552548c --- /dev/null +++ b/inst/examples-proxy/bar-auto/ui.R @@ -0,0 +1,40 @@ + + +library(shiny) +library(apexcharter) + + +fluidPage( + tags$h2("Update an existing chart"), + fluidRow( + column( + width = 4, + selectizeInput( + inputId = "year", + label = "year :", + choices = c("1999", "2008"), + selected = "1999", + multiple = TRUE, + options = list('plugins' = list('remove_button')) + ), + sliderInput( + inputId = "cty", + label = "cty >= x :", + min = 9, + max = 35, + value = 9 + ), + checkboxInput( + inputId = "keepallx", + label = "Keep all x", + value = FALSE + ) + ), + column( + width = 8, + apexchartOutput(outputId = "chart") + ) + ) +) + + diff --git a/inst/htmlwidgets/apexcharter.js b/inst/htmlwidgets/apexcharter.js index f3cd71f..013ddb5 100644 --- a/inst/htmlwidgets/apexcharter.js +++ b/inst/htmlwidgets/apexcharter.js @@ -7,6 +7,7 @@ HTMLWidgets.widget({ factory: function(el, width, height) { var ax_opts, chart; + var apexchart = null; return { @@ -23,9 +24,14 @@ HTMLWidgets.widget({ ax_opts.chart.width = width; ax_opts.chart.height = height; - // Generate chart - chart = new ApexCharts(document.querySelector("#" + el.id), ax_opts); - chart.render(); + // Generate or update chart + if (apexchart === null) { + apexchart = new ApexCharts(document.querySelector("#" + el.id), ax_opts); + apexchart.render(); + } else { + apexchart.updateSeries(ax_opts.series); + } + },