plotlyで描画したgraphを既存のwebアプリに実装してみました。

概要

• Dash plotlyを、既存のweb applicationに組み込む方法がわからず四苦八苦していた
• そんな中、plotly.jsの存在を知り、「jsサイドでplotly呼び出して使えばいいじゃん」となり、flaskのtutorialとplotly.jsを組み合わせて使ってみました。
• 既存のweb applicationに組み込むのは、simpleにデータをクライアント側に送って、jsにレンダリングさせるのが一番楽そうだなと思いました。

以下、flaskで作成したweb applicationに sample graphをレンダリングするコードを紹介いたします。

(Plotly Dashも別に組み込めるよ、などの有識者のご意見お待ちしております。)

コード

server側でデータを送信する関数を用意する。

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

index.html

<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 %}

ざっくり解説

一つ一つ分解して説明します（随時更新予定）

1. plotly.jsの内容を#graphDivの要素にレンダリングする。

2. #get_data_buttonをidにもつ<button>を押すと、flask applicationにAJAXでGET通信からget_sample_data()を実行してデータを返す。

3. データを取得して、data listにpush(res)し、再度Plotly.newPlot(graphDiv, data, layout);を実行する。

4. y =[0, 14, 3, 17]の時系列データが追加されていることを確認する。（下記画像オレンジ色の直線）
   

tutorialで詰まったところ、

• Plotly.jsでは、rendering先を<div>タグにしないと読み込んでくれないようです。(を使ってもplotly.jsが描画してくれない。)

• 出力されるグラフのCSSに関して

  • #graphDivに関してサイズを変更するようにコーディングしてたが全くサイズ変更されず、とても困った。
  • Plotly.newPlot(graphDiv, data, layout);でlayoutにheight, widthキーを追加してあげればOKでした。
  • （単純にCSSの知識が足りないなと思いました...）

参考文献

1. Plotly.jsのサンプルコード