[Résolu] [API][Graphique][matplotlib] probleme graphique - plusieurs graphique, et un n'est pas affiché. par TheoValet1 - page 1

Bonjour a tous, j'ai un problème pour lequel j'espère votre aide.

je dois traiter des données via une api, et les ressortir sur une page web via des graphiques en png

j'ai besoin de trois graphique, un qui me rend l'humidité et les températures en fonction de la date,
et deux autres qui renvois l'humidité/La température en fonction de la date.

voici mon api :

from io import BytesIO
from flask import Flask, render_template, request, Response
import json
import matplotlib


matplotlib.use('Agg')

from matplotlib.figure import Figure
import matplotlib.pyplot as plt
from matplotlib.backends.backend_agg import FigureCanvasAgg as CanvasVirtuel

# Ou se trouve le dossier a lier
#               ici il est dans web.
app = Flask(__name__)

@app.route("/")
def index():
    return render_template("index.html")


@app.route("/chart")
def chart():
    param = json.loads(request.args.get("param"))
    print(param)

    labels = []
    temperature = []
    humidite = []

    if param["title"] == "température / humidité":
        for key in param["datas"]:
            labels.append(key)
            temperature.append(param["datas"][key]["temperature"])
            humidite.append(param["datas"][key]["humidite"])
    elif param["title"] == "temperature":
        for key in param["datas"]:
            labels.append(key)
            temperature.append(param["datas"][key])
    elif param["title"] == "humidité":
        for key in param["datas"]:
            labels.append(key)
            humidite.append(param["datas"][key])

    fig, ax1 = plt.subplots()

    if "title" in param:
        fig.suptitle(param["title"])

    if temperature and humidite:
        # Si les deux existent, utilisez une double échelle y
        ax1.plot(labels, temperature, label='Température', color='b')
        ax2 = ax1.twinx()
        ax2.plot(labels, humidite, 'r-', label='Humidité')
    elif temperature:
        # Si seulement la température existe
        ax1.plot(labels, temperature, label='Température', color='b')
    elif humidite:
        # Si seulement l'humidité existe
        ax1.plot(labels, humidite, 'r-', label='Humidité')

    fig.savefig("chart.png", format="png")
    output = BytesIO()
    CanvasVirtuel(fig).print_png(output)

    return Response(output.getvalue(), mimetype="image/png")

if __name__ == "__main__":
    app.run

voici mon html :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <h1>graph</h1>


    <p>
        <img 
            src='/chart?param={ "type":"bar", "title" : "température / humidité", "datas":
    {
        "11/12" : {"temperature" : 20, "humidite" : 20},
        "12/12" : {"temperature" : 18, "humidite" : 25},
        "13/12" : {"temperature" : 15, "humidite" : 24},
        "14/12" : {"temperature" : 16, "humidite" : 19},
        "15/12" : {"temperature" : 19, "humidite" : 23}
    }    
    }' 
        
            alt=""
        />
    </p>
    <p>
        <img 
            src='/chart?param={ "type":"bar", "title" : "humidité", "datas":
    {
        "11/12" : 20,
        "12/12" : 25,
        "13/12" : 24,
        "14/12" : 19,
        "15/12" : 23
    }    
    }' 
        
            alt=""
        />
    </p>
    <p>
        <img 
            src='/chart?param={ "type":"bar", "title" : "température", "datas":
    {
        "11/12" : 20,
        "12/12" : 18,
        "13/12" : 15,
        "14/12" : 16,
        "15/12" : 19
    }    
    }' 
        
            alt=""
        />
    </p>

</body>
</html>

voici ce que me rend la console :

127.0.0.1 - - [23/Jan/2024 14:47:23] "GET / HTTP/1.1" 200 -

{'type': 'bar', 'title': 'température / humidité', 'datas': {'11/12': {'temperature': 20, 'humidite': 20}, '12/12': {'temperature': 18, 'humidite': 25}, '13/12': {'temperature': 15, 'humidite': 24}, '14/12': {'temperature': 16, 'humidite': 19}, '15/12': {'temperature': 19, 'humidite': 23}}}

