Graph doesn't plot, I'm having trouble figuring out why

📊 Plotly Python
1 
df = pd.read_csv(file_path1)
df1 = pd.read_csv(file_path2)

# Data cleaning and merging function
def process_data(df, df1, join_column='Time'):
    """
    Clean and merge the data.
    """
    # Merge the dataframes
    df_cleaned = df.dropna(subset=[join_column])  # Drop rows with missing join column
    df1_cleaned = df1.dropna(subset=[join_column])  # Same for the second dataframe
    
    # Merge the dataframes
    merged_df = pd.merge(df_cleaned, df1_cleaned, on=join_column, how='inner')
    
    # Fill missing values with 0 for both dataframes after merging
    merged_df = merged_df.fillna(0)
    
    # Ensure all columns that will be plotted are numeric
    for col in merged_df.columns:
        merged_df[col] = pd.to_numeric(merged_df[col], errors='coerce').fillna(0)
    
    return merged_df

# Apply data cleaning and merging
merged_df = process_data(df, df1)

# Page Layout
layout = html.Div([
    html.H2("Dynamic Graph Visualization for Any Dataset", style={'textAlign': 'center'}),
    html.Label("Select Graph Type:"),
    dcc.Dropdown(
        id='graph-type',
        options=[
            {'label': 'Line Graph', 'value': 'line'},
            {'label': 'Bar Chart', 'value': 'bar'},
            {'label': 'Scatter Plot', 'value': 'scatter'},
            {'label': 'Histogram', 'value': 'histogram'},
            {'label': 'Heatmap', 'value': 'heatmap'}
        ],
        value='line',
        style={'width': '300px'}
    ),
    html.Br(),
    html.Label("Select X-axis:"),
    dcc.Dropdown(
        id='x-axis',
        options=[{'label': col, 'value': col} for col in merged_df.columns],
        value=merged_df.columns[0],  # Default to first column
        style={'width': '300px'}
    ),
    html.Br(),
    html.Label("Select Y-axis (can select multiple):"),
    dcc.Dropdown(
        id='y-axis',
        options=[{'label': col, 'value': col} for col in merged_df.columns if col != 'Time'],
        value=[merged_df.columns[1]],  # Default to second column for Y-axis
        multi=True,
        style={'width': '300px'}
    ),
    html.Br(),
    dcc.Graph(id='graph-output', style={'height': '800px'})
])

# Callback for dynamic graph updates
@callback(
    Output('graph-output', 'figure'),
    [Input('graph-type', 'value'),
     Input('x-axis', 'value'),
     Input('y-axis', 'value')]
)
def update_graph(graph_type, x_col, y_cols):
    """
    Update the graph based on selected options for graph type, X-axis, and Y-axis.
    """
    # Ensure selected columns exist in the merged DataFrame
    if x_col not in merged_df.columns or any(y not in merged_df.columns for y in y_cols):
        return px.scatter(title="Invalid column selection.")

    # Drop rows with NaN in selected columns
    cleaned_df = merged_df.dropna(subset=[x_col] + y_cols)

    # Plot the requested graph
    if graph_type == 'line':
        fig = px.line(cleaned_df, x=x_col, y=y_cols, title="Line Graph")
    elif graph_type == 'bar':
        fig = px.bar(cleaned_df, x=x_col, y=y_cols, title="Bar Chart")
    elif graph_type == 'scatter':
        fig = px.scatter(cleaned_df, x=x_col, y=y_cols, title="Scatter Plot")
    elif graph_type == 'histogram':
        fig = px.histogram(cleaned_df, x=x_col, y=y_cols, title="Histogram")
    elif graph_type == 'heatmap':
        # Heatmap requires pivoting or aggregation
        heatmap_data = cleaned_df.pivot_table(index=x_col, values=y_cols, aggfunc='mean')
        fig = px.imshow(heatmap_data, title="Heatmap")
    else:
        fig = px.scatter(title="Unsupported Graph Type")

    fig.update_layout(title=f"{graph_type.capitalize()} of {', '.join(y_cols)} vs {x_col}")
    return fig

Can someone help me debug this? Thanks!

2

Hey @syntax welcome to the forums.

I would focus on the type of the arguments for the px.functions. Maybe they are a list of a list, a df.column or even string.

Did you run with debug=True? Did you try with dummy data?

3

oh i’ve solved it already thank you though