python add matplotlib figure into webpage

Question

I have already read the following Call Python function from JavaScript code

interpol.py

import numpy as np
from math import sqrt
import matplotlib.pyplot as plt

def interpol(x0, x, y):
    x = np.asfarray(x)
    y = np.asfarray(y)
    ....
    return f0

if __name__ == '__main__':

    x = [-5,-4.19,-3.54,-3.31,-2.56,-2.31,-1.66,-0.96,-0.22,0.62,1.21]
    y = [0.01,0.01,0.03,0.04,0.07,0.09,0.16,0.28,0.45,0.65,0.77]
    plt.scatter(x, y)
    x_new = np.linspace(-6, 2)
    plt.plot(x_new, interpol(x_new, x, y)) #output the figure

    plt.show()

This python code output a figure.

I would like get x and y arrays from html input and give them to the python code (In this example I use x and y in the python, but I would like to get those from html input), and output the python figure into the webpage.

I know that I have to use server and I would like to use jQuery.ajax().

Tarik · Accepted Answer · 2023-12-24 06:42:33Z

1

Adding to previous answer, you can save the figure as an image to a ByteIO stream. Then serve it as an image. That avoids having to use temporary files. The other option is to use the Plotly library that provides excellent interactivity.

edited Dec 24, 2023 at 6:42

answered Dec 7, 2023 at 16:10

Tarik

11.2k2 gold badges31 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Allan · Accepted Answer · 2023-06-10 00:42:45Z

Disclaimer: This is a very broad question for which I can only give a very high-level answer.

You have different strategies to

"add matplotlib figures into webpage"

Save the matplotlib graphs into svg/png format and include them in the rendered webpage, plt.savefig("test.svg", format="svg").
- Pro(s): Easy, no need for advanced JS at your client code (This can be done without using javascript at all actually)
- Con(s): The client UI will not be interactive.
Convert your graphs into JSON objects via for example mpld3 and render them in your client code with D3.js.
- Pro(s): This will allow you to have interactive graphs at client side.
- Con(s): A little bit more complex than the first option.
Bonus: For more advanced graphs you can directly use altair at python level to generate your graphs. https://altair-viz.github.io/ and render them at your client level via vega-embed. For more details: https://altair-viz.github.io/user_guide/display_frontends.html

Collectives™ on Stack Overflow

python add matplotlib figure into webpage

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related