flask로 만든 변수를 chart.js 에 적용하는 방법

flask로 만든 변수를 chart.js 에 적용하는 방법

728x90

이 글은 flask로 chart.js를 적용해서 만드는데 html부분에 변수 적용이 어려웠던 저의 경험을 나누고자 작성되었습니다.

아래는 https://www.chartjs.org/docs/latest/ 에서 제공하고 있는 예시인데요,

var ctx = document.getElementById('myChart').getContext('2d'); var myChart = new Chart(ctx, { type: 'bar', data: { labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: { scales: { y: { beginAtZero: true } } } });

이 코드의 결과물은 아래와 같고요,

디자인이 넘 이쁘죠?

웹에 chart.js를 띄울 때 보통 labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], 이 부분(x축 라벨)과, datasets의 data: [12, 19, 3, 5, 2, 3] 이 부분(y 데이터)을 바꾸고 싶어 하실 거예요. 예시와 같이 고정 데이터면 상관없겠지만 때에 따라 바뀌어야 하는 데이터라면 flask로 생성한 변수를 그때그때 넣어줘야 하니까 json데이터로 넣어줘야 합니다.

def predictCoin(): symbol = request.args.get('symbol') if symbol: symbol = symbol.upper() else: return redirect("/") ticker = f"KRW-{symbol}" preds_inversed = predict(ticker) y_preds = preds_inversed days = list(range(1, 31)) return render_template('prediction.html', symbol=symbol, days=days, y_preds=y_preds)

일단 제가 만든 코드에서는 days가 x축 라벨이고 y_preds가 y 데이터에 속하는데요, 이것을 아래와 같이 prediction.html에서 labels: {{ days | to json }}, data: {{ y_preds | to json }}라고 적용시켜줍니다. 그냥 html에서 하는 것처럼 {{ days }}, {{ y_preds }}라고 하면 적용이 되지 않습니다.

var ctx = document.getElementById("Chart").getContext("2d"); var Chart = new Chart(ctx, { type: "line", data: { labels: {{ days | tojson }}, datasets: [ { label: "Expected {{symbol}} Price", data: {{ y_preds | tojson }}, borderColor: "rgba(247, 16, 74, 1)", borderWidth: 1, }, ], }, options: { scales: { y: { beginAtZero: false, }, }, }, });

그런데 저는 여기서 다음과 같은 에러가 뜹니다

Object of type ndarray is not JSON serializable flask

왜냐하면 y_preds가 ndarray였기 때문입니다. list 타입이어야 하나 봅니다. 그래서 다음 링크를 참고하여 https://stackoverflow.com/questions/51685322/object-of-type-ndarray-is-not-json-serializable

아래에서 세 번째 줄의 y_preds = preds_inversed 부분에 .to_list()를 추가하여 ndarray에서 리스트로 만들어주었습니다. (day는 이미 리스트 형식이므로 손 볼 필요가 없었습니다)

def predictCoin(): symbol = request.args.get('symbol') if symbol: symbol = symbol.upper() else: return redirect("/") ticker = f"KRW-{symbol}" preds_inversed = predict(ticker) y_preds = preds_inversed.tolist() days = list(range(1, 31)) return render_template('prediction.html', symbol=symbol, days=days, y_preds=y_preds)

이후 저는 모든 문제를 해결하고 다음과 같이 웹에 chart.js를 띄울 수 있었습니다.

참고할만한 사이트 : https://apt-info.github.io/%EA%B0%9C%EB%B0%9C/python-flask4-chart/

from http://doong-e.tistory.com/50 by ccl(A) rewrite - 2021-07-26 13:26:32