{'type': 'bar', 'title': 'humidité', 'datas': {'11/12': 20, '12/12': 25, '13/12': 24, '14/12': 19, '15/12': 23}}

{'type': 'bar', 'title': 'température', 'datas': {'11/12': 20, '12/12': 18, '13/12': 15, '14/12': 16, '15/12': 19}}

127.0.0.1 - - [23/Jan/2024 14:47:24] "GET / HTTP/1.1" 200 -

{'type': 'bar', 'title': 'humidité', 'datas': {'11/12': 20, '12/12': 25, '13/12': 24, '14/12': 19, '15/12': 23}}

{'type': 'bar', 'title': 'température', 'datas': {'11/12': 20, '12/12': 18, '13/12': 15, '14/12': 16, '15/12': 19}}

127.0.0.1 - - [23/Jan/2024 14:47:24] "GET /chart?param={%20"type":"bar",%20"title"%20:%20"température",%20"datas":%20%20%20%20{%20%20%20%20%20%20%20%20"11/12"%20:%2020,%20%20%20%20%20%20%20%20"12/12"%20:%2018,%20%20%20%20%20%20%20%20"13/12"%20:%2015,%20%20%20%20%20%20%20%20"14/12"%20:%2016,%20%20%20%20%20%20%20%20"15/12"%20:%2019%20%20%20%20}%20%20%20%20%20%20%20%20} HTTP/1.1" 200 -

127.0.0.1 - - [23/Jan/2024 14:47:25] "GET /chart?param={%20"type":"bar",%20"title"%20:%20"humidité",%20"datas":%20%20%20%20{%20%20%20%20%20%20%20%20"11/12"%20:%2020,%20%20%20%20%20%20%20%20"12/12"%20:%2025,%20%20%20%20%20%20%20%20"13/12"%20:%2024,%20%20%20%20%20%20%20%20"14/12"%20:%2019,%20%20%20%20%20%20%20%20"15/12"%20:%2023%20%20%20%20}%20%20%20%20%20%20%20%20} HTTP/1.1" 200 -

127.0.0.1 - - [23/Jan/2024 14:47:25] "GET /chart?param={%20"type":"bar",%20"title"%20:%20"température%20/%20humidité",%20"datas":%20%20%20%20{%20%20%20%20%20%20%20%20"11/12"%20:%20{"temperature"%20:%2020,%20"humidite"%20:%2020},%20%20%20%20%20%20%20%20"12/12"%20:%20{"temperature"%20:%2018,%20"humidite"%20:%2025},%20%20%20%20%20%20%20%20"13/12"%20:%20{"temperature"%20:%2015,%20"humidite"%20:%2024},%20%20%20%20%20%20%20%20"14/12"%20:%20{"temperature"%20:%2016,%20"humidite"%20:%2019},%20%20%20%20%20%20%20%20"15/12"%20:%20{"temperature"%20:%2019,%20"humidite"%20:%2023}%20%20%20%20}%20%20%20%20%20%20%20%20} HTTP/1.1" 200 -

127.0.0.1 - - [23/Jan/2024 14:47:25] "GET /chart?param={%20"type":"bar",%20"title"%20:%20"température",%20"datas":%20%20%20%20{%20%20%20%20%20%20%20%20"11/12"%20:%2020,%20%20%20%20%20%20%20%20"12/12"%20:%2018,%20%20%20%20%20%20%20%20"13/12"%20:%2015,%20%20%20%20%20%20%20%20"14/12"%20:%2016,%20%20%20%20%20%20%20%20"15/12"%20:%2019%20%20%20%20}%20%20%20%20%20%20%20%20} HTTP/1.1" 200 -

et voici le rendu des graphique :

Merci de votre aide.

[API][Graphique][matplotlib] probleme graphique

plusieurs graphique, et un n'est pas affiché.

[API][Graphique][matplotlib] probleme graphique

Supprimer

Modérer

Signaler le message aux modérateurs