✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

Datatable callback to html Div

Hey guys I am new to Dash and this is driving me crazy.

I am trying to use a datatable to change graph when selecting a row.

Just to start, in the attached code I would like to select a row in the data table and return a value in html Div.

It works outside the callback function but it doesnt inside.
Where am I wrong?

#===============================================
import pandas as pd
import yfinance as yf

start=“2020-10-1”
end=“2020-11-08”
mylist= [‘AAPL’,“MSFT”,“GOOG”]

df = yf.download(mylist, start=start,end=end,group_by=‘Ticker’, interval=‘1D’)
df = df.stack(level=0).rename_axis([‘Date’, ‘Ticker’]).reset_index(level=1)
df[‘counter’]=df.groupby([‘Ticker’]).cumcount()

table_df=df[df.index == ‘2020-11-06’]

import dash
from dash.dependencies import Input, Output
import dash_table
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import dash_table.FormatTemplate as FormatTemplate
import plotly.graph_objs as go

#df = pd.read_csv(‘https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv’)

app = dash.Dash(name)

app.layout = html.Div([
dash_table.DataTable(
id=‘datatable’,
columns=[
{“name”: ‘Ticker’,
“id”: ‘Ticker’,
“deletable”: False,
“selectable”: True
},
{“name”: ‘Open’,
“id”: ‘Open’,
“deletable”: False,
“selectable”: True,
‘type’: ‘numeric’,
‘format’: FormatTemplate.money(2)
},
{“name”: ‘High’,
“id”: ‘High’,
“deletable”: False,
“selectable”: True,
‘type’: ‘numeric’,
‘format’: FormatTemplate.money(2)
},
{“name”: ‘Low’,
“id”: ‘Low’,
“deletable”: False,
“selectable”: True,
‘type’: ‘numeric’,
‘format’: FormatTemplate.money(2)
},
{“name”: ‘Close’,
“id”: ‘Close’,
“deletable”: False,
“selectable”: True,
‘type’: ‘numeric’,
‘format’: FormatTemplate.money(2)
},
{“name”: ‘Volume’,
“id”: ‘Volume’,
“deletable”: False,
“selectable”: True
},
],
data=table_df.to_dict(‘records’),
editable=False,
filter_action=“native”,
sort_action=“native”,
sort_mode=“multi”,
column_selectable=“single”,
row_selectable=“single”,
row_deletable=False,
#column_deletable=False,
selected_columns=,
selected_rows=[0],
page_action=“native”,
page_current= 0,
page_size= 8,
style_as_list_view=True,
),

    html.Div('DIV',id='my-div')

], style={‘marginLeft’: 10, ‘marginRight’: 600})

@app.callback(
Output(component_id=‘my-div’, component_property=‘children’),
[Input(component_id=‘datatable’, component_property=‘derived_virtual_selected_rows’)]
)
def update_figure(derived_virtual_selected_rows):

selected_ticker=str(df['Ticker'].iloc[derived_virtual_selected_rows])

return  selected_ticker # What is wrong with this? it should be a string 

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