Insert interactive Plotly figure in Jekyll website

Hello !

I am looking to insert an interactive 3D plot in my Jekyll website (host on github-pages) and I have seen that we can convert a Plotly figure with fig.write_html() and so I am trying to insert it in Jekyll by calling {% include my_figure.html %} . But when running bundle exec jekyll serve, I have the following error error parsing fragment (1) (RuntimeError) that seems to result from ruby gems …

Does anyone have an idea how to do/resolve it ?

utxx99oflbo71

Thank you !

1 Like

Hey there!
Do you have any code/more detailed error messages that can help us with your problem? Might want to check your directory structure where my_figure.html is located relative to the main-make sure it isn’t nested in the _site folder. Hope you can get this to work out!

1 Like

Hi.

So Plotly is in Python and it sounds like you use it to output an HTML page for you.

I guess this could be done locally and then you add the HTML to your site which makes building your site on the remote a lot locally. If you have dynamic data this becomes more complex.

Secondly, make sure that your HTML snippet that is generated by Plotly actually exists in the right place

_includes/
    my_figure.html

index.md

Hi ! Yes, I first generate it locally with python (my data are not dynamic) and then I have added the html generated to the repository _includes. May be you have an jekyll website example that I could check ?

1 Like

Hi ! I copy paste below the full error returned by the jekyll command :

Traceback (most recent call last):
  
