Interaktive Komponenten

Dashboards mit Dash und Plotly erstellen

Alex Scriven

Data Scientist

Interaktivität erweitern

Nützliche interaktive Komponenten:
- dcc.Checklist() = Kontrollkästchen
- dcc.RadioItems() = Optionsfelder
- dcc.Slider() / dcc.RangeSlider() = Schieberegler
- dcc.DatePickerSingle() / dcc.DatePickerRange() = Ähnlich wie Slider, aber für Daten

Slider

Slider: ziehen für einen Einzelwert

Range Slider: ziehen für zwei Werte

Hinweis: Kann mit Callback verknüpft werden
- Plots oder Komponenten aktualisieren

Ein Slider:

Eine GIF eines blauen Sliders auf schwarzem Hintergrund mit Text darunter, der den ausgewählten Wert zeigt. Die Maus zieht den Schieberegler nach oben, der angezeigte Wert steigt.

Ein Range Slider:

Eine GIF eines blauen Bereichs-Sliders auf schwarzem Hintergrund mit Text darunter, der zwei ausgewählte Werte zeigt. Die Maus zieht beide Enden des Reglers, wodurch sich die unten gezeigten Werte ändern.

Slider in Dash

dcc.Slider(

    min=10,
    max=50,

    value=45,

    step=5,

    vertical=False

)

Wichtige Argumente:

min/max : Grenzen des Sliders
value : Startauswahl
step : Schrittweite pro Rastung
vertical : Horizontal oder vertikal ausrichten

Datumsauswahl in Dash

DatePickerSingle: Wähle ein einzelnes Datum

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

date = Startauswahl
initial_visible_month = im Popup angezeigter Monat
Optional min_date_allowed und max_date_allowed begrenzen

Eine GIF eines typischen Datumsauswahl-Widgets. Es gibt ein Datumsfeld mit dem 1. Juli 2025 als aktuellem Datum. Die Maus klickt, ein Kalender erscheint. Der 2. Juli 2025 wird gewählt, der Kalender klappt zu und das Datum im Feld ändert sich.

Datumsbereich-Auswahl

Ähnlich wie DatePickerSingle

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

Setze eine anfängliche start_date und end_date

Eine GIF eines typischen Datumsauswahl-Widgets. Es gibt zwei Datumsfelder mit Daten im Juli 2025. Die Maus klickt ins zweite Feld, ein Kalender erscheint, der Bereich ist grün markiert. Ein neuer Bereich wird gewählt, die Daten ändern sich.

Plots aktualisieren

# 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

Lass uns üben!

Dashboards mit Dash und Plotly erstellen