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

Cannot render plots for Hugo/blogdown .Rmd #283

Open
palfalvi opened this Issue Mar 17, 2017 · 19 comments

Comments

Projects
None yet
6 participants
@palfalvi

palfalvi commented Mar 17, 2017

Hi,

I wanted to use highcharter with blogdown+Hugo pages. When I made the Rmd file, in RStudio everything worked well, but in the rendered webpage there is just a blank space where the chart should go. I tried to put it in a htmlwidgets::tagList() but the same. I am using simple highchart() with two columnrange hc_add_series() element. Do you have any solution for this?

Thank you in advance.

@jbkunst

This comment has been minimized.

Owner

jbkunst commented Mar 17, 2017

Hi @palfalvi,

I don't know how blogdown work. So:

  • Have you tried with other htmlwidgets?
  • In the page when you see a blank space, what do you see in the devtools (F12 button)?
@palfalvi

This comment has been minimized.

palfalvi commented Mar 21, 2017

Other htmlwidgets looks fine (I am continously working with DiagrammeR, DT, networkD3, plotly).

On html the blank space is:

<div id="htmlwidget-ea368e20fb13e05444cd" style="width:100%;height:500px;" class="highchart html-widget html-widget-static-bound"></div>

<script type="application/json" data-for="htmlwidget-ea368e20fb13e05444cd">...</script>

"..." has the data values for rendering the plot.

On debug there are this messages for highchart.js:

Line 62:63 $("#" + el.id).highcharts is not a function. (In '$("#" + el.id).highcharts(x.hc_opts)', '$("#" + el.id).highcharts' is undefined)
Line 98:42 $("#" +el.id).highcharts is not a function. (In '$("#" +el.id).highcharts()', '$("#" +el.id).highcharts' is undefined)
@jbkunst

This comment has been minimized.

Owner

jbkunst commented Mar 21, 2017

Usually that message is when highcharts.js is not loaded or maybe there's an issue with jquery. To be sure, have you see if highcharts the source (CRTL+U) is correctly loaded?

Do you have an open repo with your blogdown site?

@palfalvi

This comment has been minimized.

palfalvi commented Mar 21, 2017

Looks like the sources are loaded, just that 2 lines have problem. Thank for the link, however how can I load JQuery before Highchart.js from R?

I have an open repo, but I did not uploaded any post with highcharts so far since it cannot show anything on local.

@jbkunst

This comment has been minimized.

Owner

jbkunst commented Mar 21, 2017

Can you try with a simple theme? I want to be sure if there some conflicts with the scripts loaded at the end

@palfalvi

This comment has been minimized.

palfalvi commented Mar 22, 2017

I tried with a simple chart using favorite_pies dataset with several build and custom themes, including hc_theme_null(), but still the same.

@jbkunst

This comment has been minimized.

Owner

jbkunst commented Mar 22, 2017

Sorry, I wasn't clear enough. I was talking about the hugo theme ;)

@palfalvi

This comment has been minimized.

palfalvi commented Mar 23, 2017

You was right. I built a new site locally and just inserted a highcharter plot in the example .Rmd file and it was visible and fine.

However I don't know is it worth to rearrange the whole site and experience with other themes until it is working. Probably it should be done in the beginning, but most likely it should work with all themes. Do you have any idea what's wrong in the theme then?

@jbkunst

This comment has been minimized.

Owner

jbkunst commented Mar 23, 2017

Nice!

My first guess is think in a conflict with the theme js and highcharts. You can try the new widgetframe by @bhaskarvk, I think worth a try, tell me if you try this approach :D.

(You're not alone rstudio/blogdown#20)

@palfalvi

This comment has been minimized.

palfalvi commented Mar 24, 2017

Ok I tried several things. First of all, simple widgetFrame() was not working.

However I realized plotly is also not working, but not all the time (?). Some plots are shown but some are not. wordcloud2 makes also just an empty box. Better to search in the theme or blogdown, then in the widgets. Thanks for helping!

@jbkunst

This comment has been minimized.

Owner

jbkunst commented Mar 24, 2017

I agree, in that case it seems to be a blogdown issue. Meanwhile I'll close the issue, if you need more highcharter support we can reopen or make a new issue here ;)!

@AlexSemenovIRL

This comment has been minimized.

AlexSemenovIRL commented Mar 24, 2017

I was following this ticket too, thank you for the update.
Cheers,
Pork Chop

@paulditterline

This comment has been minimized.

paulditterline commented Jun 20, 2017

So glad I found this thread. Using ghostwriter theme for my blogdown blog and no charts when I push, although they show up on locally. Seems I need to switch themes!

@jbkunst

This comment has been minimized.

Owner

jbkunst commented Jun 20, 2017

I will look into it because that's not the idea! So it's seems correct to reopen the issue.

@jbkunst jbkunst reopened this Jun 20, 2017

@bhaskarvk

This comment has been minimized.

bhaskarvk commented Jun 24, 2017

Rightnow widgetframe works with every other html output format except blogdown. I have an open issue for this rstudio/blogdown#38. This is not something I can easily fix in widgetframe, but something to be handled at blogdown end.

@jbkunst

This comment has been minimized.

Owner

jbkunst commented Jun 27, 2017

Thanks @bhaskarvk for the update!

@bhaskarvk

This comment has been minimized.

bhaskarvk commented Dec 20, 2017

widgetframe now works with blogdown too.

@jbkunst

This comment has been minimized.

Owner

jbkunst commented Dec 20, 2017

Hey @bhaskarvk! Thanks for let us know! We miss you!

@houstonhaynes

This comment has been minimized.

houstonhaynes commented Jul 30, 2018

FWIW I sort of have the widgetframe package working with highcharter, but there is a kludge because the URL construct is wrong inside of framewidget.

and there's an extra Wrinkle in this because the iframe is not the same size as the render for highcharts. So that means there's some overlap between the graphic that displays on the page and the text that is supposed to be around it. Not pretty.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment