How to clear second graph every time the first drop down selection changes?

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 to generate graph using the first drop down selection! The second dropdown / graph is dependent on the selection in the first drop down. I want to clear the second graph (html.H2) every time the first drop down changes. How do I 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 drop down selection from first call back 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’)

I have not found a way to clear the second graph! the older graph continues to be displayed until the second drop down selection changes.