Hi Guys I am quite new with dash and I struggling with this simple web app.
I want to have 2 graphs with different ‘y’ values inside:
The first one should report the ‘PnL’ values for selected ‘Commodity’.
The second one should report the ‘Var’ values for the selected ‘Commodity’.
But at the end I get the same graph, with the same y values inside (eg ‘PnL’). Thanks for helping me!
this is the code:
from dash import Dash, html, dcc, Input, Output
import pandas as pd
import plotly.express as px
import dash_bootstrap_components as dbc
data = pd.read_csv(“C:\Users\carlo\OneDrive\Desktop\Trading & Risk - Carlo\Dash\Dati\Statement2.csv”)
app = Dash(external_stylesheets=[dbc.themes.PULSE])
comm_dropdown = dcc.Dropdown(id=‘commodity-dropdown’,
options=data[‘Commodity’].unique(),
value=‘Gas’,
style={
‘width’: ‘50%’
}
)
comm2_dropdown = dcc.Dropdown(id=‘commodity-dropdown2’,
options=data[‘Commodity’].unique(),
value=‘Gas’,
style={
‘width’: ‘50%’
}
)
PnLGraph = dcc.Graph(id=‘TP&L’,figure={})
VaRGraph = dcc.Graph(id=‘VaR’,figure={})
navbar = dbc.NavbarSimple(
children=[
dbc.NavItem(dbc.NavLink(“Key Risk Indicator”, href=“#”)),
dbc.DropdownMenu(
children=[
dbc.DropdownMenuItem(“More pages”, header=True),
dbc.DropdownMenuItem(“Market Prices”, href=“#”),
dbc.DropdownMenuItem(“News”, href=“#”),
],
nav=True,
in_navbar=True,
label=“More”,
),
],
brand=“Trading Prop 2022”,
brand_href=“#”,
color=“dark”,
dark=True,
)
app.layout = html.Div(className=‘row’, children=[
html.H1([comm_dropdown, comm2_dropdown]), navbar,
html.Div(children=[
PnLGraph,
VaRGraph])
])
@app.callback(
Output(component_id=‘TP&L’, component_property=‘figure’),
Input(component_id=comm_dropdown, component_property=‘value’)
)
@app.callback(
Output(component_id='VaR', component_property='figure'),
Input(component_id=comm2_dropdown, component_property='value')
)
def update_graph(selected_commodity):
filtered_avocado = data[data[‘Commodity’] == selected_commodity]
line_fig = px.line(filtered_avocado,
x=‘date’, y=‘PnL’,
title=f’ PnL in {selected_commodity}')
return line_fig
def update_graph_2(selected_commodity2):
filtered_avocado2 = data[data[‘Commodity’] == selected_commodity2]
line_fig2 = px.line(filtered_avocado2,
x=‘Year’, y=‘VaR’,
title=f’ VaR for {selected_commodity2}')
return line_fig2
if name == ‘main’:
app.run_server(debug=True)