51: from /mnt/c/users/julien.LAPTOP-V4T667QN/Documents/github/julienguegan.github.io/vendor/bundle/ruby/2.5.0/bin/jekyll:23:in \`<main>'
  
50: from /mnt/c/users/julien.LAPTOP-V4T667QN/Documents/github/julienguegan.github.io/vendor/bundle/ruby/2.5.0/bin/jekyll:23:in \`load'
  
49: from /mnt/c/users/julien.LAPTOP-V4T667QN/Documents/github/julienguegan.github.io/vendor/bundle/ruby/2.5.0/gems/jekyll-3.9.0/exe/jekyll:15:in \`<top (required)>'
  
48: from /mnt/c/users/julien.LAPTOP-V4T667QN/Documents/github/julienguegan.github.io/vendor/bundle/ruby/2.5.0/gems/mercenary-0.3.6/lib/mercenary.rb:19:in \`program'
  
47: from /mnt/c/users/julien.LAPTOP-V4T667QN/Documents/github/julienguegan.github.io/vendor/bundle/ruby/2.5.0/gems/mercenary-0.3.6/lib/mercenary/program.rb:42:in \`go'
  
46: from /mnt/c/users/julien.LAPTOP-V4T667QN/Documents/github/julienguegan.github.io/vendor/bundle/ruby/2.5.0/gems/mercenary-0.3.6/lib/mercenary/command.rb:220:in \`execute'
  
45: from /mnt/c/users/julien.LAPTOP-V4T667QN/Documents/github/julienguegan.github.io/vendor/bundle/ruby/2.5.0/gems/mercenary-0.3.6/lib/mercenary/command.rb:220:in \`each'
  
44: from /mnt/c/users/julien.LAPTOP-V4T667QN/Documents/github/julienguegan.github.io/vendor/bundle/ruby/2.5.0/gems/mercenary-0.3.6/lib/mercenary/command.rb:220:in \`block in execute'
  
43: from /mnt/c/users/julien.LAPTOP-V4T667QN/Documents/github/julienguegan.github.io/vendor/bundle/ruby/2.5.0/gems/jekyll-3.9.0/lib/jekyll/commands/serve.rb:75:in \`block (2 levels) in init\_with\_program'
  
42: from /mnt/c/users/julien.LAPTOP-V4T667QN/Documents/github/julienguegan.github.io/vendor/bundle/ruby/2.5.0/gems/jekyll-3.9.0/lib/jekyll/commands/serve.rb:93:in \`start'
  
41: from /mnt/c/users/julien.LAPTOP-V4T667QN/Documents/github/julienguegan.github.io/vendor/bundle/ruby/2.5.0/gems/jekyll-3.9.0/lib/jekyll/commands/serve.rb:93:in \`each'
  
40: from /mnt/c/users/julien.LAPTOP-V4T667QN/Documents/github/julienguegan.github.io/vendor/bundle/ruby/2.5.0/gems/jekyll-3.9.0/lib/jekyll/commands/serve.rb:93:in \`block in start'
  
39: from /mnt/c/users/julien.LAPTOP-V4T667QN/Documents/github/julienguegan.github.io/vendor/bundle/ruby/2.5.0/gems/jekyll-3.9.0/lib/jekyll/commands/build.rb:36:in \`process'
  
38: from /mnt/c/users/julien.LAPTOP-V4T667QN/Documents/github/julienguegan.github.io/vendor/bundle/ruby/2.5.0/gems/jekyll-3.9.0/lib/jekyll/commands/build.rb:65:in \`build'
  
37: from /mnt/c/users/julien.LAPTOP-V4T667QN/Documents/github/julienguegan.github.io/vendor/bundle/ruby/2.5.0/gems/jekyll-3.9.0/lib/jekyll/command.rb:28:in \`process\_site'
  
36: from /mnt/c/users/julien.LAPTOP-V4T667QN/Documents/github/julienguegan.github.io/vendor/bundle/ruby/2.5.0/gems/jekyll-3.9.0/lib/jekyll/site.rb:71:in \`process'
  
35: from /mnt/c/users/julien.LAPTOP-V4T667QN/Documents/github/julienguegan.github.io/vendor/bundle/ruby/2.5.0/gems/jekyll-3.9.0/lib/jekyll/site.rb:191:in \`render'
  
34: from /mnt/c/users/julien.LAPTOP-V4T667QN/Documents/github/julienguegan.github.io/vendor/bundle/ruby/2.5.0/gems/jekyll-3.9.0/lib/jekyll/site.rb:462:in \`render\_docs'
  
33: from /mnt/c/users/julien.LAPTOP-V4T667QN/Documents/github/julienguegan.github.io/vendor/bundle/ruby/2.5.0/gems/jekyll-3.9.0/lib/jekyll/site.rb:462:in \`each\_value'
  
32: from /mnt/c/users/julien.LAPTOP-V4T667QN/Documents/github/julienguegan.github.io/vendor/bundle/ruby/2.5.0/gems/jekyll-3.9.0/lib/jekyll/site.rb:463:in \`block in render\_docs'
  
31: from /mnt/c/users/julien.LAPTOP-V4T667QN/Documents/github/julienguegan.github.io/vendor/bundle/ruby/2.5.0/gems/jekyll-3.9.0/lib/jekyll/site.rb:463:in \`each'
  
30: from /mnt/c/users/julien.LAPTOP-V4T667QN/Documents/github/julienguegan.github.io/vendor/bundle/ruby/2.5.0/gems/jekyll-3.9.0/lib/jekyll/site.rb:464:in \`block (2 levels) in render\_docs'
  
29: from /mnt/c/users/julien.LAPTOP-V4T667QN/Documents/github/julienguegan.github.io/vendor/bundle/ruby/2.5.0/gems/jekyll-3.9.0/lib/jekyll/site.rb:480:in \`render\_regenerated'
  
28: from /mnt/c/users/julien.LAPTOP-V4T667QN/Documents/github/julienguegan.github.io/vendor/bundle/ruby/2.5.0/gems/jekyll-3.9.0/lib/jekyll/document.rb:352:in \`trigger\_hooks'
  
27: from /mnt/c/users/julien.LAPTOP-V4T667QN/Documents/github/julienguegan.github.io/vendor/bundle/ruby/2.5.0/gems/jekyll-3.9.0/lib/jekyll/hooks.rb:102:in \`trigger'
  
26: from /mnt/c/users/julien.LAPTOP-V4T667QN/Documents/github/julienguegan.github.io/vendor/bundle/ruby/2.5.0/gems/jekyll-3.9.0/lib/jekyll/hooks.rb:102:in \`each'
  
25: from /mnt/c/users/julien.LAPTOP-V4T667QN/Documents/github/julienguegan.github.io/vendor/bundle/ruby/2.5.0/gems/jekyll-3.9.0/lib/jekyll/hooks.rb:103:in \`block in trigger'
  
24: from /mnt/c/users/julien.LAPTOP-V4T667QN/Documents/github/julienguegan.github.io/vendor/bundle/ruby/2.5.0/gems/jemoji-0.12.0/lib/jemoji.rb:94:in \`block in <top (required)>'
  
23: from /mnt/c/users/julien.LAPTOP-V4T667QN/Documents/github/julienguegan.github.io/vendor/bundle/ruby/2.5.0/gems/jemoji-0.12.0/lib/jemoji.rb:18:in \`emojify'
  
22: from /mnt/c/users/julien.LAPTOP-V4T667QN/Documents/github/julienguegan.github.io/vendor/bundle/ruby/2.5.0/gems/jemoji-0.12.0/lib/jemoji.rb:86:in \`replace\_document\_body'
  
21: from /mnt/c/users/julien.LAPTOP-V4T667QN/Documents/github/julienguegan.github.io/vendor/bundle/ruby/2.5.0/gems/html-pipeline-2.14.0/lib/html/pipeline.rb:116:in \`call'
  
20: from /mnt/c/users/julien.LAPTOP-V4T667QN/Documents/github/julienguegan.github.io/vendor/bundle/ruby/2.5.0/gems/html-pipeline-2.14.0/lib/html/pipeline.rb:172:in \`instrument'
  
19: from /mnt/c/users/julien.LAPTOP-V4T667QN/Documents/github/julienguegan.github.io/vendor/bundle/ruby/2.5.0/gems/html-pipeline-2.14.0/lib/html/pipeline.rb:118:in \`block in call'
  
18: from /mnt/c/users/julien.LAPTOP-V4T667QN/Documents/github/julienguegan.github.io/vendor/bundle/ruby/2.5.0/gems/html-pipeline-2.14.0/lib/html/pipeline.rb:118:in \`inject'
  
17: from /mnt/c/users/julien.LAPTOP-V4T667QN/Documents/github/julienguegan.github.io/vendor/bundle/ruby/2.5.0/gems/html-pipeline-2.14.0/lib/html/pipeline.rb:118:in \`each'
  
16: from /mnt/c/users/julien.LAPTOP-V4T667QN/Documents/github/julienguegan.github.io/vendor/bundle/ruby/2.5.0/gems/html-pipeline-2.14.0/lib/html/pipeline.rb:119:in \`block (2 levels) in call'
  
15: from /mnt/c/users/julien.LAPTOP-V4T667QN/Documents/github/julienguegan.github.io/vendor/bundle/ruby/2.5.0/gems/html-pipeline-2.14.0/lib/html/pipeline.rb:133:in \`perform\_filter'
  
14: from /mnt/c/users/julien.LAPTOP-V4T667QN/Documents/github/julienguegan.github.io/vendor/bundle/ruby/2.5.0/gems/html-pipeline-2.14.0/lib/html/pipeline.rb:172:in \`instrument'
  
13: from /mnt/c/users/julien.LAPTOP-V4T667QN/Documents/github/julienguegan.github.io/vendor/bundle/ruby/2.5.0/gems/html-pipeline-2.14.0/lib/html/pipeline.rb:134:in \`block in perform\_filter'
  
12: from /mnt/c/users/julien.LAPTOP-V4T667QN/Documents/github/julienguegan.github.io/vendor/bundle/ruby/2.5.0/gems/html-pipeline-2.14.0/lib/html/pipeline/filter.rb:129:in \`call'
  
11: from /mnt/c/users/julien.LAPTOP-V4T667QN/Documents/github/julienguegan.github.io/vendor/bundle/ruby/2.5.0/gems/html-pipeline-2.14.0/lib/html/pipeline/emoji\_filter.rb:19:in \`call'
  
10: from /mnt/c/users/julien.LAPTOP-V4T667QN/Documents/github/julienguegan.github.io/vendor/bundle/ruby/2.5.0/gems/nokogiri-1.11.7-x86\_64-linux/lib/nokogiri/xml/node\_set.rb:238:in \`each'
  
9: from /mnt/c/users/julien.LAPTOP-V4T667QN/Documents/github/julienguegan.github.io/vendor/bundle/ruby/2.5.0/gems/nokogiri-1.11.7-x86\_64-linux/lib/nokogiri/xml/node\_set.rb:238:in \`upto'
  
8: from /mnt/c/users/julien.LAPTOP-V4T667QN/Documents/github/julienguegan.github.io/vendor/bundle/ruby/2.5.0/gems/nokogiri-1.11.7-x86\_64-linux/lib/nokogiri/xml/node\_set.rb:239:in \`block in each'
  
7: from /mnt/c/users/julien.LAPTOP-V4T667QN/Documents/github/julienguegan.github.io/vendor/bundle/ruby/2.5.0/gems/html-pipeline-2.14.0/lib/html/pipeline/emoji\_filter.rb:25:in \`block in call'
  
6: from /mnt/c/users/julien.LAPTOP-V4T667QN/Documents/github/julienguegan.github.io/vendor/bundle/ruby/2.5.0/gems/nokogiri-1.11.7-x86\_64-linux/lib/nokogiri/xml/node.rb:280:in \`replace'
  
5: from /mnt/c/users/julien.LAPTOP-V4T667QN/Documents/github/julienguegan.github.io/vendor/bundle/ruby/2.5.0/gems/nokogiri-1.11.7-x86\_64-linux/lib/nokogiri/xml/node.rb:1156:in \`coerce'
  
4: from /mnt/c/users/julien.LAPTOP-V4T667QN/Documents/github/julienguegan.github.io/vendor/bundle/ruby/2.5.0/gems/nokogiri-1.11.7-x86\_64-linux/lib/nokogiri/xml/node.rb:791:in \`fragment'
  
3: from /mnt/c/users/julien.LAPTOP-V4T667QN/Documents/github/julienguegan.github.io/vendor/bundle/ruby/2.5.0/gems/nokogiri-1.11.7-x86\_64-linux/lib/nokogiri/xml/node.rb:791:in \`new'
  
2: from /mnt/c/users/julien.LAPTOP-V4T667QN/Documents/github/julienguegan.github.io/vendor/bundle/ruby/2.5.0/gems/nokogiri-1.11.7-x86\_64-linux/lib/nokogiri/html/document\_fragment.rb:31:in \`initialize'
  
1: from /mnt/c/users/julien.LAPTOP-V4T667QN/Documents/github/julienguegan.github.io/vendor/bundle/ruby/2.5.0/gems/nokogiri-1.11.7-x86\_64-linux/lib/nokogiri/xml/node.rb:837:in \`parse'
  
/mnt/c/users/julien.LAPTOP-V4T667QN/Documents/github/julienguegan.github.io/vendor/bundle/ruby/2.5.0/gems/nokogiri-1.11.7-x86\_64-linux/lib/nokogiri/xml/node.rb:837:in \`in\_context': error parsing fragment (1) (RuntimeError) ```

