Filtering data on click on barchart

Dash Python
1

Hi there!
I have a dropdown for interactive choosing the variable for barchart. I am trying to filter data on click on some bar on barchart. It works well, but then I want to choose another variable for barchart and at this moment I wish data to return to default, without filtering, all data. I was trying to do it like this, but at the time of choosing another variable for barchart the returned data is empty. I would be really grateful for any suggestions. Thank you!

@callback(
    Output('data-table', 'data'),
    [Input('frequency-graph', 'clickData'),
     Input('frequency-variable-dropdown', 'value')]
)
def update_data_table(click_data, var):
    if click_data:
        clicked_value = click_data["points"][0]["x"]
        updated_data = data[data[var] == clicked_value].to_dict("records")
    elif var:
        updated_data = data.to_dict("records")
    else:
        updated_data = data.to_dict("records")

    return updated_data
2

HI @mir welcome to the forums.

We had this question not too long ago, at least it sound like it. :wink:

3

Unfortunately, even with this approach after choosing another variable on bar chart I have got the empty data:

@callback(
    Output('data-table', 'data'),
    [Input('frequency-graph', 'clickData'),
    Input('frequency-variable-dropdown', 'value')],
    [State('frequency-graph', 'clickData'),
    State('frequency-variable-dropdown', 'value')],
    prevent_initial_call=True
)
def update_data_table(click_data, var, click_opt, var_opt):

    if not click_data and not var:
        raise PreventUpdate

    if not click_data:
        click_data = click_opt
    if not var:
        var = var_opt

    if click_data:
        clicked_value = click_data["points"][0]["x"]
        updated_data = data[data[var] == clicked_value].to_dict("records")
        click_data = None
    else:
        updated_data = data.to_dict("records")

    return updated_data
4

Could you please post a minimal working example which we can use to reproduce your problem on our computers?

5

Here it is:

import dash
from dash import Dash, html, dcc, dash_table, Input, Output, State
import pandas as pd
import plotly.express as px
from sklearn.preprocessing import StandardScaler
import plotly.graph_objs as go
import numpy as np

app = Dash(__name__)
data = pd.read_csv("METABRIC_RNA_Mutation.csv")

app.layout = html.Div(children=[
    # Frequency Graph by Label section
    html.Div(style={'padding': '10px', 'border': '1px solid #ccc', 'border-radius': '5px', 'box-shadow': '2px 2px 5px rgba(0, 0, 0, 0.1)', 'margin-bottom': '20px'}, children=[
        html.Div(className='row', children=[
            # Dropdown container
            html.Div( children=[
                html.Label("Choose variable for frequency graph:"),
                dcc.Dropdown(
                    id='frequency-variable-dropdown',
                    options=[{'label': var, 'value': var} for var in data.columns[:31]],
                    value=data.columns[7],  # Set default value
                ),
            ]), 
            # Graph container
            html.Div( children=[
                html.H3('Frequency Graph by Label'),
                dcc.Graph(id='frequency-graph'),
            ]),
        ]),
    ]),
    # Data Table section
    html.Div(
        className="row", style={'margin-top': '20px','background-color': 'white', 'padding': '10px', 'box-shadow': '2px 2px 10px rgba(0, 0, 0, 0.2)'},
        children=[
            html.Div(
                style={"width": "100%"},
                children=[
                    html.H4("Data Table"),
                    dash_table.DataTable(
                        id="data-table",
                        columns=[
                            {"name": col, "id": col} for col in data.columns
                        ],
                        data=data.to_dict("records"),
                        style_table={
                            "height": "300px",
                            "overflowY": "scroll",
                        },
                        style_cell={"padding": "3px"},
                        style_header={
                            "backgroundColor": "rgb(230, 230, 230)",
                            "fontWeight": "bold",
                        },
                        row_selectable="multi",
                        selected_rows=[],
                        active_cell={
                            "row": 1,
                            "column": 0,
                        }, 
                    ),
                ],
            )
        ],
    ),
])

# Define a callback to update the frequency graph
@app.callback(
    dash.dependencies.Output('frequency-graph', 'figure'),
    [dash.dependencies.Input('frequency-variable-dropdown', 'value')]
)
def update_frequency_graph(selected_variable):
    # Calculate the frequency distribution by label
    frequency_data = data.groupby(selected_variable).size().reset_index(name='Frequency')

    # Get a list of unique labels for the selected variable
    labels = frequency_data[selected_variable]

    # Create a color scale for the bars based on the number of labels
    colors = [f"hsl({hue}, 50%, 50%)" for hue in range(0, 360, int(360 / len(labels)))]

    # Create the bar chart
    trace = go.Bar(
        x=frequency_data[selected_variable],
        y=frequency_data['Frequency'],
        marker=dict(color=colors)
    )

    layout = go.Layout(
        title=f'Frequency Distribution of {selected_variable}',
        xaxis=dict(title=selected_variable),
        yaxis=dict(title='Frequency'),
    )

    figure = go.Figure(data=[trace], layout=layout)

    return figure

@app.callback(
    Output('data-table', 'data'),
    Input('frequency-graph', 'clickData'),
    Input('frequency-variable-dropdown', 'value')
)
def update_data_table(clickData, var):
    if clickData:
        clicked_value = clickData["points"][0]["x"]
        return data[data[var] == clicked_value].to_dict("records")
    
    return data.to_dict("records")

if __name__ == '__main__':
    app.run_server(debug=True)

The file is possible to download on this link: METABRIC_RNA_Mutation.csv - Google Drive