YouTipDash Callback
Dash allows developers to create dynamic, responsive user interfaces using Python.
One of Dash's core features is the callback function, which enables the user interface to update in real-time based on user input or operations.
A callback function is the core mechanism in Dash for handling user interactions. It allows you to dynamically update the application's layout or data when users interact with the application. Simply put, a callback function is a Python function that gets triggered when a specific input changes, and updates the output based on those input changes.
A typical Dash callback function consists of the following parts:
1. **Input**: Specifies which component property changes will trigger the callback function.
2. **Output**: Specifies which component properties will be updated after the callback function executes.
3. **State**: Optional parameter, used to pass some data that doesn't trigger the callback but is needed in the callback.
4. **Callback function body**: Contains the actual logic code for processing inputs and generating outputs.
### Basic Structure of Callback Functions
@app.callback( Output(component_id='output-component', component_property='output-property'), Input(component_id='input-component', component_property='input-property'))def update_output(input_value): # Calculate output value based on input value return output_value
1. **`Output`**:
* Specifies the output target of the callback function.
* `component_id`: The ID of the target component.
* `component_property`: The property of the target component (such as `children`, `value`, etc.).
2. **`Input`**:
* Specifies the input source of the callback function.
* `component_id`: The ID of the input component.
* `component_property`: The property of the input component (such as `value`, `n_clicks`, etc.).
3. **Callback Function**:
* Receives the input value, calculates and returns the output value.
* The function name can be customized (such as `update_output`).
### Examples
The following example demonstrates how to dynamically update text content based on the value of an input box:
## Example
from dash import Dash, html, dcc, Input, Output
# Create Dash app
app = Dash( __name__ )
# Define layout
app.layout= html.Div([
dcc.Input(id='input',type='text', placeholder='Please enter content...'),
html.Div(id='output')
])
# Define callback function
@app.callback(
Output('output','children'),
Input('input','value')
)
def update_output(input_value):
return f'You entered: {input_value}'
# Run app
if __name__ =='__main__':
app.run_server(debug=True)
The following example demonstrates how to dynamically update a chart based on the selection from a dropdown menu:
## Example
from dash import Dash, html, dcc, Input, Output
import plotly.express as px
import pandas as pd
# Create Dash app
app = Dash( __name__ )
# Sample data
df = pd.DataFrame({
'City': ['Beijing','Shanghai','Guangzhou','Shenzhen'],
'Population': [2171,2424,1490,1303]
})
# Define layout
app.layout= html.Div([
dcc.Dropdown(
id='dropdown',
options=[{'label': city,'value': city}for city in df['City']],
value='Beijing'# Default value
),
dcc.Graph(id