Plotly with pyscript in Django HTML page

📊 Plotly Python
1

Hello,
I am trying to integrate Plotly with the new method of using Python on an HTML page.

So I am trying to run this example:

<html>
  <head>

    <title>plotly.express</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>

    <py-env>
      - plotly-express
    </py-env>
    </head>
    <body>

    <center><h3>Wait it took long time to load</h3></center>
    <div id="mpl"></div>
      <py-script output="mpl">
import plotly.express as px
df = px.data.gapminder().query("year == 2007").query("continent == 'Europe'")
df.loc[df['pop'] < 2.e6, 'country'] = 'Other countries' # Represent only large countries
fig = px.pie(df, values='pop', names='country', title='Population of European continent')

fig.show()
      </py-script>
    </body>
</html>

After a few minutes :frowning: I get an error !

JsException(PythonError: Traceback (most recent call last): File "/lib/python3.10/site-packages/plotly/io/_renderers.py", line 532, in webbrowser.get() AttributeError: module 'webbrowser' has no attribute 'get' During handling of the above exception, another exception occurred: Traceback (most recent call last): File "/lib/python3.10/site-packages/_pyodide/_base.py", line 429, in eval_code .run(globals, locals) File "/lib/python3.10/site-packages/_pyodide/_base.py", line 300, in run coroutine = eval(self.code, globals, locals) File "", line 6, in File "/lib/python3.10/site-packages/plotly/basedatatypes.py", line 3400, in show return pio.show(self, *args, **kwargs) File "/lib/python3.10/site-packages/_plotly_utils/importers.py", line 36, in __getattr__ class_module = importlib.import_module(rel_module, parent_name) File "/lib/python3.10/importlib/__init__.py", line 126, in import_module return _bootstrap._gcd_import(name[level:], package, level) File "", line 1050, in _gcd_import File "", line 1027, in _find_and_load File "", line 1006, in _find_and_load_unlocked File "", line 688, in _load_unlocked File "", line 883, in exec_module File "", line 241, in _call_with_frames_removed File "/lib/python3.10/site-packages/plotly/io/_renderers.py", line 534, in except webbrowser.Error: AttributeError: module 'webbrowser' has no attribute 'Error' )
1 Like
2

Hi,
Take a look here.
In example 2 it is said that pyscript doesn’t support Plotly for now (the guy use Brokeh because of that)
I hope that help you

1 Like
3

Hi,

I toyed around with plotly & pyscript myself and created this working example (based on this guide):

<html>

<head>

    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>

    <py-env>
        - numpy
        - plotly
    </py-env>

</head>

<body>

    <h1>Plotly Example</h1>
    
    <div id="chart1"></div>

    <script type='text/javascript'>
        function plot(graph, chart) {
            var figure = JSON.parse(graph)
            Plotly.newPlot(chart, figure, {});
        }
    </script>
    
    <py-script id="main">
        import numpy as np
        import plotly.graph_objects as go
        import js
        
        x = np.arange(50_000)
        noisy_sin = (3 + np.sin(x / 200) + np.random.randn(len(x)) / 10) * x / 1_000
        
        fig = go.Figure()
        fig.add_trace(go.Scatter(x=x, y=noisy_sin))
        
        js.plot(fig.to_json(), "chart1")
    </py-script>

</body>

</html>

I hope this might help you!

Cheers,
Jeroen