Dash Dropdown changing multiple graphs

Question

I am building a dashboard using dash and plotly, but I am having trouble with my callbacks. I have reviewed the documentation but can't seem to get things to work correctly. The layout that I have is correct, I just cannot get the graphs to update. The idea is that when a job number is selected, all the graphs will change accordingly.

When I run the code in a seperate jupyter notebook the graphs work perfectly, just not in the app. I am new to python and dash so I apologize if the mistake is something silly.

The intended structure of the dashboard is as follows:
--- Row1 --- Header
--- Row2 --- 2 columns with Dropdown Selectors in each (rowid_selector & solution_selector)
--- Row3 --- 2 columns with 2 graphs (histograms)
--- Row4 --- 2 columns with 2 graphs (line & pie)
--- Row5 --- Customer Intent dataframe

   ''' Imports & Dependencies'''


from dash import dash, dcc, html, dash_table
from dash.dependencies import Input, Output, State
import dash_bootstrap_components as dbc
import plotly.express as px
import plotly.graph_objects as go
import pandas as pd
import numpy as np
import sqlite3

''' Import of data '''

df = pd.read_csv('data2.csv')
cdata = pd.read_csv('cdata.csv')


# ----------------

app = dash.Dash(external_stylesheets=[dbc.themes.MINTY])

server = app.server

rowid_options = []
for rowid in df['rowID'].unique():
    rowid_options.append({'label':rowid,'value':rowid})

solution_options = []
for solution in df['solution'].unique():
    solution_options.append({'label':solution,'value':solution})


app.layout = dbc.Container([
    dbc.Row([html.H1("Analytics Dashboard")]),
    dbc.Row([
        html.Label("Select the campaign RowID or Solution that you would like to query from the dropdowns below."),
        dbc.Col([dcc.Dropdown(id = "rowid_selector", options = rowid_options,
        clearable=True, placeholder="Select your RowID")
    ]),
        dbc.Col([dcc.Dropdown(id = "solution_selector", options = solution_options,
        clearable=True, placeholder="Select your Product/Solution")
    ])]),
    dbc.Row([
        dbc.Col([dcc.Graph(
            id='graph1', figure={}
            )
            ]),
        dbc.Col([dcc.Graph(
            id='graph2', figure={}
            )
            ]),
    ]),
    dbc.Row([
        dbc.Col([dcc.Graph(
            id='graph3', figure={}
            )
            ]),
        dbc.Col([dcc.Graph(
            id='graph4', figure={}
            )
            ])
    ]),
        dbc.Row([html.H2("Customer Intent Tracker")]),
        dbc.Row([
            html.Div([
                dash_table.DataTable(
                    id='datatable-interactivity',
                    columns=[{"name": i, "id": i, "deletable": False, "selectable": True} for i in cdata.columns],
                    data=cdata.to_dict('leads'),
                    editable=True,
                    filter_action="native",
                    sort_action="native",
                    sort_mode="multi",
                    column_selectable="single",
                    row_selectable="multi",
                    row_deletable=False,
                    selected_columns=[],
                    selected_rows=[],
                    page_action="native",
                    page_current= 0,
                    page_size= 10,
                ),
                html.Div(id='datatable-interactivity-container')
            ])
        ])
])



@app.callback(
    Output("graph1", "figure"), 
    Input("rowid_selector", "value"))

def update_value(selected_rowid):
    campaign_summary = df.loc[df.rowID.isin([selected_rowid]),["rowID", "status"]]
    campaign_summary["Counts"] = campaign_summary.groupby(["status"]).transform(len)
    campaign_summary.set_index("rowID", inplace=True)
    campaign_summary.drop_duplicates()

    graph1 = px.histogram(campaign_summary, x=campaign_summary.index, nbins=20, color='status')
    graph1.update_layout(bargap=0.2)

    return graph1

if __name__ == "__main__":
    app.run_server(debug=False, port=8050)

Answer 1

Create your Columns with no children, and add the dcc.Graph object to their children with the callback. Like this :

     ''' Imports & Dependencies'''

from dash import dash, dcc, html, dash_table
from dash.dependencies import Input, Output, State
import dash_bootstrap_components as dbc
import plotly.express as px
import plotly.graph_objects as go
import pandas as pd
import numpy as np
import sqlite3

''' Import of data '''

df = pd.read_csv('data2.csv')
cdata = pd.read_csv('cdata.csv')


# ----------------

app = dash.Dash(external_stylesheets=[dbc.themes.MINTY])

server = app.server

rowid_options = []
for rowid in df['rowID'].unique():
    rowid_options.append({'label':rowid,'value':rowid})

solution_options = []
for solution in df['solution'].unique():
    solution_options.append({'label':solution,'value':solution})


app.layout = dbc.Container([
    dbc.Row([html.H1("Analytics Dashboard")]),
    dbc.Row([
        html.Label("Select the campaign RowID or Solution that you would like to query from the dropdowns below."),
        dbc.Col([dcc.Dropdown(id = "rowid_selector", options = rowid_options,
        clearable=True, placeholder="Select your RowID")
    ]),
        dbc.Col([dcc.Dropdown(id = "solution_selector", options = solution_options,
        clearable=True, placeholder="Select your Product/Solution")
    ])]),
    dbc.Row([
        dbc.Col(id = 'col_graph1', children={}),
        dbc.Col(id = 'col_graph2', children={}),
    ]),
    dbc.Row([
        dbc.Col(id='col_graph3', children={}),
        dbc.Col(id='col_graph4', children={}),
    ]),
    dbc.Row([html.H2("Customer Intent Tracker")]),
    dbc.Row([
        html.Div([
            dash_table.DataTable(
                id='datatable-interactivity',
                columns=[{"name": i, "id": i, "deletable": False, "selectable": True} for i in cdata.columns],
                data=cdata.to_dict('leads'),
                editable=True,
                filter_action="native",
                sort_action="native",
                sort_mode="multi",
                column_selectable="single",
                row_selectable="multi",
                row_deletable=False,
                selected_columns=[],
                selected_rows=[],
                page_action="native",
                page_current= 0,
                page_size= 10,
            ),
            html.Div(id='datatable-interactivity-container')
        ])
    ])
])



@app.callback(
    Output("col_graph1", "children"),
    Input("rowid_selector", "value"))

def update_value(selected_rowid):
    campaign_summary = df.loc[df.rowID.isin([selected_rowid]),["rowID", "status"]]
    campaign_summary["Counts"] = campaign_summary.groupby(["status"]).transform(len)
    campaign_summary.set_index("rowID", inplace=True)
    campaign_summary.drop_duplicates()

    fig1 = px.histogram(campaign_summary, x=campaign_summary.index, nbins=20, color='status')
    fig1.update_layout(bargap=0.2)

    graph1 = dcc.Graph(id="graph1", figure=fig1)

    return graph1

if __name__ == "__main__":
    app.run_server(debug=False, port=8050)

Howerver without the data I can be 100% sure that this code works.