How to use dynamically generated list from first call back to draw a second bar graph in the second call back?

Dash Python
1

Hi,

I am trying to generate a list in the first call back and pass it on to a second call back. I am not sure of how I can do it! Here is my code:

import dash
import dash_core_components as dcc
import dash_html_components as html
import csv
from pathlib import Path
from glob import glob
from dash.dependencies import Output, Event
from dash.dependencies import Input, Output

external_stylesheets = [
# Dash CSS
‘https://codepen.io/chriddyp/pen/bWLwgP.css’,
# Loading screen CSS
‘https://codepen.io/chriddyp/pen/brPBPO.css’]
getPlot = dash.Dash(name, external_stylesheets=external_stylesheets)
styles = {
‘pre’: {
‘border’: ‘thin lightgrey solid’,
‘overflowX’: ‘scroll’
}
}

getPlot.layout = html.Div(children=[
html.H1(children=‘STATS’),

html.Div(children='''
    Here are the first stats
'''),
dcc.Dropdown(
		id='input',
		options=[
			{'label': 'A', 'value': 'aaaaa'},
        	{'label': 'B', 'value': 'bbbbb'},
        	{'label': 'C', 'value': 'ccccc'},
        ],
	),

dcc.Graph(id='first-stats-graph'),

html.Div(id='second-stats-graph', style={'display': 'none'}),
html.H2(children='''
		Select an option from the dropdown  below to see second set of stats
		'''),
dcc.Dropdown(
    id='second-dropdown',
    options=[
        {'label': str(i), 'value': i} for i in <list_created_in_first_callback>
    ],
	style={'width': '200', 'display': 'inline-block', 'fontColor': 'blue'},
),
dcc.Graph( id='second-stats-graph'),

])

@getPlot.callback(
Output(component_id=‘first-stats-graph’, component_property=‘figure’),
[Input(component_id=‘input’, component_property=‘value’)])

def update_value(value):

firstCallBackList = generate_first_list(value)
return({'data': [
			{'x': date, 'y': numOfbikes, 'type': 'bar', 'name': "Bikes"},
			{'x': date, 'y': numOfCars, 'type': 'bar', 'name': "Car"},
		],
		'layout': {
			'title': "stats for vehicles",
			'barmode' : "stack",
			'type': 'category',
			'xaxis' :dict(tickvals = 'tickvals', ticktext = 'labels', title='test', tickmode = 'linear', ticklen='4', tickwidth='4', size='4')
		},
	}
)

@getPlot.callback(
Output(component_id=‘second-stats-graph’, component_property=‘figure’),
[Input(component_id=‘second-dropdown’, component_property=‘value’)]
)

def get_second_set_of_stats(value):

<use firstCallBackList here to generate the next stats>
return({'data': [
			{'x': x, 'y': y1, 'type': 'bar', 'name': "Y1"},
			{'x': x, 'y': y2, 'type': 'bar', 'name': "Y2"},
		],
		'layout': {
			'title': "Second call back stats",
			'size' : '16',
			'barmode' : "stack",
			'type': 'category',
			'xaxis' :dict(tickvals = '123', ticktext = 'def', title='second call back stats', tickmode = 'linear', ticklen='8', tickwidth='4')
		}, 
	}
)

if name == ‘main’:
getPlot.run_server(debug=false, host=‘0.0.0.0’)

However, the problem is, since I am calling html.H1 and html.H2 in the same block, the list generated in first call back and used in second callback is null due to compiler optimization. Can anyone help me with this please?

2

Best for the #dash forums