Graph not updating correctly and graph size

Dash Python
1

Hi,
I’m learning Dash to try to create a dashboard, I had some succeses lately but I’m stuck on what seems a simple question.
I have a pandas dataframe loaded which has lots of data but I only want to plot right now the benefits of some countries. I have this information for different weeks so what I’m trying to do is a bar graph where I can choose the week with a selector. My code looks like this:

Zones= pd.read_excel(r’C:\Users\----\zones.xlsx’)
Columns = [‘Station’, ‘Week’, ‘Benefit’,‘Country’]
zones_filtered = zones[Columns]
avaliable_weeks = zones_filtered[‘Week’].unique()

This part loads correctly with no issues

Then my code:
external_stylesheets = [‘https://codepen.io/chriddyp/pen/bWLwgP.css’]
app = dash.Dash(name, external_stylesheets=external_stylesheets)
app.layout = html.Div(children=[
html.H1(children=‘Zones’,className=“text-center”),
html.Div(children=’’’’’’),
dcc.Dropdown(
id=‘Week-choose’,
options=[{‘label’:i , ‘value’:i} for i in avaliable_weeks],
),
html.Div(id=‘Average_graph’),
])

def update_value(Weeke):
zones_filtered_week = pd.pivot_table(zones_filtered, values=‘Cost Benefit of HZ’, columns=‘Week’,index=‘Country’)

return dcc.Graph(
id=‘Average_graph’,
figure={
‘data’: [{‘x’: zones_filtered_week.index , ‘y’ : zones_filtered_week.Weeke,‘type’: ‘bar’, ‘name’: ‘Hypezone’,},],
‘layout’:{
‘title’: ‘Average’,
}
})
if name == ‘main’:
app.run_server(debug=True)

I think the problem is on the y axis because the pivot table gets created correctly with the name of the countries on the index and each week on the columns something like this:

  Week 31 Week 32 Week 33

DE xxx xxx xxx
ES xxx xxx xxx
FR xxx xxx xxx

Does anyone know what’s wrong? And while I’m at it I have been looking throug the getting started guide but is there any easy way to display multiple graphs choosing the size? I may want to end up with multiple graphs on the page something like this:

                graph1
             graph2  / graph3
            graph2  /graph4

Graph 2 has the same size as graph3 and4 combined

Thanks a ton!

2

Can you reformat your code with proper indentation so it is easier to read?

Regarding your second question:
You can specify the graph size with width and height properties. For ordering your layout you can use the grid from the stylesheet you are already using or the grid layout from the dash bootstrap components module.