Inizia subitoInizia gratis

Slider per i dati di vendita

L’analisi di trend e pattern nei dati della società di e-commerce globale è stata notevolmente migliorata grazie ai tuoi date picker. C’è un’ulteriore richiesta per capire quali categorie trainano gli ordini “big ticket”.

L’azienda ti ha chiesto di creare uno strumento con cui possano selezionare un valore (qualsiasi valore, davvero!) e un grafico mostrerà quante vendite hanno avuto un valore d’ordine maggiore di quel valore, suddivise per categoria principale.

Sai che questo si presta bene a un input di tipo range.

Questo esercizio fa parte del corso

Creare dashboard con Dash e Plotly

Visualizza corso

Istruzioni dell'esercizio

  • Aggiungi un componente slider chiamato dcc.Slider con l’identificatore value_slider sotto la riga 16 per selezionare un valore minimo dell’ordine.
  • Imposta il parametro value dello slider a 0 sotto la riga 20.
  • Imposta il parametro step dello slider a 50 sotto la riga 22.

esercizio interattivo pratico

Prova questo esercizio completando questo codice di esempio.

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('Minimum OrderValue Select'),
        # Add a slider input
        ____(id='value_slider',
            min=ecom_sales['OrderValue'].min(),
            max=ecom_sales['OrderValue'].max(),
            # Set the starting value of the slider
            ____=____,
            # Set the step increment of the slider
            ____=____,
            vertical=False)],
        style={'width':'350px', 'height':'350px', 'display':'inline-block', 'vertical-align':'top', 'border':'1px solid black', 'padding':'20px'}),
  html.Div([
		dcc.Graph(id='sales_cat'),
		html.H2('Sales by Major Category', style={ 'border':'2px solid black', 'width':'400px', 'margin':'0 auto'})],
		style={'width':'700px','display':'inline-block'})
]

@callback(
    Output(component_id='sales_cat', component_property='figure'),
    Input(component_id='value_slider', component_property='value')
)
def update_plot(min_val):
    sales = ecom_sales.copy(deep=True)
    if min_val:
        sales = sales[sales['OrderValue'] >= min_val]
    ecom_bar_major_cat = sales.groupby('Major Category')['OrderValue'].size().reset_index(name='Total Sales Volume')
    bar_fig_major_cat = px.bar(
        title=f'Sales with order value: {min_val}',data_frame=ecom_bar_major_cat, orientation='h', 
        x='Total Sales Volume', y='Major Category')
    return bar_fig_major_cat
  
if __name__ == '__main__':
    app.run(debug=True)
Modifica ed esegui il codice