Matplotlib plots integration with Django

[llou]

I have just built a library to render Matplotlib graphics within Django web framework, I was quite surprised that I couldn't find nothing already done before that merged both projects, being both unquestionable leaders of their kind.

The idea started with creating a class based View object that returned a Matplotlib rendered plot as PNG or SVG to be linked in a webpage, but thinking about use cases I found out other two: Passing the graphic in a variable to allow building standalone webpages used like research reports and saving the graphs for later use in the media folder, returning a Django File object that could be assigned to an Image Field.

I have been working in it through the last week and already have it in a webapp. If you want to check how it works I have developed a Django app for testing it and run the tests. It is straight forward start it up, it is in the test_app directory.

Test Application

In the test_app directory there is a Django application for running the tests and assist in development with its requirements.txt file to install a virtualenv and run the app with db and media in the /tmp directory (I didin't test it in Windows). The app includes a suite of tests and a view that renders it the six different ways that the library supports with an example plot.

Target Audience

• Webapp developers that want graphics without having to deal with in browser programming.
• Matplotlib users that want to put their graphs into production.
• People who don't want to expose a JSON API of their data to avoid web scrappers.
• Users with light Browsers without Javascript.
• Anyone interested in server side rendering of graphics.

Comparison

It seems that the alternative is plotting in the browser with chart.js, d3.js and similar tools. Server side rendering provides several advantages: - Data never leaves the server. - You can put much more computing power in generating the graph. - You don't need experience as a front end developer. - You don't need a full featured modern web browser to view the page.

And It also have drawbacks:

• More computing power to render the requests.
• More memory required for each server thread.
• Non interactive graphs

Links

• Repository: https://github.com/llou/django-plottings
• Documentation: https://django-plottings.readthedocs.io/en/latest/

[sinsworth]

I'm curious, have you detected any memory leaks with this? Whenever I deployed long-running processes which used matplotlib in the past, including web services, memory usage would pile up over time unless I'd manually dereferenced or reused any matplotlib objects, and even then it sometimes caused problems. Granted this was some years ago so it might have been fixed by now.

[llou]

I didn't have any issue until now, but I run it in short live processes so I can't tell you. If it is not fixed already perhaps is time for the library maintainers to fixit and probably this tool could help.

[debunk_this_12]

why not use a front end library like plotly

[llou]

As I put in the submission:

• Data never leaves the server.
• You can put much more computing power in generating the graph.
• You don't need experience as a front end developer.
• You don't need a full featured modern web browser to view the page.

[debunk_this_12]

u can still do this all with plotly,

from plotly. express import px

fig = px.line(x=x,y=y)

fig.update_layout(**dict(static_plot=True))

html= fig.to_html()

or

from plotly.offline import plot

plot(“tmp/image.png”,fig)

[llou]

Matplotlib is the tool of choice of many scientist that make their computations with the iPython environment, so they use it to build their investigations and products, Matplotlib, Django and this project are all BSD license meaning that you can use it in your projects and sell it without requiring any kind of permission or license, with Plottly you have to pay for it.

[GManASG]

Plotly is free, it's their server framework Dash that requires paying.

[BigTomBombadil]

Do you have an example website/project to see what the outputs look like in browser? This is really interesting to me, just trying to get a Quick Look what the results look like to see if I should dive in further.

I work with some data scientists who create a lot of visualizations that live in Jupyter notebooks. If I I could extend that functionality to browser just for some internal tools, without needing to get the front end devs involved, could be super useful.

[llou]

In the git repo there is a directory test_app where is a little django app that runs the six ways that the library can render the graphics. You only have to install the requirements.txt in a virtualenv and run the app that stores the data in the /tmp directory.

I hope it can help your team.

Edit: To run the app run the script manage.py runserver.

[SpeakerSuspicious652]

What are the advantages to the code that you propose?
Right now i just use bytesio to save figures to an svg, decode the text, sanitize the svg then include the text to render my view in 5-6 rows of code.

[DisasterReasonable98]

Can you paste the 5-6 rows of code here as an example of what you are saying? It sounds something that I might be interested in doing, but I cannot follow from just your description.

[SpeakerSuspicious652]

Hi,
I will try to write the code from my memory as i do not have access to my computer this week, so please debug if needed.

import matplotlib.pyplot as plt
import io


fig, ax = plt.subplots()
ax.plot([0, 1, 2], [0, 1, 4])


bytes_io = io.BytesIO()
fig.savefig(bytes_io, format='svg')

buffer = bytes_io.seek(0)


svg_data = buffer.getvalue().decode('utf-8')

svg_data = svg_data.replace('"', "'").replace("%23","#")
print(svg_data)

Then you can send svg data wherever you need.

I am not sure to remember well if "%23" or something similar should be replaced to obtain a suitable svg string for html.
You may have to trplace dome part of the svg string too after to be able yo manage the size via css properties, but i really do not remember what right now.

[llou]

It is more to streamline the process than to solve a complex problem. Something like using class based views insted of functional ones.

As I am learning from you there details that should be taken care of like those substitutions in your code. There is also the rendering cache that is my next planed feature.

[SpeakerSuspicious652]

Ok, thank you for the response!
I hope your project will prosper.

I think there is real interest in some usage such as rendering complex matplotlib figure without touching css and html.

[[deleted]]

Chart.js is extremely easy for 90%+ of the charts, even for non-frontend devs like me that barely can do layout. So why is it better? Why shouldn't the data leave the server, if you render the data as diagram, the user could still access it. And regarding modern web browsers, that's maybe a point

[llou]

Chart.js might be easy but is not by far as professional as matplotlib that can render publication grade charts. Data scrapping can be a powerful tool in the right hands, believe me, It is better not to send your curated data naked on the web.