New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

HTML Widgets not displaying #20

Closed
ProQuestionAsker opened this Issue Dec 16, 2016 · 6 comments

Comments

Projects
None yet
5 participants
@ProQuestionAsker
Collaborator

ProQuestionAsker commented Dec 16, 2016

On one of my pages, I've used blogdown to generate an HTML file with a built in highcharter graph, but the graph doesn't show (it just leaves a white space where it should be).
screen shot 2016-12-15 at 8 13 56 pm

If I inspect the page, it looks like the page recognizes that an html widget should be there:
screen shot 2016-12-15 at 8 14 14 pm

And the needed .js files are also in the same repository, so it should have all the information it needs to display.
screen shot 2016-12-15 at 8 14 39 pm

@walkerke

This comment has been minimized.

walkerke commented Dec 18, 2016

I've had some issues with CSS conflicts between htmlwidgets and various Hugo themes. I'm not 100% sure but this may be something that would have to be resolved theme by theme.

A good workaround is to use htmlwidgets::saveWidget() to save your chart to an HTML file then embed in your blog as an iframe. @bhaskarvk is also working on a solution for this with his widgetframe package (https://github.com/bhaskarvk/widgetframe)

@ProQuestionAsker

This comment has been minimized.

Collaborator

ProQuestionAsker commented Dec 18, 2016

Great, I'll look into those options. Thanks!

@ProQuestionAsker

This comment has been minimized.

Collaborator

ProQuestionAsker commented Dec 27, 2016

I just got around to trying this, and you're totally right. Using htmlwidgets::saveWidget(figure, file = "figure.html", selfcontained = TRUE) to output the widget and then adding each file as an iframe within the .md file of the project works like a charm!

It is worth noting (for others with this issue), that Hugo will rename the html file when transferring it to the public folder. So, if you had a figure in this location: "figures/fig.html", your iframe should actually read <iframe src="figures/fig/index.html></iframe> in the .md file when working with Hugo.

@bhaskarvk

This comment has been minimized.

bhaskarvk commented Jan 17, 2017

I'm working on automating this step via https://github.com/bhaskarvk/widgetframe. But there are some issues that I still need to resolve. Stay tuned.

@palfalvi

This comment has been minimized.

palfalvi commented Mar 27, 2017

Hi all, I am experiencing similar issues with highcharter, wordcloud2 and (sometimes?) plotly. I tried to use @bhaskarvk 's widgetframe::frameWidget() but it deos not solve the issue. I am using the hugo-academic theme btw.

Is there any progress in this issue or anyone experienced similar things?

@jozefhajnala

This comment has been minimized.

jozefhajnala commented Oct 16, 2018

I had similar issues with highcharts charts not rendering on a recent blogdown post, and after trying a few solutions I solved it in a bit of a workaround that potentially could be more automated, here is how I approached it:

  1. within an R chunk create a highchart htmlwidget object, say hc as one normally would
  2. export the object using highcharter::export_hc(hc, "filename.js")
  3. use htmltools::includeHTML("filename.js") to inject the js into the page source, wrap it between <script> tag and place it in a <div> like so:
<script type="text/javascript">
# included js from filename.js here 
</script>
<div id="container"></div>

This can get tedious if you want more than 1 chart on a page as export_hc automatically calls it container -> one may spend some time to add a bit more flexibility to the function in terms of the export if this proves useful.

Note that you of course need the javascript resources provided on the page, for example using something like

htmltools::includeHTML("include_highcharts.html")

where that include_highcharts.html contains the needed links, such as (or more likely your "local" copy of those):

<script type="text/javascript" src="https://code.highcharts.com/highcharts-more.js"></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment