Embedding data into html.Details

Dash Python
1

Hi all.
Im new to Python and Dash.
As i’m interested in Data Analytics I started messing around with Dash.
The plan is to build a stock dashboard but i’m stuck with some things…
I want to have an dcc.Input box where you can put a Ticker and submit with html.button, later on I want to display data from multiple stocks in different html.Details created by a for-loop which interates through different stocks by selected criteria.

I’m not getting to far because I don’t understand the callback. When trying the provided code I get Error:Callback error updating table.children - AttributeError: ‘NoneType’ object has no attribute ‘upper’ and after input I get AttributeError: ‘int’ object has no attribute 'upper’

Whats the correct way to turn the data from a ticker into a datatable I can put in a html.Details and how?

import yfinance as yf
import pandas as pd
import dash
import dash_table
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Output, Input, State

app = dash.Dash()
app.layout = html.Div([
    dcc.Input(id='input', value='', type='text', placeholder='Enter Stock ticker'),
    html.Button('Submit', id='button'),
    html.Div(id='table')
])

@app.callback(
    [Output('table', 'children')],
    [Input('button', 'n_clicks')],
    [State('input', 'value')]
)

def update_table(input_value, n_clicks):
    ticker = yf.Ticker(input_value.upper())
    history = ticker.history(period='max')
    return html.Div([
        html.Details(
            dash_table.DataTable(
                id='tickerdata',
                columns = [{'name': i, 'id': i} for i in history.columns],
                data = history,
            )
        )
    ])

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

Hi @Likonima welcome to the Dash Community

Some tips for your code:

  • You don’t need a button, just put dcc.Input value as Input (instead of State) and Dash will fire the callback every time the user change the ticker.
  • Instead adding value= “ “ to the dcc.Input, add any ticker like value=“AMZN”, Dash execute all the callbacks when the page is loaded, and in your case the None value can’t be transform to uppercase.
3

Hi @Eduardo,

thank you very much for your advice.
You are right - a suggestion based searchbar would be the best.

For the code I took some from a Udemy course:
https://github.com/cryptopotluck/alpha_vantage_tutorial/blob/master/_alpha_vantage/rsi_bb_dashbord.py