Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

Problem in creating a graph from selected rows

I am trying to create a dashboard in which selected rows from a table are viewed in another table (this part is working) and, to creta a graph (type horizontal bar) in which the columns ids should be the X and their respective sum of the selected columns the Y axis. So far, I only achieved to replicate the graphs from one of the tutorials.
Below is my code. Can any body help me understand how to solve it.

import flask
import dash
from dash.dependencies import Input, Output, State
import dash_bootstrap_components as dbc
import dash_table
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.graph_objs as go

server = flask.Flask(name)

@server.route(’/’)
def index():
return app.index()
app = dash.Dash(
name,
server=server,
external_stylesheets=[dbc.themes.BOOTSTRAP],
routes_pathname_prefix=’/dash/’
)

data = {
‘Findings’: [‘f1’, ‘f2’, ‘f3’, ‘f4’, ‘f5’, ‘f6’, ‘f7’, ‘f8’],
‘PP’: [‘und’, ‘und’, ‘und’, ‘und’, ‘und’, ‘und’, ‘und’, ‘und’],
‘A1’: [0, 0, 0, 0, 0, 0.95, 0, 0],
‘A2’: [0, 0.9, 0, 0.5, 0, 0.2, 0, 0.5],
‘A3’: [0, 0.1, 0, 0.9, 0, 0.5, 0, 0],
‘A4’: [0.9, 0, 0.6, 0, 0, 0.95, 0, 0],
‘A5’: [0.4, 0.9, 0, 0.7, 0, 0.2, 0, 0.8],
‘A6’: [0, 0.1, 0, 0.9, 0, 0.5, 0.9, 0.5]
}

df = pd.DataFrame(data)

app.layout = html.Div(children=[
html.H1(children=‘Tables & graphs’),
html.Div([
dbc.Row([
dbc.Col(html.Div([
html.H3(‘Findings selection’),
dash_table.DataTable(
id=‘datatable-interactivity’,
data=df.to_dict(‘records’),
columns=[
{‘id’ : ‘Findings’, ‘name’: ‘Findings’, ‘deletable’: False},
{‘id’ : ‘PP’, ‘name’: ‘PP’, ‘deletable’: False, ‘presentation’: ‘dropdown’},
],
fixed_rows={‘headers’: True, ‘data’: 0},
row_deletable=False,
editable=True,
dropdown={
‘PP’ : {
‘options’: [
{‘label’: ‘und’, ‘value’: ‘und’},
{‘label’: ‘Present’, ‘value’: ‘Present’},
{‘label’: ‘Absent’, ‘value’: ‘Absent’}
]
}
},
row_selectable=“multi”,
selected_rows=
),
]), width={‘size’:6},
),
dbc.Col(html.Div(
html.H3(‘Selected Findings’),
id=‘display_selected_row’,
), width={‘size’:6},
),
]),
]),
html.H2(children=‘Outcome’),
dbc.Row([
dbc.Col(html.Div(
id=‘ranking’
)
)
])
])

@app.callback(
Output(‘display_selected_row’, “children”),
[Input(‘datatable-interactivity’, “selected_rows”),
Input(‘datatable-interactivity’, “data”)])
def update_table(selected_rows, rows):
if selected_rows is None:
selected_rows =

dff = df if rows is None else pd.DataFrame(rows)
dff = dff.iloc[selected_rows]

return html.Div([
    dash_table.DataTable(
        id='display_selected_row_data_table',
        columns=[
            {"name": i, "id": i} for i in dff.columns
        ],
        data=dff.to_dict("rows")
    ),
])

@app.callback(
Output(‘datatable-interactivity’, ‘style_data_conditional’),
[Input(‘datatable-interactivity’, ‘selected_columns’)]
)
def update_styles(selected_columns):
return [{
‘if’: { ‘column_id’: i },
‘background_color’: ‘#D2F3FF
} for i in selected_columns]

@app.callback(
Output(‘ranking’, “children”),
[Input(‘datatable-interactivity’, “derived_virtual_data”),
Input(‘datatable-interactivity’, “derived_virtual_selected_rows”)])
def update_graphs(rows, derived_virtual_selected_rows):
if derived_virtual_selected_rows is None:
derived_virtual_selected_rows =

dff0 = df if rows is None else pd.DataFrame(rows)
dff0 = dff0.iloc[derived_virtual_selected_rows]

colors = ['#7FDBFF' if i in derived_virtual_selected_rows else '#0074D9'
          for i in range(len(dff0))]

return [
    dcc.Graph(
        id=column,
        figure={
            "data": [
                {
                    "x": dff0["Findings"],
                    "y": dff0[column],
                    "type": "bar",
                    "marker": {"color": colors},
                }
            ],
            "layout": {
                "xaxis": {"automargin": True},
                "yaxis": {
                    "automargin": True,
                    "title": {"text": column}
                },
                "height": 250,
                "margin": {"t": 10, "l": 10, "r": 10},
            },
        },
    )
    # check if column exists - user may have deleted it
    # If `column.deletable=False`, then you don't
    # need to do this check.
    for column in ['A1', 'A2', 'A3', 'A4', 'A5', 'A6'] if column in dff0
]

if name == ‘main’:
app.run_server(debug=True)