Comment intégrer un graphique matplotlib dans une page web Django ?

Question

Soyez donc indulgent avec moi car je suis TRÈS novice en matière de Django, de Python et de développement Web en général. Ce que je veux faire, c'est afficher un graphique que j'ai réalisé avec matplotlib. J'ai réussi à faire en sorte que la page d'accueil redirige automatiquement vers le png du graphique (en fait, un onglet dans le navigateur avec le graphique affiché). Cependant, ce que je veux maintenant, c'est voir la page d'accueil actuelle avec le graphique simplement intégré. En d'autres termes, je veux voir la barre de navigation, etc. et ensuite le graphique dans le corps du site.

Jusqu'à présent, j'ai fait des recherches et j'ai une idée de la façon d'y parvenir. Ce que je pense, c'est d'avoir une vue spéciale qui renvoie simplement le graphique. Puis, d'une manière ou d'une autre, accéder à cette image png à partir d'une balise img src dans mon modèle que j'utiliserai pour afficher mes données.

Code graphique :

from django.shortcuts import render
import urllib
import json
from django.http import HttpResponse
from matplotlib.backends.backend_agg import FigureCanvasAgg as FigureCanvas
from matplotlib.figure import Figure
import datetime as dt
import pdb

def index(request):
    stock_price_url = 'https://www.quandl.com/api/v3/datatables/WIKI/PRICES.json?ticker=GOOGL&date.gte=20151101&qopts.columns=date,close&api_key=KEY'

    date = []
    price = []

    #pdb.set_trace()
    source_code = urllib.request.urlopen(stock_price_url).read().decode()

    json_root = json.loads(source_code)
    json_datatable = json_root["datatable"]
    json_data = json_datatable["data"]

    for day in json_data:
        date.append(dt.datetime.strptime(day[0], '%Y-%m-%d'))
        price.append(day[1])

    fig=Figure()
    ax = fig.add_subplot(1,1,1)

    ax.plot(date, price, '-')

    ax.set_xlabel('Date')
    ax.set_ylabel('Price')
    ax.set_title("Google Stock")

    canvas = FigureCanvas(fig)
    response = HttpResponse(content_type='image/png')
    #canvas.print_png(response)
    return response

Code du modèle :

{% extends "home/header.html" %}
  {% block content %}
  <p>Search a stock to begin!</p>
  <img src="home/graph.py" />

  {% endblock %}

Ce que je reçois maintenant :

Page actuelle

Answer 1

Je pense que vous devriez décomposer cette ligne :

#canvas.print_png(response)

Vous pouvez facilement retourner le terrain en utilisant django HttpResponse à la place en utilisant quelques librairies supplémentaires. Dans la librairie matplotlib, il y a une FigureCanvasAgg qui vous donne accès au canevas où le tracé est rendu. Finalement, vous pouvez simplement le renvoyer comme HttpResponse. Voici un exemple très simple.

import matplotlib.pyplot as plt
import numpy as np
from matplotlib.backends.backend_agg import FigureCanvasAgg
from django.http import HttpResponse

def plot(request):
    # Data for plotting
    t = np.arange(0.0, 2.0, 0.01)
    s = 1 + np.sin(2 * np.pi * t)

    fig, ax = plt.subplots()
    ax.plot(t, s)

    ax.set(xlabel='time (s)', ylabel='voltage (mV)',
           title='About as simple as it gets, folks')
    ax.grid()

    response = HttpResponse(content_type = 'image/png')
    canvas = FigureCanvasAgg(fig)
    canvas.print_png(response)
    return response

Answer 2

Je sais que cette question est étiquetée " matplotlib ", mais j'avais besoin de faire la même chose et j'ai trouvé complot pour être plus facile à utiliser et plus attrayant aussi. Vous pouvez simplement tracer un graphique et ensuite, dans la vue, obtenir le code html du graphique en tant que :

# fig is plotly figure object and graph_div the html code for displaying the graph
graph_div = plotly.offline.plot(fig, auto_open = False, output_type="div")
# pass the div to the template

Dans le modèle, faites :

<div style="width:1000;height:100">
{{ graph_div|safe }}
</div>