That error is not useful for me. The last line is too vague.

Can you share a repo link or gist of the HTML page?

The only thing I think of to break it is if you have Jekyll-like syntax in your code such as {{ for JavaScript.

OK, I have pushed it on my github (which send me a mail “Page build failure”). You can find on my github-pages repo with a post a post with the html figure that as been generated with plotly.

Tell me if I can provide you anything else to help for debugging purpose :slight_smile:

1 Like

A few pointers

Take out the html tag in your plot. Otherwise will you have <html><html>...

There is a ton of minified CSS and JS in your plot file which could be the error.

Inside your includes file, do this to stop Jekyll processing it. At the top and bottom of the page.

{% raw %}
<div>...
<script>...




...

...
{% endraw %}

I see you have a vendor and Cache directory in your repo. That should be deleted and add to .gitignore.

The files end up making the repo bloated and they are meant to be specific to a machine and created and replaced as needed, not persisted.

My file:

Thank you for the info (on the .gitignore), I didn’t pay attention when creating it …

1 Like

I try to take out the html tag and add {% raw %} tag in the html file but the exact same error came up … I will try to look in the plotly forum to see if the problem already came up

1 Like

Your error is specific to Jekyll or rather nokogiri gem processing the file so unlikely for it to be in the Plotly forums or github issues but worth a check.

If you put the page as index.html without Jekyll and serve that, I bet it will work.

You can try with an empty HTML file in your Jekyll site to get to a passing state.

Then add the style tag.

And the script tag.

And some div tags etc.

Eventually you’ll find your reason for the error.

I don’t know if the issue is one of your dependencies or version of Jekyll that’s causing the issue?

Like nokogiri or html

I copied your file, as is.

From https://raw.githubusercontent.com/julienguegan/julienguegan.github.io/main/_includes/himmelblau.html

to my repo GitHub - MichaelCurrin/jekyll-blog-demo: Starter for a static website or blog - built with Jekyll, a minimal theme and GH Pages 🧪 📝 🚀

Without any raw escaping.

And it loads fine.

Result

Code


OK so if you can do it from your site, I guess that indeed it feel to be a dependencies/version issue as you said. I use GitHub - mmistakes/minimal-mistakes: Jekyll theme for building a personal site, blog, project documentation, or portfolio. as a template/theme … I am not quite use to Jekyll, from now how can I isolate and debug it ?

Note that if I call it directly in the index.html file as you, the usual error appears

1 Like

Make a new project using my link to the demo

Or jekyll new

Get that working with the sample content

Then add in your includes file and put it on a page.

I am not familiar with minimal mistakes or its gems to know what is going on there.

You can try doing pieces of your HTML includes like the first quarter, then first half, 3 quarters. It doesn’t have to be valid as a drawing. Just build it up to see what breaks it. As before, maybe if you take out style tag or script tag. It’s possible since the error is around Node module that a plugin is trying to execute your JS, so I’d start with that hypothesis and see if you can confirm that.