Dash のインストールと動作確認

Python のインストール

• Windows での Python のインストールは，別ページで説明している．

  WinPython を使いたい場合は，そのインストールは，別ページで説明している．

• Ubuntu などの Linux で，システム Python 3 を使う場合は，インストールの必要はない

※ 以下、Windowsでの手順で説明する．Ubuntu等でも同様の手順になる．

Dash のインストール, 動作確認

Python パッケージをインストールする

1. Window でコマンドプロンプトを実行
2. （オプション）Anaconda を使いたい場合には、次の操作を行う
   トップページ -> データベース関連技術 -> Web サービスのプログラミング -> Dash のインストールと動作確認

   [サイトマップへ],

   [サイト内検索へ]

   Dash のインストールと動作確認

   サイト構成

   データベース関連技術

   データの扱い

   インストール，設定，利用

   プログラミング

   授業資料

   サポートページ

   連絡先，業績など

   ユースケース：Web でグラフや表を簡単に表示したい。そして、ユーザ側で操作ができるようにしたい。

   サイト内の関連ページ

   • Flash のインストール

   参考Webページ

   • https://plot.ly/products/dash
   • https://blog.sicara.com/bokeh-dash-best-dashboard-framework-python-shiny-alternative-c5b576375f7f

   ---

   Python のインストール

   • Windows での Python のインストールは，別ページで説明している．

     WinPython を使いたい場合は，そのインストールは，別ページで説明している．

   • Ubuntu などの Linux で，システム Python 3 を使う場合は，インストールの必要はない

   ※ 以下、Windowsでの手順で説明する．Ubuntu等でも同様の手順になる．

   ---

   Dash のインストール, 動作確認

   Python パッケージをインストールする

   1. Windows では，コマンドプロン プトを管理者として実行．
      
   2. dash, dash-daq のインストール

      https://dash.plot.ly/installation の記述による

      「==0.39.0」, 「==0.1.0」のところは、 https://dash.plot.ly/installation で確認すること。

      Windows の場合

      python -m pip install dash==0.39.0
      python -m pip install dash-daq==0.1.0
      

      
      （以下省略）

      Ubuntu の場合

      sudo python3 -m pip install dash==0.39.0
      sudo python3 -m pip install dash-daq==0.1.0
      

   3. 動作確認
      1. まず、次のようなPython プログラムをhoge.pyのようなファイル名で保存

         # -*- coding: utf-8 -*-
         import dash
         import dash_core_components as dcc
         import dash_html_components as html
         external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
         app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
         app.layout = html.Div(children=[
             html.H1(children='Hello Dash'),
             html.Div(children='''
                 Dash: A web application framework for Python.
             '''),
             dcc.Graph(
                 id='example-graph',
                 figure={
                     'data': [
                         {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
                         {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montral'},
                     ],
                     'layout': {
                         'title': 'Dash Data Visualization'
                     }
                 }
             )
         ])
         if __name__ == '__main__':    app.run_server(debug=True)
         

      2. Python プログラムを実行

         ※ Python プログラムを動かすために， Windows では，「python」コマンドを使う． Ubuntu では「python3」コマンドを使う．

         開発環境や Python コンソール（Jupyter Qt Console，spyder，PyCharm，PyScripter など）も便利である．

         python hoge.py
         

         Ubuntu の場合

         、次のコマンドを実行

         python3 hoge.py
         
      3. Web ブラウザで、http://localhost:8050 を開く。次のような画面が出れば、動作OK

   ---

   Pandas データフレームの表示

   # -*- coding: utf-8 -*-
   import dash
   import dash_table
   import dash_core_components as dcc
   import dash_html_components as html
   import pandas as pd
   external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
   app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
   L = [[1, 2, 3], [4, 1, 2]]
   X = pd.DataFrame(L)
   app.layout = html.Div(children=[
       html.H1(children='Hello Dash'),
       html.Div(children='''
           Dash: A web application framework for Python.
       '''),
       dash_table.DataTable(
           id='table',
           columns=[ {"name": i, "id": i} for i in X.columns], 
           data=X.to_dict("rows")
       )
   ])
   if __name__ == '__main__':    app.run_server(debug=True)
   

   ---

   Dash の中身を 定期的に更新するプログラム

   注意点

   • 「 app.run_server(debug=False)」は、debug=Trueにしないこと

   プログラムのポイント

   • worker は定期的に実行。ここで、Xを書き換え。同時に、do_layout() を呼び出して　app.layout も書き換え
   • worker を定期的に実行するために mainloop をマルチスレッドで実行

   # -*- coding: utf-8 -*-
   import dash
   import dash_table
   import dash_core_components as dcc
   import dash_html_components as html
   import pandas as pd
   import time
   import threading
   external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
   app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
   L = [[1, 2, 3], [4, 1, 2]]
   X = pd.DataFrame(L)
   def do_layout():
       global app
       app.layout = html.Div(children=[
           html.H1(children='Hello Dash'),
           html.Div(children='''
               Dash: A web application framework for Python.
           '''),
           dash_table.DataTable(
               id='table',
               columns=[ {"name": i, "id": i} for i in X.columns], 
               data=X.to_dict("rows")
           )
       ])
   import time
   import threading
   # 定期的に繰り返すスレッド
   def worker():
       global X
       do_layout() 
       print(time.gmtime())
       X[0][0] = X[0][0] + 1
       print(X[0][0]) 
   # 動作試験のため、わざと 8 秒待つようにしている
       time.sleep(8)
   def mainloop():
   # 5秒間隔
       time_interval = 5
       now = time.time()
       while True:
           t = threading.Thread(target=worker)
           t.start()
           t.join() 
           wait_time = time_interval - ( (time.time() - now) % time_interval )
           print(wait_time) 
           time.sleep(wait_time)
   if __name__ == '__main__':    t0 = threading.Thread(target=mainloop)
       t0.start()
   # マルチスレッドにしたい。debug は False で. (debug=True に変えたときの動作は確認していません）
       app.run_server(debug=False)
   

conda install simplejson flask plotly

pip install dash==0.39.0
pip install dash-daq==0.1.0

sudo python3 -m pip install dash==0.39.0
sudo python3 -m pip install dash-daq==0.1.0

# -*- coding: utf-8 -*-
import dash
import dash_table
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
L = [[1, 2, 3], [4, 1, 2]]
X = pd.DataFrame(L)
app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),
    html.Div(children='''
        Dash: A web application framework for Python.
    '''),
    dash_table.DataTable(
        id='table',
        columns=[ {"name": i, "id": i} for i in X.columns], 
        data=X.to_dict("rows")
    )
])
if __name__ == '__main__':    app.run_server(debug=True)

