4

Contrary to this similarly titled SO post, I have a dygraph I have exported from R that works. The graph was "exported" using rStudio's Viewer Export pictured below. This creates an HTML file of the dygraph you can confirm works in this fiddle

enter image description here

I tried to embed the entire dygraph at the top of another HTML using the recommendation from this SO post to no success - literally nothing happened. In another attempt I copy and pasted the dygraph HTML into the host HTML to an improved but still terrible outcome of having the graph overlap all content.

I can't seem to find an official way of embedding r dygraphs in HTML that isn't Shiny related or R Markup related or involves outputting CSV and respecifying the graph in HTML. Is there an official way of embedding r produced dygraphs in HTML and if so what is it? If not, how can I?

dygraphs are awesome
Community
  • 1
  • 1
zelusp
  • 2,773
  • 2
  • 26
  • 52

2 Answers2

3

Because the dygraph is a standalone page, the easiest way to do what you want is to use an iframe: just set its src attribute to point to the HTML saved from RStudio. Here's one that embeds the dygraph you made in your fiddle:

<h1>Here's a nice dygraph.</h1>
<iframe src="https://jsfiddle.net/f1fLLjbk/embedded/result/" width="100%" height="300px" style="border: 0px;"/>

<h1>Here's some more content</h1>

Try it: https://jsfiddle.net/cvekdbLh/

Jonathan
  • 7,333
  • 38
  • 33
  • I'm new to web development but because the end of the following URL about iFrames (https://plot.ly/how-to-embed-plotly-graphs-in-websites/#fallback) is the word 'fallback' and others around the web seem to despise its use I was hoping there was an official r method for doing this. No complaints here though. This will work - Grazie! – zelusp Apr 02 '15 at 03:33
  • I actually jumped the gun on this one - turns out the iFrame is somehow deleting/impeding display of content beneath it. This is true both in your fiddle and local tests. I feel like there's a magic word we're missing for this to work. – zelusp Apr 02 '15 at 04:05
  • Haha - if I substitute plot.ly's suggestion (URL above) on embedding an iFrame but instead for this dyraph it works. Go Team work! Developers be aware: there exists the need for a better way to integrate "direct from r" dygraphs in HTML. – zelusp Apr 02 '15 at 04:12
0

There does not appear to be a magic bullet for which you are looking. The Javascript library you are using to generate a Dygraph is designed to render the graph on the fly when the HTML is loaded. So short of taking a screen capture and embedding that image, you will need both AJAX and the Javascript engine running in the page to generate the graph. If you take a look at the R Javascript code in your fiddle, you will notice that the code has been obfuscated through URL encoding. Clearly the authors of this code don't want to make it easy for the Dygraph code itself to even be lifted from the page (unless you obfuscated the code yourself before creating the fiddle).

That being said, it would be relatively easy for you to take the page from your fiddle, and build a new HTML page around it. The only things you need to keep are the Javascript code and the <div id="htmlwidget_container"> which is where the graph gets rendered.

Tim Biegeleisen
  • 387,723
  • 20
  • 200
  • 263