SW정리: web graph python backend javascript 2(웹으로 그래프 그리기 python)

다른 글에서 web에 graph를 그릴때 python javascript를 이용해서 간단하게 해봤습니다.

https://swlock.blogspot.com/2023/09/web-graph-python-backend-javascript.html

이번에는 추가로 page에 옵션에 따라 달라지는 그래프입니다.

앞에서는 간단하게 plotly를 설명하기 위해서 간단한 예제로 했기 때문에 flask에 page 인자를 받는 부분은 진행하지 않았습니다.

여기에서 작성하려는 예제는 page에 get 메소드로 인자가 주어지면 인자에 따라서 다른 그래프가 나오도록 하는 예제입니다.

flask의 인자는 request.args를 이용합니다.

# /get_graph?page=xxx
@app.route("/get_graph")
def ajax_page():
    html_code = '''
    <head>
    <script src="https://cdn.plot.ly/plotly-2.26.0.min.js" charset="utf-8"></script>
    </head>
    <body>
    '''
    data = request.args.to_dict()
    page = data.get("page")

위와 같은 페이지에서 /get_graph?page=<data> 와 같은 형태를 사용하면 page 변수에 <data>가 저장이 됩니다.

만약 <data>부분이 비게 된다면 data.get("page")는 None이 리턴되게 됩니다.

인자에 따라 graph 그리는 부분

이 부분은 이전 코드를 대부분 사용하였습니다.

def get_graph(page_no):
    iris = load_iris()
    iris = pd.DataFrame(iris.data, columns=iris.feature_names)
    iris["Class"] = load_iris().target
    print(iris)
    html_code = f"<H1>Graph test {page_no}</H1>"
    if page_no == 1:
        fig = px.scatter(iris, x=["sepal length (cm)"], y="Class")
        html_code += fig.to_html(include_plotlyjs=False, full_html=False)
    elif page_no == 2:
        fig = px.scatter(iris, x=["petal length (cm)"], y="Class")
        html_code += fig.to_html(include_plotlyjs=False, full_html=False)
    elif page_no == 3:
        fig = px.scatter(iris, x=["sepal width (cm)"], y="Class")
        html_code += fig.to_html(include_plotlyjs=False, full_html=False)
    elif page_no == 4:
        fig = px.scatter(iris, x=["petal width (cm)"], y="Class")
        html_code += fig.to_html(include_plotlyjs=False, full_html=False)
    return html_code

전체 코드

import pandas as pd
from sklearn.datasets import load_iris
import plotly.express as px
from flask import Flask
from flask import request

app = Flask(__name__)


def get_graph(page_no):
    iris = load_iris()
    iris = pd.DataFrame(iris.data, columns=iris.feature_names)
    iris["Class"] = load_iris().target
    print(iris)
    html_code = f"<H1>Graph test {page_no}</H1>"
    if page_no == 1:
        fig = px.scatter(iris, x=["sepal length (cm)"], y="Class")
        html_code += fig.to_html(include_plotlyjs=False, full_html=False)
    elif page_no == 2:
        fig = px.scatter(iris, x=["petal length (cm)"], y="Class")
        html_code += fig.to_html(include_plotlyjs=False, full_html=False)
    elif page_no == 3:
        fig = px.scatter(iris, x=["sepal width (cm)"], y="Class")
        html_code += fig.to_html(include_plotlyjs=False, full_html=False)
    elif page_no == 4:
        fig = px.scatter(iris, x=["petal width (cm)"], y="Class")
        html_code += fig.to_html(include_plotlyjs=False, full_html=False)
    return html_code


# /get_graph?page=xxx
@app.route("/get_graph")
def ajax_page():
    html_code = '''
    <head>
    <script src="https://cdn.plot.ly/plotly-2.26.0.min.js" charset="utf-8"></script>
    </head>
    <body>
    '''
    data = request.args.to_dict()
    page = data.get("page")
    if page is not None:
        page_no = int(page)
        html_code += get_graph(page_no)
    else:
        html_code += "<H1>ERROR</H1>"
    html_code += "</body>"
    return html_code


if __name__ == "__main__":
    app.run(port=8080, debug=True)

실행시키면 8080 포트가 열리게 됩니다.

실행 시키는 방법은 아래 스크린 샷처럼 인자를 넣어줘야만 동작됩니다.

SW정리

2023년 10월 1일 일요일

web graph python backend javascript 2(웹으로 그래프 그리기 python)

flask의 인자는 request.args를 이용합니다.

인자에 따라 graph 그리는 부분

전체 코드

댓글 없음:

댓글 쓰기