Generation

generate functionSat, 07 Jun 2025

realizar un dashboard agregando: dos graficos, una accion y una imagen

Aquí te muestro un ejemplo de cómo crear un dashboard con dos gráficos, una acción y una imagen utilizando la biblioteca `dash` en Python. Primero, debes instalar las bibliotecas necesarias: ```bash pip install dash dash-bootstrap-components plotly pandas ``` Luego, crea un archivo llamado `app.py` con el siguiente código: ```python import dash from dash import dcc, html from dash.dependencies import Input, Output import plotly.express as px import pandas as pd from dash import dash_table import dash_bootstrap_components as dbc # Crea un DataFrame de ejemplo df = pd.DataFrame({ 'Mes': ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio'], 'Ventas': [100, 120, 150, 180, 200, 220], 'Gastos': [50, 60, 70, 80, 90, 100] }) # Crea un gráfico de barras fig1 = px.bar(df, x='Mes', y='Ventas', title='Ventas por mes') # Crea un gráfico de líneas fig2 = px.line(df, x='Mes', y='Gastos', title='Gastos por mes') # Crea un layout para el dashboard app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP]) app.layout = dbc.Container( [ html.H1('Dashboard de ventas y gastos'), dbc.Row( [ dbc.Col( [ html.H2('Ventas por mes'), dcc.Graph(id='graph-ventas', figure=fig1) ], md=6 ), dbc.Col( [ html.H2('Gastos por mes'), dcc.Graph(id='graph-gastos', figure=fig2) ], md=6 ) ] ), dbc.Row( [ dbc.Col( [ html.Button('Actualizar datos', id='button-actualizar', n_clicks=0), html.Div(id='div-actualizar') ], md=6 ), dbc.Col( [ html.Img(src='https://picsum.photos/200/300', style={'width': '100%'}) ], md=6 ) ] ) ], className='p-5' ) # Define una función para actualizar los datos @app.callback( Output('div-actualizar', 'children'), [Input('button-actualizar', 'n_clicks')] ) def actualizar_datos(n_clicks): if n_clicks is not None: return 'Datos actualizados' else: return '' # Inicia el servidor if __name__ == '__main__': app.run_server(debug=True) ``` Este código crea un dashboard con dos gráficos, una acción (botón) y una imagen. El gráfico de barras muestra las ventas por mes, mientras que el gráfico de líneas muestra los gastos por mes. El botón actualiza el texto en la pantalla cuando se hace clic en él. La imagen es una imagen aleatoria generada por la biblioteca `picsum`. Para ejecutar el código, simplemente ejecuta el archivo `app.py` con Python: ```bash python app.py ``` Luego, abre un navegador y ve a `http://localhost:8050` para ver el dashboard en acción.

Want to kickstart your project?Use the new AI Studio to create your code