plotly로 그린 graph를 기존 웹 앱에 구현해 보았습니다.

개요

코드

@bp.route("/get_sample_data", methods=("GET",))
def get_sample_data():
    # import pdb; pdb.set_trace()
    out = {"y": [0, 14, 3, 17]}
    return out

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

...中略...

{% block graphs %}


<button id="get_data_button"></button>
<div hidden class="result"></div>

<!-- 1. plotly.jsの内容を`#graphDiv`の要素にレンダリングする。 -->
<div id="graphDiv" class="graph">Plotly test</div>

<script>
  var data = [{
  x: [1999, 2000, 2001, 2002],
  y: [10, 15, 13, 17],
  type: 'scatter'
}];
//ボタンが押されたらAJAXで非同期通信を実行し、サーバサイドからデータを取得する。
  $(function(){
    $("#get_data_button").on("click", function(){
      $.ajax({
        url:'/get_sample_data',
        type:'GET',
      })
      .done((res) => {
        $('.result').html(res);
        console.log(res);
          data.push({
          x: [1999, 2000, 2001, 2002],
          y: res.y, // res == {"y": [0, 14, 3, 17]} in get_sample_data function in blog.py
          type: 'scatter'
          });
          Plotly.newPlot(graphDiv, data, layout);
      }) // check arrow function
    }).fail((res) => {
      $('.result').html(res);
        console.log(res);
    })
  }
  )
  var graphDiv = document.getElementById('graphDiv')

var layout = {
  height: 500,
  title: 'Sales Growth',
  xaxis: {
    title: 'Year',
    showgrid: false,
    zeroline: false
  },
  yaxis: {
    title: 'Percent',
    showline: false
  }
};
Plotly.newPlot(graphDiv, data, layout);
</script>

{% endblock %}

거꾸로 해설

y = [0, 14, 3, 17]의 시계열 데이터가 추가되었는지 확인합니다. (아래 이미지 오렌지색 직선)

tutorial로 막힌 곳,

참고문헌