Callbacks with multiple input

Dash Python
1

I want to create a line chart based on ‘clickdata’ from 2 diiferent bar graphs as in if i click on bar of one of the charts, it plots its relevent data on the line chart . But i can only connect one of the bar chart with the line chart. What i want is if i click on bar on the 1st bar chart , it plots its data on the line chart . But then, if i click on bar of 2nd chart , it should plot its data on the line chart overriding the previous one. And then if again i click on bar of 1st bar chart , it should plot its data overriding the previous one . But i am not able to do it so far. Anybody have any ideas?

2

Hi, maybe you could share your code of the current solution? Otherwise it might be difficult to help you.

3

Not sure how are you doing with it but I tried with something like subplots and used clickdata to return point then used it to filter data to make new graph. Something as below:

import pandas as pd
import numpy as np
import plotly.express as px
import dash
import dash_html_components as html
from dash import dcc
from dash_extensions.enrich import Input, Output
import dash_bootstrap_components as dbc
from dash.exceptions import PreventUpdate

df = px.data.tips()
df2 = df.pivot_table(values='total_bill',
                       index=['day','sex'],
                       aggfunc=np.sum).reset_index()

fig = px.bar(df2, x="day", y="total_bill", facet_col="sex",hover_name='day', color='day',hover_data=['sex'])

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.LUX])

app.layout = html.Div([
    dbc.Row([
        dbc.Col([
            dbc.Card([
                dbc.CardBody([
                    dbc.Row([
                        dbc.Col([
                            html.H5('Bar Chart', style={"text-align": "center"}),
                            dcc.Loading(children=[dcc.Graph(id='barchart_1', 
                                                            figure=fig)], color='#119DFF',
                                        type='dot')
                        ], width={'size': 12, 'offset': 0, 'order': 2}, style={"text-align": "left"}),
                    ]),
                ])
            ]),
        ], xs=6),
        dbc.Col([
            dbc.Card([
                dbc.CardBody([
                    dbc.Row([
                        dbc.Col([
                            html.H5('What did you choose: ', style={"text-align": "center"}),
                            dcc.Graph(id='contents', figure={})
                        ], width={'size': 12, 'offset': 0, 'order': 2}, style={"text-align": "left"}),
                    ]),
                ])
            ]),
        ], xs=6),        
    ], className='p-2 align-items-stretch'),
])


@app.callback(
    Output('contents', 'figure'),
    [Input('barchart_1', 'clickData')])

def update_pie(clickData):
    if clickData:
        click_day = clickData['points'][0]['hovertext']
        click_sex = clickData['points'][0]['customdata']
        df2 = df[df['day']==click_day]
        df3 = df2[df2['sex'].isin(click_sex)]
        df4 = pd.pivot_table(df3,'total_bill',index=['smoker'],aggfunc=np.sum).reset_index()
        fig = px.pie(df4, values='total_bill',names='smoker', hole=0.5)
        fig.update_traces(textposition='outside', textinfo='percent')
        return fig
    else:
        raise PreventUpdate
        
if __name__ == "__main__":
    app.run_server(debug=False, port=1817)

ezgif-3-ac0f8d81c2

1 Like
4

Hey. thanks for the reply but my query got solved using duplicate callbacks.

1 Like
5

Can you share some details?