इंटरैक्टिव कंपोनेंट्स

Dash और Plotly के साथ डैशबोर्ड बनाना

Alex Scriven

Data Scientist

इंटरैक्टिविटी बढ़ाएँ

कुछ उपयोगी इंटरैक्टिव कंपोनेंट्स:
- dcc.Checklist() = चेकबॉक्सेस
- dcc.RadioItems() = रेडियो बटन
- dcc.Slider() / dcc.RangeSlider() = स्लाइडर चयनकर्ता
- dcc.DatePickerSingle() / dcc.DatePickerRange() = तारीख़ के लिए स्लाइडर जैसे

स्लाइडर्स

स्लाइडर: एक मान के लिए ड्रैग और मूव करें

रेंज स्लाइडर: दो मानों के लिए ड्रैग और मूव करें

याद रखें: callback से लिंक कर सकते हैं
- प्लॉट या कंपोनेंट अपडेट करें

एक स्लाइडर:

काले बैकग्राउंड पर नीले स्लाइडर का GIF, नीचे चुना गया मान दिखता है। माउस स्लाइडर नॉच को ऊपर खिसकाता है, और नीचे दिखा मान बढ़ता है.

एक रेंज स्लाइडर:

काले बैकग्राउंड पर नीले रेंज स्लाइडर का GIF, नीचे चुने गए दो मान दिखते हैं। माउस दोनों सिरों के नॉच को ऊपर-नीचे खिसकाता है, और नीचे दिखे मान बदलते हैं.

Dash में स्लाइडर्स

dcc.Slider(

    min=10,
    max=50,

    value=45,

    step=5,

    vertical=False

)

मुख्य आर्ग्यूमेंट्स:

min/max : स्लाइडर की सीमाएँ
value : शुरुआती चयन
step : हर नॉच का इन्क्रीमेंट
vertical : क्षैतिज या ऊर्ध्वाधर सेट करें

Dash में डेट पिकर्स

DatePickerSingle: एक तारीख़ चुनें

dcc.DatePickerSingle(
  date=date(2025, 7, 1),
  initial_visible_month=datetime.now(),
)

date = शुरुआती चयन
initial_visible_month = पॉपअप में दिखा महीना
वैकल्पिक रूप से min_date_allowed और max_date_allowed सीमित करें

एक सामान्य डेट पिकर का GIF. एक डेट इनपुट है जिसमें 1 जुलाई 2025 चुना है। माउस क्लिक करता है, कैलेंडर खुलता है। 2 जुलाई 2025 चुना जाता है, कैलेंडर बंद होता है और चयनित तारीख़ अपडेट होती है.

डेट रेंज पिकर

DatePickerSingle जैसा

dcc.DatePickerRange(
initial_visible_month=datetime.now(),
start_date=date(2025, 7, 1),
end_date=date(2025, 7, 16),
)

शुरुआती start_date और end_date सेट करें

एक सामान्य डेट पिकर का GIF. दो डेट इनपुट हैं, जुलाई 2025 की तिथियाँ चुनी हुई हैं। माउस दूसरे इनपुट पर क्लिक करता है, कैलेंडर खुलता है जिसमें रेंज हरे रंग में हाइलाइट है, फिर नई रेंज चुनी जाती है और तिथियाँ बदलती हैं.

प्लॉट्स अपडेट करना

# dcc.DatePickerSingle(id='sale_date')
# dcc.Graph(id='sales_cat')

@callback(
    Output(component_id='sales_cat', 
           component_property='figure'),
    Input(component_id='sale_date', 
           component_property='date'))

def update_plot(input_date):
    sales = ecom_sales.copy(deep=True)

    if input_date:
        sales = sales[sales['InvoiceDate'] == input_date]

    # Create fig
    return fig

Dash में डेट पिकर का उपयोग दिखाता GIF. बाएँ "Controls" बॉक्स में "Sale Date Select" शीर्षक वाला डेट पिकर है, जिसमें 04/11/2011 चुना है। दाएँ एक बार चार्ट है: x-अक्ष "Total Sales ($)" और y-अक्ष "Major Category"। नीचे "Daily Sales by Major Category" नोट है और ग्राफ़ का शीर्षक "Sales on 2011-04-11" है। माउस अगला दिन चुनता है, 2011-04-11, जिससे बार चार्ट और शीर्षक नई तारीख़ के अनुसार बदलते हैं.

अभ्यास करते हैं!

Dash और Plotly के साथ डैशबोर्ड बनाना