I am working on figuring out how to put a Matplotlib graph in a web page.
I copied the following example from the Matplotlib examples:
The console running the code then says:
Thanks,
JP.
I tried the same thing using the Flask example:
I copied the following example from the Matplotlib examples:
"""
This example demonstrates how to embed matplotlib WebAgg interactive
plotting in your own web application and framework. It is not
necessary to do all this if you merely want to display a plot in a
browser or use matplotlib's built-in Tornado-based server "on the
side".
The framework being used must support web sockets.
"""
import io
try:
import tornado
except ImportError:
raise RuntimeError("This example requires tornado.")
import tornado.web
import tornado.httpserver
import tornado.ioloop
import tornado.websocket
from matplotlib.backends.backend_webagg_core import (
FigureManagerWebAgg, new_figure_manager_given_figure)
from matplotlib.figure import Figure
import numpy as np
import json
def create_figure():
"""
Creates a simple example figure.
"""
fig = Figure()
a = fig.add_subplot(111)
t = np.arange(0.0, 3.0, 0.01)
s = np.sin(2 * np.pi * t)
a.plot(t, s)
return fig
# The following is the content of the web page. You would normally
# generate this using some sort of template facility in your web
# framework, but here we just use Python string formatting.
html_content = """
<html>
<head>
<!-- TODO: There should be a way to include all of the required javascript
and CSS so matplotlib can add to the set in the future if it
needs to. -->
<link rel="stylesheet" href="_static/css/page.css" type="text/css">
<link rel="stylesheet" href="_static/css/boilerplate.css" type="text/css" />
<link rel="stylesheet" href="_static/css/fbm.css" type="text/css" />
<link rel="stylesheet" href="_static/jquery/css/themes/base/jquery-ui.min.css" >
<script src="_static/jquery/js/jquery-1.11.3.min.js"></script>
<script src="_static/jquery/js/jquery-ui.min.js"></script>
<script src="mpl.js"></script>
<script>
/* This is a callback that is called when the user saves
(downloads) a file. Its purpose is really to map from a
figure and file format to a url in the application. */
function ondownload(figure, format) {
window.open('download.' + format, '_blank');
};
$(document).ready(
function() {
/* It is up to the application to provide a websocket that the figure
will use to communicate to the server. This websocket object can
also be a "fake" websocket that underneath multiplexes messages
from multiple figures, if necessary. */
var websocket_type = mpl.get_websocket_type();
var websocket = new websocket_type("%(ws_uri)sws");
// mpl.figure creates a new figure on the webpage.
var fig = new mpl.figure(
// A unique numeric identifier for the figure
%(fig_id)s,
// A websocket object (or something that behaves like one)
websocket,
// A function called when a file type is selected for download
ondownload,
// The HTML element in which to place the figure
$('div#figure'));
}
);
</script>
<title>matplotlib</title>
</head>
<body></body>
</html>The code seems to be working, when I run it I get:http://127.0.0.1:8080/ Press Ctrl+C to quitBut when I use the browser to go to http://127.0.0.1:8080/ all I get on the browser is a blank screen.
The console running the code then says:
http://127.0.0.1:8080/ Press Ctrl+C to quit WARNING:tornado.access:404 GET /_static/jquery/js/jquery-1.11.3.min.js (127.0.0.1) 0.54msWhat am I missing?
Thanks,
JP.
I tried the same thing using the Flask example:
from flask import Flask, make_response
app = Flask(__name__)
@app.route("/simple.png")
def simple():
import datetime
import StringIO
import random
from matplotlib.backends.backend_agg import FigureCanvasAgg as FigureCanvas
from matplotlib.figure import Figure
from matplotlib.dates import DateFormatter
fig=Figure()
ax=fig.add_subplot(111)
x=
y=
now=datetime.datetime.now()
delta=datetime.timedelta(days=1)
for i in range(10):
x.append(now)
now+=delta
y.append(random.randint(0, 1000))
ax.plot_date(x, y, '-')
ax.xaxis.set_major_formatter(DateFormatter('%Y-%m-%d'))
fig.autofmt_xdate()
canvas=FigureCanvas(fig)
png_output = StringIO.StringIO()
canvas.print_png(png_output)
response=make_response(png_output.getvalue())
response.headers['Content-Type'] = 'image/png'
return response
if __name__ == "__main__":
app.run()The results are similar, 404.
