search

danielfrg / pelican-jupyter

Pelican plugin for blogging with Jupyter/IPython Notebooks
Apache License 2.0
422 stars 105 forks source link

Plotly plots not rendering #75

Closed datavistics closed 7 years ago

datavistics commented 7 years ago

Id like to build plotly plots, but they are not showing up when I build.

danielfrg commented 7 years ago

I have not tried plotly but I think you just need to add the plotly.js script tag to the <head> your pelican theme.

Maybe if you post the console output on the browser it would give us more info.

datavistics commented 7 years ago

Hey, thanks for your quick response. I dont actually get an error. I just get blank spots where I should have a chart.

image

You can see it at output [7] here: https://datavistics.github.io/myers-briggs-reddit-EDA.html#myers-briggs-reddit-EDA

Could you elaborate on what you said about the plotly.js script tag? Where should I make this addition? Or point me towards a similar example?

Thanks so much! ~Derek

danielfrg commented 7 years ago

You need something like to the pelican theme you are using:

<head>
               <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
datavistics commented 7 years ago

Im using the flex theme.

I tried the following:

  1. downloaded the html of the hosted page
  2. Put the script line between the tags
  3. saved the html file
  4. rendered the page in chrome

And it didn't fix the issue.

I also tried adding it to the theme base.html with no luck either.

The page does render correctly if I export the jupyter page as html. Further the following line is included in both the working and non-working html files.

<script>requirejs.config({paths: { 'plotly': ['https://cdn.plot.ly/plotly-latest.min']},});if(!window.Plotly) {{require(['plotly'],function(plotly) {window.Plotly=plotly;});}}</script>

I think its something based on how the plugin renders the notebook. The working copy included Out[7] and Out[9] (plotly outputs) whereas the copy rendered with pelican + pelican-ipynb didn't contain either output.

Do you have any more ideas? My notebook is here: https://github.com/datavistics/datavistics.github.io/blob/dev/content/General/myers_briggs_reddit_eda.ipynb

Thanks in advance @danielfrg

danielfrg commented 7 years ago

Ok, so you also need to include requirejs in the page.

<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>

I made this simple example to test it on my website and its working. http://danielfrg.com/drafts/jupyter-notebook-test.html

I am going to close this one because i think that should solve it but let me know if this didn't worked for you and we can keep working on this.

datavistics commented 7 years ago

You are a life saver. Thanks a ton!!!

Okroshiashvili commented 5 years ago

Hi all,

I have the same issue. I use elegant theme and plotly charts do not show at all. I go through this thread but still need help. Can you provide me detailed guidance?