Comments (9)
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.
from blogdown.
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)
from blogdown.
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.
from blogdown.
Don't use the amazing widgetframe
package, as it's abandonware and had a security vulnerability since 2018.
from blogdown.
Great, I'll look into those options. Thanks!
from blogdown.
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?
from blogdown.
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:
- within an R chunk create a
highchart
htmlwidget
object, sayhc
as one normally would - export the object using
highcharter::export_hc(hc, "filename.js")
- use
htmltools::includeHTML("filename.js")
to inject thejs
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>
from blogdown.
Just use the amazing widgetframe package.
from blogdown.
I had the same issue with the Hugo Apero theme where echarts4r canvas elements were shown as blank. For me the widgetframe package did not work. The only option that did work was to render the graph in a separate R file and save it using the htmlwidgets::saveWidget()
function and then include the html file in the blogdown file using the includeHTML()
function
from blogdown.
Related Issues (20)
- For error `could not find function "parser"`: fail more gracefully HOT 3
- Issue with site formatting with blogdown::build_site(). HOT 3
- Unable to serve site after updates HOT 6
- modelDown::modelDown() deleted all files in my output folder??!! HOT 1
- Home directory does not exist in HUGO academic-theme HOT 1
- Upkeep for blogdown
- Rmd files rendering with formatting issues HOT 7
- blogdown:::new_post_addin() should check for hugo first HOT 1
- Blogdown donβt supports multiple-column rmarkdown HOT 8
- Unable to create new posts HOT 2
- Missing website menu bar buttons when using blogdown to render web pages HOT 3
- Wrong relative links on the pkgdown site HOT 2
- allow use of hugo.toml for config [FR] HOT 3
- Error building site with hugo-apero theme HOT 5
- Build site with updated Hugo HOT 2
- shortcode doesn't display with leaflet map in the same post HOT 4
- Rmd - interactive map with tmap does not display HOT 5
- trialblogdown HOT 1
- Blogdown starting error and rmd render not working HOT 1
- unable to embed Rmd file in html output HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from blogdown.