✊🏿 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 + chart = my headache! Please help!

Any idea why the chart is empty???

==============================================================

import pandas as pd
import yfinance as yf

list=pd.read_csv(‘C:/Users/Utente/Python/Progetti/csv_lists\List_Short.csv’,sep=";",encoding=‘latin-1’)
list_symbols=
for symbol in list.Symbol:
list_symbols.append(symbol)

start=“2020-10-1”
end=“2020-11-08”
mylist= list_symbols

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,
#style_header={‘backgroundColor’: ‘rgb(30, 30, 30)’},
#style_cell={
# ‘backgroundColor’: ‘rgb(50, 50, 50)’,
# ‘color’: ‘white’
# },
hidden_columns=[‘Adj Close’,‘counter’],

    style_header={ 'border': '1px solid black' },
    style_cell={
        'height': 'auto',
        # all three widths are needed
        'minWidth': '50px', 'width': '50px', 'maxWidth': '50px',
        'whiteSpace': 'normal'
        },
    
    css=[{'selector': 'table', 'rule': 'table-layout: fixed'}]
    
),

#html.Div(id='my-div')
dcc.Graph(id='graph'),

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

@app.callback(Output(‘graph’, ‘figure’),
[Input(‘datatable’, ‘selected_rows’)]
)
def update_figure(row):

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

filtered_df = df[df['Ticker'] == selected_ticker]

traces =go.Scatter(
        x=filtered_df.index,
        y=filtered_df.Close,
        mode='lines'
    )

layout = go.Layout(
    title = str(row),
    xaxis = dict(title = 'Date'), # x-axis label
    yaxis = dict(title = 'Price'), # y-axis label
    hovermode ='closest' # handles multiple points landing on the same vertical
    )

return {
    'data': traces,
    'layout': layout
}

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