How to get python graph output into html webpage directly

Question

I am using different libraries like pandas and numpy for generating a dataframe, which eventually generate a graph.

Now, I need to show this graph into a simple webpage which is in HTML.

Note: I am also willing to take 2-3 input from user in HTML page then pass that data to my python file. Afterwards, python file generates a graph based on given data(from HTML page) and I need to pass this graph to an HTML page.

df[[main_data]].plot()

Here, main_data is variable whose value is coming from HTML page. And I am doing python code in SPYDER. And I am not using any Framework.

score 24 · Accepted Answer · edited Aug 25 '21 at 14:26

This depends somewhat on what you mean by showing the graph as html. I can see a couple ways, the first and simplest is to save the figure as a PNG and then supply the path to the file in the html:

Python code:

import pandas as pd
import matplotlib.pyplot as plt

s = pd.Series([1, 2, 3])
fig, ax = plt.subplots()
s.plot.bar()
fig.savefig('my_plot.png')

HTML:

<img src='my_plot.png'/>

The second way would be to encode the figure as base64. This has the advantage of being portable, and the disadvantage of making very large unwieldy html files. I am not a web programmer, so there may be other caveats as well that I am not aware of.

python:

import io
import base64

def fig_to_base64(fig):
    img = io.BytesIO()
    fig.savefig(img, format='png',
                bbox_inches='tight')
    img.seek(0)

    return base64.b64encode(img.getvalue())

encoded = fig_to_base64(fig)
my_html = '<img src="data:image/png;base64, {}">'.format(encoded.decode('utf-8'))

my_html can be passed into you html file, or you can inject it with jinja2 or whatever you use. Here is SO post regarding viewing base64 in html https://stackoverflow.com/a/8499716/3639023 and encoding images as base64 How to convert PIL Image.image object to base64 string?

I would also give a shot to graph.js library. You can pass your data from python to HTML using the request library (or implementing a framework like Django or Flask) — Enrico, Dec 10 '19 at 09:32

score 7 · Answer 2 · answered Dec 29 '19 at 07:36

The best way to export matplotlib charts to the web browser is to Use mpld3 library. Here is the example.

import matplotlib.pyplot as plt
import numpy as np
import pandas as pd
import mpld3
from mpld3 import plugins
np.random.seed(9615)

# generate df
N = 100
df = pd.DataFrame((.1 * (np.random.random((N, 5)) - .5)).cumsum(0),
                  columns=['a', 'b', 'c', 'd', 'e'],)

# plot line + confidence interval
fig, ax = plt.subplots()
ax.grid(True, alpha=0.3)

for key, val in df.iteritems():
    l, = ax.plot(val.index, val.values, label=key)
    ax.fill_between(val.index,
                    val.values * .5, val.values * 1.5,
                    color=l.get_color(), alpha=.4)

# define interactive legend

handles, labels = ax.get_legend_handles_labels() # return lines and labels
interactive_legend = plugins.InteractiveLegendPlugin(zip(handles,
                                                         ax.collections),
                                                     labels,
                                                     alpha_unsel=0.5,
                                                     alpha_over=1.5, 
                                                     start_visible=True)
plugins.connect(fig, interactive_legend)

ax.set_xlabel('x')
ax.set_ylabel('y')
ax.set_title('Interactive legend', size=20)

mpld3.show()

https://mpld3.github.io/quickstart.html

score 2 · Answer 3 · edited Apr 12 '20 at 14:48

2

You can also use Plotly for that. This provides more interactive graphs. Also you can write the generated data in HTML files, apply bootstrap styling.

Check out this tutorial on their website.

edited Apr 12 '20 at 14:48

sudo make install

5,629
3
36
48

answered Mar 14 '20 at 05:40

niranjan patidar

139
1
8

score 1 · Answer 4 · edited Jan 12 '20 at 18:56

You may like to save the graph into specific location and write script to read the image file lets say pic.png into HTML. For taking input, you may create a Tabular structure of data and after each input, save the data to a file, lets say file.csv and read it in Python and keep adding values from input.

import matplotlib.pyplot as plt
df.hist()
plt.savefig('path/to/pic.png')

Now create HTML code to read that image file and output it as you want. I hope this helps.

How to get python graph output into html webpage directly

4 Answers4

Linked

Related