clayh53 / tufte-jekyll

Minimal Jekyll blog styled to resemble the look and layout of Edward Tufte's books
MIT License
620 stars 206 forks source link

Using highcharter #60

Closed ekstroem closed 7 years ago

ekstroem commented 7 years ago

I'm trying to get some of the htmlwidgets graphs to render in tufte-jekyll. I've looked at Brendan Rocks' wonderful instructions and packages like leaflet and dygraphs render nicely. However, I'm having some problems with the highcharter package.

Here's my code:

---
title: "Test"
layout: post
author: Me
published: true
comments: true
tags:
- reproducerbar forskning
---

```{r echo=FALSE}
knitr::opts_chunk$set(screenshot.force = FALSE)
```

```{r echo=FALSE, message=FALSE}
library(highcharter)
hchart(LakeHuron)
```

Has anyone managed to get the highcharter package to work with Tufte-Jekyll

ekstroem commented 7 years ago

Oh .. I can add that if I include a dygraphs before highcharter then the dygraph renders nicely. If I swap the order then none of them work. Maybe the javascripts messes up?

clayh53 commented 7 years ago

I suspect it has something to do with the jekyll markdown parser. I’m not sure on your example exactly how you are embedding the highcharter code. Have you looked at the generated output for that page from the jekyll build?

Perhaps you need to wrap it in a <pre attribute=“0">… tag instead of the code tag that the triple backticks generates

On Jun 11, 2017, at 2:21 PM, Claus Ekstrøm notifications@github.com wrote:

Oh .. I can add that if I include a dygraphs before highcharter then the dygraph renders nicely. If I swap the order then none of them work. Maybe the javascripts messes up?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/clayh53/tufte-jekyll/issues/60#issuecomment-307647094, or mute the thread https://github.com/notifications/unsubscribe-auth/AC7TdjSyaYbkkk3mYp1bGIZ0IDvRqtUIks5sDDAVgaJpZM4N2N1-.

ekstroem commented 7 years ago

The code is included as shown and embedding other htmlwidgets directly works nicely. The output looks (at first glance) okay, and space is set on the page for the widget. An extended example of the finished page can be seen at

http://sandsynligvis.dk/articles/16/test2.html

and as far as I can see the dependencies are correctly added to the page.

clayh53 commented 7 years ago

When I check the console messages when looking at your page, I get some errors, including a file not found error for this url: http://sandsynligvis.dk/htmlwidgets_deps/dygraphs-1.1.1/dygraph-combined.js.map

ekstroem commented 7 years ago

Hmm. I don't see that error when I look at the console. However, I found the problem: jQuery must be loaded before the the javascript for highcharter is loaded. When I swapped those around everything worked nicely, so I've moved that from the footer.

Thanks for trying to help pin this down.