use in functionplotR in knitr?

[vnijs]

functionplotR is awesome! I can get it to work in a shiny-app (see example below) and as a standalone document using rmarkdown. I've also been trying to use it with https://github.com/vnijs/shiny-site. Usually I can just plug a render function into an Rmd document and it will show in the shiny-site just fine. With functionplotR, however, it will just show a blank area (see page3.Rmd in the githb repo). Do you see a way around this perhaps?

functionplotR::renderFunctionplot({
    functionplot(
      # disableZoom = TRUE,
      xLabel = "Price",
      yLabel = "Profit",
      tip = list(
        xLine = TRUE,
        yLine = TRUE
      ),
      fn = list(
        list(
          fn = "-10*x^2+120*x-200", color = "black",
          derivative = list(
            fn = "-20*x+120",
            updateOnMouseMove = TRUE
          )
        )
      ),
      xDomain = c(0, 13),
      yDomain = c(-200, 200),
      width = 420,
      height = 100
    )
})

library(shiny)
library(functionplotR)

ui <- shinyUI(fluidPage(
  div(functionplotR::functionplotOutput("mc1_derivative"), style = "width: 800px")
))

# Define server logic required to draw a histogram
server <- shinyServer(function(input, output) {

  output$mc1_derivative <- functionplotR::renderFunctionplot({
    functionplot(
      # disableZoom = TRUE,
      xLabel = "Price",
      yLabel = "Profit",
      tip = list(
        xLine = TRUE,
        yLine = TRUE
      ),
      fn = list(
        list(
          fn = "-10*x^2+120*x-200", color = "black",
          derivative = list(
            fn = "-20*x+120",
            updateOnMouseMove = TRUE
          )
        )
      ),
      xDomain = c(0, 13),
      yDomain = c(-200, 200),
      width = 420,
      height = 100
    )
  })
})

# Run the application
shinyApp(ui = ui, server = server)

[timelyportfolio]

@vnijs, always love hearing from you and delighted to hear you are using functionplotR. I'll have a look, and while I am at it, I'll make sure I update to the newest JS.

[timelyportfolio]

@vnijs, it is the lack of resize. In my haste and lack of foresight, I was not aware that flexdashboard and tabset would require resize for all htmlwidgets, so almost all (except I added to parcoords and sunburstR) htmlwidgets from last year do not have this vital component. I'll add shortly. In case you run into this again when using a htmlwidget in tabset or flexdashboard, this is probably the issue.

[vnijs]

@timelyportfolio It is actually the widget in page3.Rmd that doesn't show.

shiny::runGitHub("vnijs/shiny-site")

[timelyportfolio]

@vnijs, got it. See my amended comment https://github.com/timelyportfolio/functionplotR/issues/1#issuecomment-224350146 above which I was typing the same time as you :)

[timelyportfolio]

Well, I must be doing something wrong. I added resize in #2, but unfortunately, none of the widgets in shiny-site work. I tried all sorts of combinations with leaflet, DT, parcoords, and functionplotR, and none worked for me. I think I'm on the Github versions of all relevant packages.

[timelyportfolio]

@vnijs, it appears the inclRmd is the source of the trouble. In ui.R, we could do something like this to add the dependencies, and things seem to work for me.

shinyUI(
  navbarPage("Shiny-site",
    tabPanel("Page 1", uiOutput("page1")),
    tabPanel("Page 2", uiOutput("page2")),
    tabPanel("Page 3", uiOutput("page3")),
    htmltools::attachDependencies(
      htmltools::tagList(),
      c(
        htmlwidgets:::getDependency("functionplot","functionplotR"),
        htmlwidgets:::getDependency("datatables","DT"),
        recursive = FALSE
      )
    )
  )
)

[vnijs]

That is wonderful @timelyportfolio! Wasn't aware of the attachDependencies function. I do notice that, when the image gets a bit bigger that the functionplot gets cutoff a bit (see image). Is there an easy fix for that?

[timelyportfolio]

I partially mentioned in https://github.com/maurizzzio/function-plot/issues/67, and I have provided a solution for the legend in 978d36df81edfcee3419541931437bd8df4d2a4c.

In the past with other htmlwidgets, I have tried to handle this by playing with the viewBox, but I have not been able to make that work perfectly across all browsers especially in dynamic contexts.

[vnijs]

I tried the latest commit and the legend is now visible. However, for some reason, the yaxis now only goes from -2.5 to 2.5 instead of -200 to 200. I set yDomain = c(-200, 200) and that worked fine before.

[vnijs]

@timelyportfolio Looks like the issue pops up for the first time in the commit for the latest JS (https://github.com/timelyportfolio/functionplotR/commit/62a359ba08ca68c3bcffa7a49665b756d2a5540a)

[timelyportfolio]

That is helpful thanks. I guess I will need to be a little better with my object copy. Will try to get it right. This copy is necessary for all the interactivity to continue working after redraw or resize.

[timelyportfolio]

Oh actually this might just be something new in function-plot. I will check the arguments and new options.