# -*- coding: utf-8 -*-
import dash
import dash_table
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import time
import threading
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
L = [[1, 2, 3], [4, 1, 2]]
X = pd.DataFrame(L)
def do_layout():
    global app
    app.layout = html.Div(children=[
        html.H1(children='Hello Dash'),
        html.Div(children='''
            Dash: A web application framework for Python.
        '''),
        dash_table.DataTable(
            id='table',
            columns=[ {"name": i, "id": i} for i in X.columns], 
            data=X.to_dict("rows")
        )
    ])
import time
import threading
# 定期的に繰り返すスレッド
def worker():
    global X
    do_layout() 
    print(time.gmtime())
    X[0][0] = X[0][0] + 1
    print(X[0][0]) 
# 動作試験のため、わざと 8 秒待つようにしている
    time.sleep(8)
def mainloop():
# 5秒間隔
    time_interval = 5
    now = time.time()
    while True:
        t = threading.Thread(target=worker)
        t.start()
        t.join() 
        wait_time = time_interval - ( (time.time() - now) % time_interval )
        print(wait_time) 
        time.sleep(wait_time)
if __name__ == '__main__':    t0 = threading.Thread(target=mainloop)
    t0.start()
# マルチスレッドにしたい。debug は False で. (debug=True に変えたときの動作は確認していません）
    app.run_server(debug=False)