Saving graphs to .html using mpld3

Question

I am trying to show a graph using seaborn and mpld3 but in a .html file. When I use the command mpld3.show(), a new window pops and the graph is shown in a local webserver created (like the documentation describes). However, when trying to save it in a .html file, the graph comes empty but I can see some icons like move and zoom avaliable....

With mpld3.show()

sns.set(style="whitegrid")
sns.barplot(x=df.index.tolist(), y=df['Salário'])
mpld3.show()

Graph how its supposed to be:

Trying to save to .html file using save_html():

sns.set(style="whitegrid")
sns.barplot(x=df.index.tolist(), y=df['Salário'])
fig = plt.figure()
mpld3.save_html(fig, "./templates/graph_exp.html")

Bugged graph with working icons

Can someone help me make this graph appear normal saving to a .html file? :)

i suggest encoding to base 64 – Constantine Westerink Mar 01 '21 at 19:06 — Constantine Westerink, Mar 01 '21 at 19:06

score 0 · Accepted Answer · answered Mar 01 '21 at 19:11

0

I am not sure how save_html() works but this is what i use on my flask website.

This solution works if you do not need to save the image.

import base64
import io


pngImage = io.BytesIO()
FigureCanvas(fig).print_png(pngImage) #fig is my matPlotlib instance of Figure()

# Encode PNG image to base64 string
image = "data:image/png;base64,"
image += base64.b64encode(pngImage.getvalue()).decode('utf8')

then in html use:

<img src="{{image}}">

answered Mar 01 '21 at 19:11

Constantine Westerink

281
4
13

Can you send me your imports? I am having problem using '.print_png' – Dan Estulla Mar 01 '21 at 20:31
``` from matplotlib.backends.backend_agg import FigureCanvasAgg as FigureCanvas``` ```from matplotlib.figure import Figure``` ```import base64``` ```import io``` – Constantine Westerink Mar 01 '21 at 20:45
1

Now my image shows a broken icon. Any thoughts? haha – Dan Estulla Mar 02 '21 at 04:42
I would addthis line: ```print(base64.b64encode(pngImage.getvalue()).decode('utf8'))``` then go paste the base64 from the console (it is normal that it is very long) in this website: https://base64-to-image.com/ – Constantine Westerink Mar 02 '21 at 05:07
If everything works you should see your image. – Constantine Westerink Mar 02 '21 at 05:12
1

In the end I've used Plotly to render the graph :D. Anyway, thanks for your help :))) – Dan Estulla Mar 02 '21 at 17:49

Saving graphs to .html using mpld3

1 Answers1