python plotly dash example

This example shows an interactive web application built on Python Plotly Dash. 1. Create a web application interface using Dash. 2. Select data series (Sales, Profit, Expenses) through the drop-down menu (Dropdown). 3. Use Plotly to dynamically draw the corresponding time series line chart. 4. The data is a simulated 100-day time series and converted into a long format for easy drawing. 5. The callback function updates the chart content in real time according to the user's choice. After running, the application is launched on the local server and can be accessed through the browser. It supports dynamic interaction and real-time updates. It is suitable for beginners to understand the basic structure and response mechanism of Dash. It can be expanded by adding components, accessing real data or beautifying interfaces, and fully implements a simple but complete data visualization application.

Here is a simple Python Plotly Dash example for beginners to get started quickly. This example shows an interactive line chart with a drop-down menu where users can select different data series for display.

✅ Functional description:

• Build a Web Application with Dash
• Use the drop-down menu to select variables
• Draw dynamic line charts with Plotly
• Data is simulated (time series)

? Required library installation:

 pip install dash plotly pandas

? Complete code example:

 import dash
from dash import dcc, html, Input, Output
import plotly.express as px
import pandas as pd

# Create sample data df = pd.DataFrame({
    'Date': pd.date_range('2023-01-01', periods=100),
    'Sales': range(100, 200),
    'Profit': range(80, 180),
    'Expenses': range(50, 150)
})

# Convert to long format, convenient drawing df_long = df.melt(id_vars='Date', value_vars=['Sales', 'Profit', 'Expenses'],
                  var_name='Metric', value_name='Value')

# Initialize Dash application app = dash.Dash(__name__)

# Layout app.layout = html.Div([
    html.H1("? Dynamic line chart example", style={'textAlign': 'center'}),

    # dropdown menu dcc.Dropdown(
        id='metric-dropdown',
        options=[{'label': col, 'value': col} for col in ['Sales', 'Profit', 'Expenses']],
        value='Sales', # Default value clearable=False,
        style={'width': '50%', 'margin': '20px auto'}
    ),

    # Chart area dcc.Graph(id='line-chart')
])

# Callback function: select the update chart @app.callback(
    Output('line-chart', 'figure'),
    Input('metric-dropdown', 'value')
)
def update_chart(selected_metric):
    filtered_df = df_long[df_long['Metric'] == selected_metric]
    fig = px.line(filtered_df, x='Date', y='Value', title=f'{selected_metric} trend chart')
    fig.update_layout(
        xaxis_title="date",
        yaxis_title="value",
        hovermode="x unified"
    )
    return fig

# Run the application (debug mode)
if __name__ == '__main__':
    app.run_server(debug=True)

? What happens after running?

1. After running the script, open the browser to visit http://127.0.0.1:8050
2. The page displays a title and a drop-down menu
3. Select different metrics (Sales/Profit/Expenses), and the chart will be updated dynamically

? Tips:

• dash.Dash(__name__) creates an application instance
• dcc.Dropdown provides interactive input
• @app.callback is the core of Dash: Input → Output Response Mechanism
• px.line() comes from Plotly Express, simple and efficient
• debug=True can be hot reloaded and is suitable for development stage

? Extension suggestions:

• Add multiple components (slider, radio box, date picker)
• Access real data (CSV, database, API)
• Beautify the interface using dash-bootstrap-components
• Deploy to servers (such as Heroku, Vercel, Docker)

Basically that's it. This example is enough to help you understand the basic structure and interaction logic of Dash. Not complicated, but very practical.

The above is the detailed content of python plotly dash example. For more information, please follow other related articles on the PHP Chinese website!