Bottom Page

Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
 Tornado / Flask help needed
#1
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:
"""
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 quit
But 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.54ms
What 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.
Quote
#2
(Aug-27-2017, 06:25 PM)jogl Wrote: I tried the same thing using the Flask example:
To clean it up a little.
Using import io and png_output = io.BytesIO()
All imports out of function.
For running it,you most use this address browser http://127.0.0.1:5000/simple.png
from flask import Flask, make_response
import datetime, random
import io
from matplotlib.backends.backend_agg import FigureCanvasAgg as FigureCanvas
from matplotlib.figure import Figure
from matplotlib.dates import DateFormatter

app = Flask(__name__)
@app.route("/simple.png")
def simple():
    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 = io.BytesIO()
    canvas.print_png(png_output)
    response = make_response(png_output.getvalue())
    response.headers['Content-Type'] = 'image/png'
    return response

if __name__ == "__main__":
    app.run()
Quote
#3
Snippsat;

Thank you very much!

Of course, it makes sense now.

JP.
Quote

Top Page

Possibly Related Threads...
Thread Author Replies Views Last Post
  Flask: Making my first web site Truman 37 1,660 Aug-22-2019, 02:02 PM
Last Post: snippsat
  Web development using Flask and Python kirito85 4 329 Jun-14-2019, 02:13 AM
Last Post: kirito85
  [Flask] html error 405 SheeppOSU 0 188 Jun-08-2019, 04:42 PM
Last Post: SheeppOSU
  [Flask] No application found. SheeppOSU 1 302 Jun-01-2019, 02:58 PM
Last Post: SheeppOSU
  Python, flask, Django Ecniv 5 405 May-02-2019, 04:04 PM
Last Post: buran
  Flask tutorial: kintarowonders 1 560 Mar-27-2019, 07:37 PM
Last Post: nilamo
  About Error (Flask) bescf 1 310 Mar-20-2019, 08:18 PM
Last Post: nilamo
  Deploy flask app on Heroku Prince_Bhatia 0 464 Feb-20-2019, 09:05 AM
Last Post: Prince_Bhatia
  Help needed Caolan753 0 236 Feb-10-2019, 06:06 PM
Last Post: Caolan753
  Flask assertion error mebaysan 1 544 Feb-07-2019, 08:34 PM
Last Post: pascale

Forum Jump:


Users browsing this thread: 1 Guest(s)