plots in Jupyter notebooks exports to HTML do not show without internet connection

[realtime]

A Jupyter notebook exported to HTML produces the error message

Uncaught ReferenceError: require is not defined

in Chrome when there is no internet connection. The plot does not show, there is only blank space where it should be.

reproducable example:

import plotly.express as px
iris = px.data.iris()
px.scatter(iris, x="sepal_width", y="sepal_length", color="petal_length")

and after:

jupyter nbconvert --to html ...

Exporting the plot directly with fig.write(...) works fine, both online and offline.

[emmanuelle]

Please see my answer in the forum https://community.plot.ly/t/html-export-from-jupyter-notebook-for-offline-viewing/32104/13 I had missed an important information about the lack of internet connection,
Does

import plotly.io as pio
pio.renderers.default = "notebook"

work for you?

[realtime]

That does not change the behavior. The resulting HTML is also identical, except for those two added lines of source.

[arnorfati]

anyone have this solution?

[alfonsosaera]

Hi,

I have the same issue, any solution?

Thanks

[vbfall]

+1 with same issue.
(and all charts are offline to begin with)

[mc51]

I've had the same issue. I've posted a solution on StackOverflow.
For me, this looks like a bug:
For plotly.js to work offline, it needs require.js. However, the require.js script is not included in the exported html file but it's loaded from a CDN. This obviously fails when you are offline. Hence, plotly won't work without an internet connection.

[vbfall]

Does it make sense that installing psutil+orca in the environment fixed it for me? (exporting with nbconvert)

[vbfall]

@mc51 I had seen your solution in SO, but when I tried it the notebook threw an error (in execution, not export) and didn't create chart. The errors directed me to install psutil and then orca. The notebook still couldn't run, so I removed your suggested two lines of code (effectively reverting back to the notebook before, but with psutil and orca in the environment). Magically, everything worked - execution and export.

[grisaitis]

Please see my answer in the forum https://community.plot.ly/t/html-export-from-jupyter-notebook-for-offline-viewing/32104/13 I had missed an important information about the lack of internet connection,
Does

import plotly.io as pio
pio.renderers.default = "notebook"

work for you?

this works for me! thank you @emmanuelle

example:

import plotly
plotly.io.renderers.default = "notebook"

import plotly.express as px
iris = px.data.iris()
px.scatter(iris, x="sepal_width", y="sepal_length", color="petal_length")

then convert...

$ jupyter nbconvert --to html ~/Downloads/Untitled.ipynb
$ open /Users/william/Downloads/Untitled.html

[grisaitis]

the only downside, @emmanuelle, is that this renderer doesn't seem to work in colab 😔 but if i save out from colab and convert to html, the plot shows up there.

and my html file is bigger when using this renderer, @realtime.

[CalebEverett]

I'm having this same issue here: https://nbviewer.jupyter.org/github/CalebEverett/finm33150-final-project/blob/master/binance.ipynb

I posted on the forum here to no avail: https://community.plotly.com/t/charts-not-visible-and-errors-on-nbviewer-org/52734

I'd by happy to invest time to be able to simply push notebooks to github and be able to view them with the output on nbviewer. Serious impediment to productivity not being able to.

[nicolaskruchten]

This is the clearest explanation I've been able to write :) #931 (comment)

[CalebEverett]

Another approach is to convert to html and publish to github pages with github actions. There is a nice github action here https://github.com/JamesIves/github-pages-deploy-action that deploys a folder to another branch. You can set up a workflow that converts the notebook to html when you push and then deploys the folder where the file was converted. Create a badge from https://shields.io/.

1. Create a new branch
2. Set up github pages to serve from the root of this branch

3. Create a .yml github action and put it in .github/workflows

Here is a sample one that creates the environment, converts the notebook and then deploys the output folder to the specified branch.

name: build status

on:
  push:
    branches: [ master, dev ]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2
    - name: Set up Python 3.8
      uses: actions/setup-python@v2
      with:
        python-version: 3.8
    - name: Install dependencies
      run: |
        python -m pip install --upgrade pipenv
        pipenv install --dev --ignore-pipfile --deploy
    - name: Run tests
      run: |
        pipenv run pytest
    - name: Convert notebook
      run: |
        pipenv run jupyter nbconvert rolling_regressions.ipynb --to html --output html/index.html
    - name: Deploy html notebook to gh-pages
      uses: JamesIves/github-pages-deploy-action@4.1.2
      with:
        branch: gh-pages
        folder: html

Here is the small repo where this is set up: https://github.com/CalebEverett/finm33150-rolling-regressions/tree/master

[phcreery]

Please see my answer in the forum https://community.plot.ly/t/html-export-from-jupyter-notebook-for-offline-viewing/32104/13 I had missed an important information about the lack of internet connection,
Does

import plotly.io as pio
pio.renderers.default = "notebook"

work for you?

this works for me! thank you @emmanuelle

example:

import plotly
plotly.io.renderers.default = "notebook"

import plotly.express as px
iris = px.data.iris()
px.scatter(iris, x="sepal_width", y="sepal_length", color="petal_length")

then convert...

$ jupyter nbconvert --to html ~/Downloads/Untitled.ipynb
$ open /Users/william/Downloads/Untitled.html

Notice how it is still loading require.min.js and others. You have to disable caching (the dropdown next to the circled Offline checkbox) in order to simulate offline environment.