शुरू करेंमुफ़्त में शुरू करें

देश के अनुसार सेल्स के लिए एक ड्रॉपडाउन

जब आप अपने डेस्क पर काम कर रहे थे, तो ई-कॉमर्स कंपनी की ग्लोबल सेल्स मैनेजर एक नए चैलेंज के साथ आईं. उन्हें आपके हाल के सेल्स ग्राफ़ पसंद आए, लेकिन वह देश के आधार पर फ़िल्टर करना चाहती हैं और चाहती हैं कि कैटेगरी डेटा लाइव अपडेट हो.

उन्होंने स्वीकृत देश-नामों का उपयोग करने पर ज़ोर दिया: United Kingdom, Germany, France, Australia, और Hong Kong.

🛑 Note: डैशबोर्ड को सही तरह से, सभी एलिमेंट्स को साथ-साथ देखने के लिए, आपको Full screen मोड में जाना पड़ सकता है.

यह अभ्यास पाठ्यक्रम का हिस्सा है

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

पाठ्यक्रम देखें

अभ्यास निर्देश

  • कॉलबैक में उपयोग के लिए लाइन 16 के नीचे dcc.Dropdown नाम का एक ड्रॉपडाउन कंपोनेंट जोड़ें, जिसका आइडेंटिफ़ायर country_dd हो.
  • लाइन 30 के नीचे कॉलबैक के input और output सेट करें ताकि country_dd ड्रॉपडाउन major_cat ग्राफ़ से कनेक्ट हो जाए.

इंटरैक्टिव व्यावहारिक अभ्यास

इस अभ्यास को इस नमूना कोड को पूरा करके आज़माएँ।

from dash import Dash, dcc, html, Input, Output, callback
import plotly.express as px
import pandas as pd
ecom_sales = pd.read_csv('/usr/local/share/datasets/ecom_sales.csv')
logo_link = 'https://assets.datacamp.com/production/repositories/5893/datasets/fdbe0accd2581a0c505dab4b29ebb66cf72a1803/e-comlogo.png'

app = Dash()

app.layout = [
    html.Img(src=logo_link, style={'margin': '30px 0px 0px 0px'}),
    html.H1('Sales breakdowns'),
    html.Div([
        html.H2('Controls'),
        html.Br(),
        html.H3('Country Select'),
        # Add a dropdown with identifier
        dcc.____(
            ____='country_dd',
            options=['United Kingdom', 'Germany', 'France', 'Australia', 'Hong Kong'],
            style={'width': '200px', 'margin': '0 auto'})],
      	style={'width': '350px', 'height': '350px', 'display': 'inline-block', 'vertical-align': 'top', 'border': '1px solid black', 'padding': '20px'}),
    html.Div([
        dcc.Graph(id='major_cat'),
        html.H2('Major Category', style={'border': '2px solid black', 'width': '200px', 'margin': '0 auto'})],
        style={'width': '700px', 'display': 'inline-block'})
]


@callback(
    # Set the input and output of the callback to link the dropdown to the graph
    ____(component_id='____', component_property='____'),
    ____(component_id='____', component_property='____')
)

def update_plot(input_country):
    country_filter = 'All Countries'
    sales = ecom_sales.copy(deep=True)
    if input_country:
        country_filter = input_country
        sales = sales[sales['Country'] == country_filter]
    ecom_bar_major_cat = sales.groupby('Major Category')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)')
    bar_fig_major_cat = px.bar(
        title=f'Sales in {country_filter}', data_frame=ecom_bar_major_cat, x='Total Sales ($)', y='Major Category', color='Major Category',
                 color_discrete_map={'Clothes':'blue','Kitchen':'red','Garden':'green','Household':'yellow'})
    return bar_fig_major_cat


if __name__ == '__main__':
    app.run(debug=True)
कोड संपादित करें और चलाएँ