SW정리: plotly

2023년 10월 1일 일요일

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 포트가 열리게 됩니다.

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

2023년 9월 23일 토요일

Web graph python backend javascript plotly (파이썬으로 웹에서 그래프 그리기)

python으로 web application을 제작하였고 그곳에서 통계 데이터를 이용해서 그래프를 그리는 Plotly에 대해서 설명하고자 합니다.

https://plotly.com/graphing-libraries/

python 은 아래 링크에서 이용하시면 됩니다.

https://plotly.com/python/

설치

$ pip install plotly==5.17.0

or conda:

$ conda install -c plotly plotly=5.17.0

만약 web 서비스가 없다면 Plotly charts in Dash 항목을 읽어보고 Dash 를 추가로 설치 하면 됩니다.

여기 예제는 이미 web 서버 환경이 있다는 가정에서 하는것이기 때문에 Dash를 설치 하지 않도록 하겠습니다.

로컬에서 테스트 코드 실행시켜보기

plotly 를 설치했다면 아래와 같은 코드만으로도 실행되는 것을 볼 수 있습니다.

# x and y given as array_like objects
import plotly.express as px
fig = px.scatter(x=[0, 1, 2, 3, 4], y=[0, 1, 4, 9, 16])
fig.show()

실행시키면 web sever 처럼 페이지 URL이 자동으로 열리고 random하게 특정 port 에 열리게 됩니다.

dataframe 과 mix해서 그려보기

import pandas as pd
from sklearn.datasets import load_iris

iris = load_iris()
iris = pd.DataFrame(iris.data, columns=iris.feature_names)
iris["Class"] = load_iris().target

import plotly.express as px
fig = px.scatter(iris, x=["sepal length (cm)", "petal length (cm)"], y="Class")
fig.show()

HTML 코드로 출력하기

to_html() 함수를 사용하면 html 코드를 구할 수 있습니다.

import plotly.express as px
fig = px.scatter(iris, x=["sepal length (cm)", "petal length (cm)"], y="Class")
html_code = fig.to_html()
print(html_code)

그래프 여러개 출력하기

출력된 html 을 여러개 합치면 되겠지만 단순하지 않습니다.

to_html에서 결과로 나오는 출력에는 head 와 script 정보가 모두 포함되어 표시 됩니다.

따라서 head 부분은 따로 구현해주고 to_html에서는 헤더 부분을 빼고 출력 부분들만 모아 주도록 해야합니다.

https://plotly.com/python-api-reference/generated/plotly.io.to_html.html

import plotly.express as px
html_code = ""
fig = px.scatter(iris, x=["sepal length (cm)"], y="Class")
html_code += fig.to_html(include_plotlyjs=False, full_html=False)
fig = px.scatter(iris, x=["petal length (cm)"], y="Class")
html_code += fig.to_html(include_plotlyjs=False, full_html=False)
print(html_code)

include_plotlyjs=False, full_html=False 옵션을 사용해서 헤더와 불필요한 부분을 빼줍니다.

출력

<div>                            <div id="01d35061-d537-4f9c-9060-bb234bb1de3b" class="plotly-graph-div" s

python으로 구성된 web 서비스를 이용해서 구현

예제를 하기 위한 것이니 간단하게 Flash를 가지고 web server를 동작시키겠습니다.

작업된 전체 코드 입니다.

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

app = Flask(__name__)


@app.route("/")
def index():
    html_code = '''
    <head>
    <script src="https://cdn.plot.ly/plotly-2.26.0.min.js" charset="utf-8"></script>
    </head>
    '''

    html_code += get_graph()
    return html_code


def get_graph():
    iris = load_iris()
    iris = pd.DataFrame(iris.data, columns=iris.feature_names)
    iris["Class"] = load_iris().target

    html_code = "<H1>Graph test</H1>"
    fig = px.scatter(iris, x=["sepal length (cm)"], y="Class")
    html_code += fig.to_html(include_plotlyjs=False, full_html=False)
    fig = px.scatter(iris, x=["petal length (cm)"], y="Class")
    html_code += fig.to_html(include_plotlyjs=False, full_html=False)
    return html_code


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

실행 화면