Black Lives Matter. Please consider donating to Black Girls Code today.

New div for each callback, 2 outputs


I’m trying to create a dash app that display 2 graph next to each other.

When i select another option from the scrolldown, it needs to display a new div below

It kinds of works but not really. the Simple Stock Tickers App from the dash user guide helped me a lot but I still have some bugs.

Here is a gif I did to show the problem

The layout is good when the page loads for the first time but then the pie chart has some problem :smiley:

When i want to update both graph with radioitems for example, the main graph is updated perfectly but the pie is going ‘behind’ the main graph and the previous one stays inplace.
Looks like it is mainly a visual problem / css problem.

I use html.Div(children=[html.Div(id='graphs'),html.Div(id='sentiment-pie'),]) in my app.layout with this css
div#graphs { display:inline-block; width:75%; } div#sentiment-pie { display:inline-block; width:25%; }

The callbacks looks like
@app.callback(Output('graphs', 'children'), [Input(component_id='sentiment_term', component_property='value'), Input('influencers', 'value'), Input('date', 'value')],
graphs.append(dcc.Graph(id=each_sentiment_term, figure={ 'data': data, 'layout': go.Layout(xaxis=dict(range=[min(X),max(X)]), yaxis=dict(range=[min(Y2),max(Y2)], title='Volume', side='right'), yaxis2=dict(range=[min(Y),max(Y)], side='left', overlaying='y',title='Sentiment'),showlegend=False, )})) return graphs

@app.callback(Output('sentiment-pie', 'children'), [Input(component_id='sentiment_term', component_property='value'), Input('influencers', 'value'), Input('date', 'value')], )

pie.append(dcc.Graph(id=each_sentiment_term, figure={"data":[trace],'layout' : go.Layout( title='Positive vs Negative sentiment', font={'color':app_colors['text']}, showlegend=False)} )) return pie

Thanks very much :slight_smile: