ایجاد داشبورد با plotly و dash

در ادامه پست قبلی در خصوص نحوه ساخت داشبورد با plotly و dash به مثال زیر توجه کنید. برای این مثال داده ها را که مربوط به مقایسه تعداد مقالات علمی بین دو کشور ایران و ترکیه است از www.scimagojr.com جمع آوری شده است.

ابتدا بسته ها را فراخوانی می کنیم:

import dash 
import dash_core_components as dcc 
import dash_html_components as html 

در ادامه استایل مورد نظر را انتخاب می کنیم. (می توانید از این بخش صرف نظر کنید و یا حتی اگر کمی CSS بلد باشید خودتان استایل مورد نظرتان را بسازید.)

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

توجه داشته باشید که plotly و dash از چارچوب نرم افزاری تحت وب فلسک برای اجرا کمک می گیرند. از همین رو باید برخی از ملزومات این میکرو فریم ورک رعایت شود. برای نمونه باید عبارت زیر را وارد کنید:

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

در ادامه هم به وارد کردن داده ها پرداخته شده است:

app.layout = html.Div(children=[ 
dcc.Graph(figure=dict(data=[      
dict(
       x=[2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016,2017, 2018],             
       y=[26526, 30839, 33325, 34926, 36766, 40302, 41400, 44529, 47138, 44584,45582],              
       name='Turkey',
        marker=dict(color= 'rgb(55, 83, 109)' )
),
dict(    
             x=[2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016,2017, 2018],
             y=[20006, 24509, 30013, 39682, 41513, 42252, 44923, 45013, 52538, 56029, 60268],    
             name='Iran',
             marker=dict(color= 'rgb(26, 118, 255)' )
)
],

layout= dict(
title='مقایسه تعداد مقالات ایران و ترکیه',  showlegend= True, legend=dict(x=0,y=1.0),margin=dict(l=40, r=0, t=40, b=30)
)
),style={'height': 300}, id='my-graph')])

در پایان هم باید عبارت زیر وارد شود:

if __name__ == '__main__':
app.run_server(debug=False)

با اجرای قطعه کد بالا نتیجه در آدرس http://127.0.0.1:8050/ قابل مشاهده است.

خروجی رو هم می توانید در ادامه مشاهده کنید.