Dygraph attribute in HTMLWidget is null

[prise6]

dygraphs/inst/htmlwidgets/dygraphs.js

Line 780 in 83c7d7a

dygraph: dygraph

Hi, thanks to this documentation, we can see that the javascript objet can be accessed.
In this implementation of Dygraph, i should access thanks to HTMLWidgets.find('.dygraphs').dygraph, but it seems that it is null.
Am i wrong ? Is there a way to access the dygraph object ?

Thanks.

[danklotz]

not really helpful for you, but it might be related to issue #127

[timelyportfolio]

@prise6, I just checked and you are correct even though line is designed to accomplish this. Unfortunately, the joys of JavaScript scoping means this does not work. I will submit a pull that should resolve the issue.

As a side note, I will caution that you will also need to wait for the htmlwidget to render before dygraph is truly available.

---

...from what I remember at one point `dygraph` was available, so I think (but not all that confident) that something changed.

[prise6]

Ok thank you, agree with your fix.
@danklotz : i think it will fix your issues too.

The joys of JavaScript scoping

Haha 👍

[danklotz]

@prise6 Mh.. Not sure about that. HTMLWidgets.getInstance still seems to give Null. As in:

HTMLWidgets.getInstance(document.getElementById('element_g1')).dygraph

[timelyportfolio]

@danklotz, there are 3 patterns that I have used to make sure the object is available to the outside.

1. export so that it is available with HTMLWidgets.findWidget
2. attach so that it is available with HTMLWidgets.getInstance
3. attach with expando property to the DOM node

Reading the code led me to believe that the intent was the first HTMLWidgets.findWidget, so I used that approach in my pull request. Happy to change given some guidance from @jjallaire.

As another RStudio htmlwidget, we can look at how this is done in leaflet. leaflet pursues a slightly modified version 1 by providing a function getMap() available through HTMLWidgets.findWidget(). See lines.

[danklotz]

you (@timelyportfolio) are of course right (and your correction does what it is supposed to do).

It just seemed that the problems are very similar (so I was hoping). I just want to be able to have a synchronised mouse over and/or selector over multiple dygraphs. Alas, my JS skills are to rudimentary to solve this : /

[przmv]

@prise6 What's your high-level goal? Why do you need to access the dygraph instance?

[jjallaire]

We made a change some time back to enable the second pattern (HTMLWidgets.getInstnace). See 08a4d59

[timelyportfolio]

@jjallaire I see those changes but unfortuately they do not work for me, which resulted in #197.

[danklotz]

Both still don't work for me. (Tested it on a Mac, but that should not change anything).

[przmv]

@danklotz Could you please provide a Minimal Working Example (https://www.r-bloggers.com/writing-a-minimal-working-example-mwe-in-r/)?

[danklotz]

Yes. But, I think the the example in #127 (by @ijlyttle) is ok. No?
So far, the following code does not work for me:

library("dygraphs")
library("htmltools")

dygraph(mdeaths, elementId = "mdeaths")

tags$script("
  var elem = document.getElementById('mdeaths');
  var dyg = HTMLWidgets.getInstance(elem);
  
  console.log(elem);
  console.log(dyg);
")

(also not with the corrections of #197)

[timelyportfolio]

@danklotz, I had tried to warn earlier that htmlwidgets render after page load, so the instance will not be available immediately. To access will require a delay or asynchrony. Here is a quick example that might help explain using my pull request version.

library(htmltools)
library(dygraphs)

browsable(
  tagList(
    dygraph(mdeaths),
    tags$script(
"
console.log(HTMLWidgets.find('.dygraphs'))

setTimeout(
  function() {
    console.log(i, HTMLWidgets.find('.dygraphs').dygraph)
  }, 50
)
"
    )
  )
)

One other way to access after render is to use htmlwidgets::onRender().

dy <- dygraph(mdeaths)
htmlwidgets::onRender(
  dy,
"
function(el, x) {
  debugger
  // this will equal instance
  console.log(this.dygraph)
}
"
)

[danklotz]

Yessss. Makes me so happy :) 👍

(Sorry for beeing stupid/Not understanding the warning)

[prise6]

@pshevtsov i don't think my high level goal is really relevant, but i wanted to synchronized multiple dygraphs. You'll find a tiny repo to see it can works with PR of @timelyportfolio : https://github.com/prise6/R-dygraphs-sync

Anyway, @timelyportfolio provides good examples to run with current package.