LoginSignup
1
0

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-10-15

概要

  • 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_buttonidにもつ<button>を押すと、flask applicationにAJAXでGET通信からget_sample_data()を実行してデータを返す。

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

  4. y =[0, 14, 3, 17]の時系列データが追加されていることを確認する。(下記画像オレンジ色の直線)
    スクリーンショット 2020-10-16 2.45.10.png

tutorialで詰まったところ、

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

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

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

参考文献

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0