How to single select a row from Dash DataTable and create a line graph based on a value from that selected row

Dash Python
1

I have a DataTable that has a single select option.
I want to give the functionality of selecting a row and based on a value from column 1 , a new line graph will be populated
What Input from my DataTable can I use to do that
I tried the derived virtual data but it extracts everything
And the selected rows only extracts the index of a row being selected but not the values.

For example:
@app.callback(
    Output('line-graph', 'children'),
    Input('dash-data-table', "derived_virtual_data"),
    Input('dash-data-table', 'derived_virtual_selected_rows'),
)
       code.... 
       return (div : dcc Graph)
2

You could listen for mouse events using the EventListener component. Here is a small example,

import dash_html_components as html
import dash_table
import pandas as pd
from dash import Dash
from dash.dependencies import Output, Input
from dash_extensions import EventListener

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/solar.csv')
listen_prop = "srcElement.innerText"

app = Dash()
app.layout = html.Div([
    # The EventListener components listens to events from children (or document, if no children are specified).
    EventListener(id="el", events=[{"event": "click", "props": [listen_prop]}], children=[
        dash_table.DataTable(
            id='table',
            columns=[{"name": i, "id": i} for i in df.columns],
            data=df.to_dict('records'),
        )
    ]),
    # Containers for logging.
    html.Div(id="event"), html.Div(id="n_events"),
])


@app.callback(Output("event", "children"), Input("el", "event"), prevent_initial_call=True)
def log_event(event):
    return event[listen_prop]


if __name__ == '__main__':
    app.run_server(port=7777)

Peek 2021-09-21 17-33

It is available in dash-extensions==0.0.61rc3. I expect to push it to non-rc relatively soon.

1 Like
3

What about using the selected rows index property as an Input and the virtual data property as State? That way, you would have both the ID of the selected row and all table data from which you can then filter only the data for your row of interest.

I haven’t used derived_virtual_data nor derived_virtual_selected_rows so I don’t know how exactly they work but I have used selected_row_ids property to extract the ID of a selected row.

1 Like