[Python] Flask - 주식차트 그리기 및 삽입 - 파이썬은 날먹

0. 들어가기

-. 구글 차트 API라는 아주 좋은, 손쉬운, 날먹이 가능한 툴을 발견해서 이를 이용한 주식 차트를 삽입하려 한다.

-. 앞 포스팅에선 차트 API를 다루는 기본적인 예제를 베껴봤고, 이번 포스팅에선 해당 차트를 사용하기 위해 Flask -> Chart로의 데이터 전달에 관해 쓴다.

1. 차트 데이터 구조

-. 우선, 주식에 맞게 캔들차트를 보자. 파이썬의 이중배열 구조로, Data = [[‘X축’, ‘Low’, ‘Close’, ‘Open’, ‘High’]] 형태를 취하는 것을 알 수 있다.

-. 그리고 키움증권에서 제공하는 OPEN API로 받아낸 데이터를 차트에 입력하기 위한 순서로 변경하는 작업이 필요하다.

2. Flask + jinja에 차트 삽입

-. 앞서의 캔들차트 예제를 jinja template으로 수정한다. 당장은 귀찮으니 var data 부분만 바꿔보겠다.
-. 기존의 이중배열을 {{chartData|safe}} 구문으로 변경하면 된다.

1) 코드

<html>
  <head>

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
        var data = google.visualization.arrayToDataTable({{chartData|safe}}, true);

        var options = {
          title: 'Company Performance',
          curveType: 'function',
          legend: { position: 'bottom' }
        };

    var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));

    chart.draw(data, options);
  }

    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

-. 그리고 Flask route에 아래의 구문 삽입.

candleData = [
      ['Mon', 20, 28, 38, 45],
      ['Tue', 31, 38, 55, 66],
      ['Wed', 50, 55, 77, 80],
      ['Thu', 77, 77, 66, 50],
      ['Fri', 68, 66, 22, 15]]
@app.route("/jinja2/chart")
def page_jinja2_CandleChart():
    return render_template("chart_Candle.html", chartData = candleData)

2) 작동 결과

-. 앞서, 직접 데이터를 입력한 것과 동일한 그래프 출력되는 것이 확인된다.

3. 주식차트 그리기

-. 마지막으로 키움 OPEN API에서 긁어온 데이터를 차트로 그려본다.

-. 근데 X축이 new Date(~~~)로 표기되는 상황. 왜이럴까 html 구문을 보니 new Date(~~~)로 표기되어야 할 부분이 'new Date(~~~)로 표기되면서 각각을 명사로 받아버린 상황이다.

-. '를 제거하는 코드 넣어야지 뭐..

template = Template("test {{data}}")
_buf = template.render(data = _data)
print(_buf)
print(type(_buf))
_result = _buf.replace("'","")
print(_result)

-. 근데 여전히 날짜가 이상하다. 난 2월 것을 넣었는데, 다음달 주가를 예측하고있네...
-. 찾아보니 JS 날짜 세는게 월을 0~11로 (보통 1~12잖아..?) 해서 문제가 발생한댄다. 월에 1을 빼자.

4. 요약하자면

-. 키움API에서 받은 데이터의 순서를 바꾸고 (Candlestick Chart형식에 맞게)

-. 받은 데이터의 날짜 중 '월'을 1씩 빼고

-. Flask -> jinja engin으로 투입 시 ' 를 제거하는 과정이 있다.

길다길어.

728x90

저작자표시

'python > Flask' 카테고리의 다른 글

[python] Flask - ORM 사용 SQLite 연동 - 파이썬은 날먹 (0)	2021.02.21
[python] Flask - 모듈화, Blueprint 청사진 (0)	2021.02.20
[Python] Flask + Jinja - 파이썬은 날먹 (0)	2021.02.15
[Python] Flask - 라우트(route) - 파이썬은 날먹 (0)	2021.02.10
[Python] Flask - 웹서버 열기 - 파이썬은 날먹 (0)	2021.02.09