Plotly doesn't load most of the time

šŸ“Š Plotly Python
1

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.

2 Likes
2

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).

3

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.

4

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).

5

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?

6

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).

7

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

8

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
9

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)
10

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?

11

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

1 Like
12

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>
13

Same problem on Microsoft Edge. fig.show() appears to work once every 5 minutes. Unlike @adi700ā€™s, I donā€™t see any blocking content message.

@Emmanuelle, I tried:
pio.renderers.default='chrome'
But although my chrome is running, it says:

~\Miniconda3\lib\webbrowser.py in get(using)
     63             elif command[0] is not None:
     64                 return command[0]()
---> 65     raise Error("could not locate runnable browser")
     66
     67 # Please note: the following definition hides a builtin function.

Error: could not locate runnable browser

Any idea on how to fix it?

Nevertheless, this appears to work without any issue though:

fig.write_html('tmp.html', auto_open=True)
14

I have exactly the same problem. Browser page gets launched tries to connect for 2 seconds, the python script is still running for these 2 seconds. Script then exists and I get the 127.0.0.1 refused to connect error. No errors or warnings are shown in the Python terminal window.
Tried this in both plain Python and Anaconda.

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()
16

Hi
I have the same issue.
I am running PLotly on Windows 10, PyCharm, Python version 3.7, Microsoft Edge.
The server launch and only randomly displays the charts. No error messages are displyed which makes the debugging impossible.
When I write the chart into html (pio.write_html(fig, file=ā€˜temp.htmlā€™)), and open it with Egde or Chrome it works though.

1 Like
17

Experiencing very similar issues in vscode. Is this a known issue?