ایجاد نمودارهای پویا با کمک RangeSlider در Dash

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

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

import dash  
import dash_core_components as dcc  
import dash_html_components as html  
from dash.dependencies import Input, Output
import pandas as pd
import plotly.graph_objs as go

توجه داشته باشید که dash_html_components امکان استفاده از تگ های HTML رو فراهم می کنه و در طراحی ساختار صفحات داشبورد (layout) کاربرد داره.

همچنین dash_core_components با استفاده از جاوااسکریپت و HTML و CSS از طریق React.js امکان رسم نمودارهای تعاملی رو فراهم می کنه. در شکل زیر کامپوننت های این بسته رو می بینید.

در ادامه کد رو توی شش مرحله نوشتیم:

در مرحله اول اجرای اپلیکیشن

# Step 1. Launch the application 
app = dash.Dash()

در مرحله دوم آماده سازی داده

# Step 2. Import the dataset
# Scimago Journal & Country Rank
# from www.scimagojr.com
st = {
'Date':
 ['2008-01-01', '2009-01-01', '2010-01-01', '2011-01-01', '2012-01-01', '2013-01-01',
    '2014-01-01', '2015-01-01', '2016-01-01','2017-01-01', '2018-01-01'],
'Iran':
 [20006, 24509, 30013, 39682, 41513, 42252, 44923, 45013, 52538, 56029, 60268]
}
st = pd.DataFrame(st)
# range slider options
st['Date'] = pd.to_datetime(st.Date)
dates = 
['2008-01-01', '2009-01-01', '2010-01-01', '2011-01-01', '2012-01-01', '2013-01-01',
 '2014-01-01', '2015-01-01', '2016-01-01','2017-01-01', '2018-01-01']

در مرحله سوم ایجاد نمودار (نوع نمودار خطی هست. رنگ و پهنای آن رو تنظیم کردیم. )

# Step 3. Create a plotly figure 
trace_1 = go.Scatter(x = st.Date, y = st['Iran'], 
                                  name = 'Iran', line = dict(width = 2,color = 'rgb(229, 151, 50)')) 

layout = go.Layout(title = 'Scimago Journal & Country Rank (Iran)',  hovermode = 'closest') 

fig = go.Figure(data = [trace_1], layout = layout) 

در مرحله چهارم ساختار دش (Dash layout) رو ایجاد می کنیم:

# Step 4. Create a Dash layout  
app.layout = html.Div([  # adding a plot 
dcc.Graph(id = 'plot', figure = fig), 
# range slider 
dcc.RangeSlider(id = 'slider', 
                            marks = {i : dates[i] for i in range(0, 11)}, 
                            min = 0,
                            max = 10, 
                            value = [1, 7])
 ]) 

در مرحله پنجم Callback رو اضافه می کنیم:

برای آشنایی با مفهوم Callback اینجا رو ببینید.

# Step 5. Add callback functions 
@app.callback(Output('plot', 'figure'), 
                         [ Input('slider', 'value')])
 def update_figure( input2): 
# filtering the data 
st2 = st[(st.Date > dates[input2[0]]) & (st.Date < dates[input2[1]])] 
# updating the plot 
trace_1 = go.Scatter(x = st2.Date, y = st2['Iran'], 
                                   name = 'Iran',
                                  line = dict(width = 2, color = 'rgb(229, 151, 50)'))
fig = go.Figure(data = [trace_1], layout = layout) 
return fig 

در مرحله پایانی هم تنظیمات سرور(از الزامات فریمورک فلسک) رو اضافه می کنیم:

# Step 6. Add the server clause 
if __name__ == '__main__': 
app.run_server(debug = False)