Plotly doesn't load most of the time

I used Python 3.8.0 and also 3.7.5 with plotly 3̶.̶1̶0̶.̶0̶ (4.3.0) on Windows 10 to run the example from https://plot.ly/python/creating-and-updating-figures/#figures-as-dictionaries:

fig = {
    "data": [{"type": "bar",
              "x": [1, 2, 3],
              "y": [1, 3, 2]}],
    "layout": {"title": {"text": "A Bar Chart"}}
}

# To display the figure defined by this dict, use the low-level plotly.io.show function
import plotly.io as pio
pio.show(fig)

That opens the Edge browser on http://127.0.0.1:60930/ but nothing happens. The page tries to load. Same happens in Firefox.

The terminal also just hangs and doesn’t show any message and I cannot interrupt it with CTRL + C. The processor gets crazy and the easiest way to stop it is to forcefully close the terminal.

However, it works 1 out of 10 times that I try and I don’t know why.

Edit: More specifically, I restart the PC, I run the example, it works. I close the webpage, run the example again, it doesn’t work and it runs on a different port every time I run it.

Hi @adi700, welcome to the forum! Is it possible for you to upgrade to a more recent version of plotly (the latest one is plotly 4.3, and version 4 introduced some major changes to the API)? The documentation corresponds to plotly >= 4.
If you installed plotly from Anaconda, you can get plotly 4.3 (https://anaconda.org/plotly/plotly).

Hi @Emmanuelle, sorry, I am actually using the latest 4.3.0 version. I don’t know why I said I was using an older version. Just tried it again to make sure and I can again confirm I get the graph very rarely displayed.

ok; are you working in the Jupyter notebook or in a different IDE (IPython shell, spyder, etc.)? If you’re in the notebook can you try instead

import plotly.graph_objects as go
fig = go.Figure({
    "data": [{"type": "bar",
              "x": [1, 2, 3],
              "y": [1, 3, 2]}],
    "layout": {"title": {"text": "A Bar Chart"}}
})
fig.show()

?
If you’re not in the notebook could you read through https://plot.ly/python/renderers/ and try the examples? For example to set up the renderer as firefox you would do

import plotly.io as pio
pio.renderers.default = 'firefox'
import plotly.graph_objects as go
fig = go.Figure(
    data=[go.Bar(y=[2, 1, 3])],
    layout_title_text="A Figure Displayed with fig.show()"
)
fig.show()

and it should open the figure in Firefox (I just tried on my machine).

I am on VS Code. I am running the script as a .py file using the VS Code integrated terminal. I also tried to run the .py file from the Windows native command line and got the same behavior.

Again, your code shows the graph the first time I run it, but it doesn’t work anymore after that. Only if I wait for a few minutes and run it again it shows the graph.

Is it possible that the first run blocks the consequent runs somehow?

What is the output of

import plotly.io as pio
pio.renderers.default

? You should set pio.renderers.default to vscode if you’re using vscode (I don’t know whether it should be configured automatically for you or not).

Also are you using the vscode notebook interface (https://code.visualstudio.com/docs/python/jupyter-support)?

I am not using the VSC notebook interface. Just executing the .py file through the VSC terminal. I also tried to execute the .py file through the normal Windows cmd.

The output of:

import plotly.io as pio
pio.renderers.default

is:
browser

If I set pio.renderers.default to 'vscode'
I get the source code printed out in the terminal:

{'application/vnd.plotly.v1+json': {'config': {'plotlyServerURL': 'https://plot.ly'}, 'data': [{'type': 'bar', 'y': [2, 1, 3]}], 'layout': {'template': {'data': {'bar': [{'error_x': {'color': '#2a3f5f'}, 'error_y': {'color': '#2a3f5f'}, 'marker': {'line': {'color': '#E5ECF6', 'width': 0.5}}, 'type': 'bar'}], 'barpolar': [{'marker': {'line': {'color': '#E5ECF6', 'width': 0.5}}, 'type': 'barpolar'}], 'carpet': [{'aaxis': {'endlinecolor': '#2a3f5f', 'gridcolor': 'white', 'linecolor': 'white', 'minorgridcolor': 'white', 'startlinecolor': '#2a3f5f'}, 'baxis': {'endlinecolor': '#2a3f5f', 'gridcolor': 'white', 'linecolor': 'white', 'minorgridcolor': 'white', 'startlinecolor': '#2a3f5f'}, 'type': 'carpet'}], 'choropleth': [{'colorbar': {'outlinewidth': 0, 'ticks': ''}, 'type': 'choropleth'}], 'contour': [{'colorbar': {'outlinewidth': 0, 'ticks': ''}, 'colorscale': [[0.0, '#0d0887'], [0.1111111111111111, '#46039f'], [0.2222222222222222, 
'#7201a8'], [0.3333333333333333, '#9c179e'], [0.4444444444444444, '#bd3786'], [0.5555555555555556, '#d8576b'], [0.6666666666666666, '#ed7953'], [0.7777777777777778, '#fb9f3a'], [0.8888888888888888, '#fdca26'], [1.0, '#f0f921']], 'type': 'contour'}], 'contourcarpet': [{'colorbar': {'outlinewidth': 0, 'ticks': ''}, 'type': 'contourcarpet'}], 'heatmap': [{'colorbar': {'outlinewidth': 0, 'ticks': ''}, 'colorscale': [[0.0, '#0d0887'], [0.1111111111111111, '#46039f'], [0.2222222222222222, '#7201a8'], [0.3333333333333333, '#9c179e'], [0.4444444444444444, '#bd3786'], [0.5555555555555556, '#d8576b'], [0.6666666666666666, '#ed7953'], [0.7777777777777778, '#fb9f3a'], [0.8888888888888888, '#fdca26'], [1.0, '#f0f921']], 'type': 'heatmap'}], 'heatmapgl': [{'colorbar': {'outlinewidth': 0, 
'ticks': ''}, 'colorscale': [[0.0, '#0d0887'], [0.1111111111111111, '#46039f'], [0.2222222222222222, '#7201a8'], [0.3333333333333333, '#9c179e'], [0.4444444444444444, '#bd3786'], [0.5555555555555556, '#d8576b'], [0.6666666666666666, '#ed7953'], [0.7777777777777778, '#fb9f3a'], [0.8888888888888888, '#fdca26'], [1.0, '#f0f921']], 'type': 'heatmapgl'}], 'histogram': [{'marker': {'colorbar': {'outlinewidth': 0, 'ticks': ''}}, 'type': 'histogram'}], 'histogram2d': [{'colorbar': {'outlinewidth': 0, 'ticks': ''}, 'colorscale': [[0.0, '#0d0887'], [0.1111111111111111, '#46039f'], [0.2222222222222222, '#7201a8'], [0.3333333333333333, '#9c179e'], [0.4444444444444444, '#bd3786'], [0.5555555555555556, '#d8576b'], [0.6666666666666666, '#ed7953'], [0.7777777777777778, '#fb9f3a'], [0.8888888888888888, '#fdca26'], [1.0, '#f0f921']], 'type': 'histogram2d'}], 'histogram2dcontour': [{'colorbar': {'outlinewidth': 0, 'ticks': ''}, 'colorscale': [[0.0, '#0d0887'], [0.1111111111111111, '#46039f'], [0.2222222222222222, '#7201a8'], [0.3333333333333333, '#9c179e'], [0.4444444444444444, '#bd3786'], [0.5555555555555556, '#d8576b'], [0.6666666666666666, '#ed7953'], [0.7777777777777778, '#fb9f3a'], [0.8888888888888888, '#fdca26'], [1.0, '#f0f921']], 'type': 'histogram2dcontour'}], 'mesh3d': [{'colorbar': {'outlinewidth': 0, 'ticks': ''}, 'type': 'mesh3d'}], 'parcoords': [{'line': {'colorbar': {'outlinewidth': 0, 'ticks': ''}}, 'type': 'parcoords'}], 'pie': [{'automargin': True, 'type': 'pie'}], 'scatter': [{'marker': {'colorbar': {'outlinewidth': 0, 'ticks': ''}}, 'type': 'scatter'}], 'scatter3d': [{'line': {'colorbar': {'outlinewidth': 0, 'ticks': ''}}, 'marker': {'colorbar': {'outlinewidth': 0, 'ticks': ''}}, 'type': 'scatter3d'}], 'scattercarpet': [{'marker': {'colorbar': {'outlinewidth': 0, 'ticks': ''}}, 'type': 'scattercarpet'}], 'scattergeo': [{'marker': {'colorbar': {'outlinewidth': 0, 'ticks': ''}}, 'type': 'scattergeo'}], 'scattergl': [{'marker': {'colorbar': {'outlinewidth': 0, 'ticks': ''}}, 'type': 'scattergl'}], 'scattermapbox': [{'marker': {'colorbar': {'outlinewidth': 0, 'ticks': ''}}, 'type': 'scattermapbox'}], 'scatterpolar': [{'marker': {'colorbar': {'outlinewidth': 0, 'ticks': ''}}, 'type': 'scatterpolar'}], 'scatterpolargl': [{'marker': {'colorbar': {'outlinewidth': 0, 'ticks': ''}}, 'type': 'scatterpolargl'}], 'scatterternary': [{'marker': {'colorbar': {'outlinewidth': 0, 'ticks': ''}}, 'type': 'scatterternary'}], 'surface': [{'colorbar': {'outlinewidth': 0, 'ticks': ''}, 'colorscale': [[0.0, '#0d0887'], [0.1111111111111111, '#46039f'], [0.2222222222222222, '#7201a8'], [0.3333333333333333, '#9c179e'], [0.4444444444444444, '#bd3786'], [0.5555555555555556, '#d8576b'], [0.6666666666666666, '#ed7953'], [0.7777777777777778, '#fb9f3a'], [0.8888888888888888, '#fdca26'], [1.0, '#f0f921']], 't '#ed7953'], [0.7777777777777778, '#fb9f3a'], [0.8888888888888888, '#fdca26'], [1.0, '#f0f921']], 'sequentialminus': [[0.0, '#0d0887'], [0.1111111111111111, 
'#46039f'], [0.2222222222222222, '#7201a8'], [0.3333333333333333, '#9c179e'], [0.4444444444444444, '#bd3786'], [0.5555555555555556, '#d8576b'], [0.6666666666666666, '#ed7953'], [0.7777777777777778, '#fb9f3a'], [0.8888888888888888, '#fdca26'], [1.0, '#f0f921']]}, 'colorway': ['#636efa', '#EF553B', '#00cc96', '#ab63fa', '#FFA15A', '#19d3f3', '#FF6692', '#B6E880', '#FF97FF', '#FECB52'], 'font': {'color': '#2a3f5f'}, 'geo': {'bgcolor': 'white', 'lakecolor': 'white', 'landcolor': '#E5ECF6', 'showlakes': True, 'showland': True, 'subunitcolor': 'white'}, 'hoverlabel': {'align': 'left'}, 'hovermode': 'closest', 'mapbox': {'style': 'light'}, 'paper_bgcolor': 'white', 'plot_bgcolor': '#E5ECF6', 'polar': {'angularaxis': {'gridcolor': 'white', 'linecolor': 'white', 'ticks': ''}, 'bgcolor': '#E5ECF6', 'radialaxis': {'gridcolor': 'white', 'linecolor': 'white', 'ticks': ''}}, 'scene': {'xaxis': {'backgroundcolor': '#E5ECF6', 'gridcolor': 'white', 'gridwidth': 2, 'linecolor': 'white', 'showbackground': True, 'ticks': '', 'zerolinecolor': 'white'}, 'yaxis': {'backgroundcolor': '#E5ECF6', 'gridcolor': 'white', 'gridwidth': 2, 'linecolor': 'white', 'showbackground': True, 'ticks': '', 'zerolinecolor': 'white'}, 'zaxis': {'backgroundcolor': '#E5ECF6', 'gridcolor': 'white', 'gridwidth': 2, 'linecolor': 'white', 'showbackground': True, 'ticks': '', 'zerolinecolor': 'white'}}, 'shapedefaults': {'line': {'color': 
'#2a3f5f'}}, 'ternary': {'aaxis': {'gridcolor': 'white', 'linecolor': 'white', 'ticks': ''}, 'baxis': {'gridcolor': 'white', 'linecolor': 'white', 'ticks': ''}, 'bgcolor': '#E5ECF6', 'caxis': {'gridcolor': 'white', 'linecolor': 'white', 'ticks': ''}}, 'title': {'x': 0.05}, 'xaxis': {'automargin': True, 'gridcolor': 'white', 'linecolor': 'white', 'ticks': '', 'title': {'standoff': 15}, 'zerolinecolor': 'white', 'zerolinewidth': 2}, 'yaxis': {'automargin': True, 'gridcolor': 'white', 'linecolor': 'white', 'ticks': '', 'title': {'standoff': 15}, 'zerolinecolor': 'white', 'zerolinewidth': 2}}}, 'title': {'text': 'A Figure Displayed with fig.show()'}}}}

If I set pio.renderers.default to 'firefox' I get:

raise Error("could not locate runnable browser")
webbrowser.Error: could not locate runnable browser

OK, could you please try

import plotly.io as pio
print(pio.renderers.default)
import plotly.graph_objects as go
fig = go.Figure(
    data=[go.Bar(y=[2, 1, 3])],
    layout_title_text="A Figure Displayed with fig.show()"
)
fig.write_html('tmp.html', auto_open=True)

I ran the code. Microsoft Edge loads the tmp.html page as blank displaying a message at the bottom:
“Internet Explorer restricted this webpage from running scripts or ActiveX controls” and there’s a button “Allow blocked content” next to the message.

Only when if I press that button does the graph display. It seem Microsoft Edge (aka Internet Explorer) is blocking the content?

And can’t you allow Edge to always allow this kind of content? (if you have several choices)

I ended up embedding the plotly code into a flask app. That works flawlessly. Thanks for your help!

Here’s an example if anyone wants to do the same:

app.py:

from flask import Flask, render_template
import plotly.figure_factory as ff
import plotly
import json

import numpy as np
import pandas as pd

app = Flask(__name__)

df_sample = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/minoritymajority.csv')
df_sample_r = df_sample[df_sample['STNAME'] == 'California']

values = df_sample_r['TOT_POP'].tolist()
fips = df_sample_r['FIPS'].tolist()

colorscale = [
    'rgb(193, 193, 193)',
    'rgb(239,239,239)',
    'rgb(195, 196, 222)',
    'rgb(144,148,194)',
    'rgb(101,104,168)',
    'rgb(65, 53, 132)'
]

fig = ff.create_choropleth(
    fips=fips, values=values, scope=['CA', 'AZ', 'Nevada', 'Oregon', ' Idaho'],
    binning_endpoints=[14348, 63983, 134827, 426762, 2081313], colorscale=colorscale,
    county_outline={'color': 'rgb(255,255,255)', 'width': 0.5}, round_legend_values=True,
    legend_title='Population by County', title='California and Nearby States'
)
fig.layout.template = None
graphJSON = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)

@app.route("/")
def home():
    return render_template('index.html', v = graphJSON)

if __name__ == "__main__":
    app.run(debug = True)

templates/index.html:

<html>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<H2> A map with Folium </H2>
<p>A map example using the Folium library</p>
<div class="chart" id="bargraph">
    <script>
        var graphs = {{v | safe}};
        Plotly.plot('bargraph', graphs,{});
    </script>
</div>
<p>Attributing Stamen Terrain Maps</p>
</html>