Today I started using plotly for a simple dashboard app that I am building. The purpose of this app is to fetch some financial information about a specific company let’s say “AAPL” and then display it on dashboard. The code below works totally fine. However I wanted to add a new functionality as follows. I want it to suggest the ticker of the company as I am typing the name of the company. Let’s say for my case, as I am typing “tesla”, I would like it to suggest “TSLA” so that I can click on it and then the api will automatically fetch the information for me. I am using dash_core_components.Input. Is there anyway to do it with this?
import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
from pprint import pprint
from pandas_datareader import data as web
from datetime import datetime as dt
import FundamentalAnalysis as fa
api_key = "XX"
app = dash.Dash('Financial Market')
items = ['freeCashFlow', 'grossProfitRatio']
app.layout = html.Div([
dcc.Input(
id='textarea-state-example',
type='search',
value='AAPL',
style={'width': '10%', 'height': 20, 'display':'flex', 'justifyContent':'center'}
),
dcc.Graph(id=items[0]), dcc.Graph(id=items[1])
], style={'width': '250'})
for i in range(len(items)):
@app.callback(Output(items[i], 'figure'), [Input('textarea-state-example', 'value')])
def update_graph(selected_dropdown_value):
selected_dropdown_value = selected_dropdown_value.upper()
ctx = dash.callback_context
output_type = ctx.outputs_list['id']
if output_type == 'freeCashFlow':
statement = fa.cash_flow_statement(selected_dropdown_value, api_key, period="annual")
else:
statement = fa.income_statement(selected_dropdown_value, api_key, period="annual")
return {
'data': [{
'x': statement.columns,
'y': statement.loc[output_type]
}],
'layout': {'margin': {'l': 40, 'r': 40, 't': 40, 'b': 40}}
}
app.css.append_css({'external_url': 'https://codepen.io/chriddyp/pen/bWLwgP.css'})
if __name__ == '__main__':
# app.run_server()
app.run_server(debug=True)
First tip: instead tag Plotly in this case your question is related with Dash, tag Dash and you will receive more visits form Dash experts.
The best option for that is using dcc.Dropdown where the property Options is a Series of Company Names and then, ones the user select one company the dcc.Dropdown property value gives you the name selected, then in a callback you must find the corresponding company symbol/Ticker and return this symbol to the dcc.Input you have.
Thank you for the tip @Eduardo I did try to add tag but it wouldn’t find any.
I like your solution and I was able to implement it, however, there is one caveat. I have a long list of companies. Perhaps on the order of 1000s and I don’t want all of them to be dropped down once I start typing. In other words, I don’t want anything to show up in the dropdown, unless I start typing. I want the search box to be like the search box here. Any thoughts?
The link I gave you explains how to do that, as soon as the user types the name the app shows the companies that match that entry.
You can see that working in my app where the user can enter either the ticker (in an dcc.Input or the Name in a dcc.Dropdown (that will update the dcc.Input):
I use it for my own analysis, the idea is to have all the elements together and with colored values and with different graphs to quickly find and understand its fundamentals, and the same time with access to more details elements like the Reports filed in the SEC, the last Earning Calls conference or simple the last news in the main portals.
Your website has loads of data. I love it. Maybe you want to work a little bit on the searchbox because when I start clicking on it, it starts to act weirdly. But it’s a cool site.
Hi @rozi I am also struggling with the same problem, also trying to supply ticker symbols that matched the fully typed company name (ORCL for OrAcle and TSLA for tEsla as you suggest). The dcc.Dropdown | Dash for Python Documentation | Plotly example seems like this should work correctly, but even coding it correctly, Dash seems to throw in an unwanted layer of filtering. I am surprised that nobody from Plotly, especially @chriddyp responded to this since he pointed me in the right direction the first time around.
Let me know if you discover a breakthrough here and I will do the same. Would love to see what you create for your stock dashboard…
Hi Eduardo, that one is my first one which is a step in the right direction but does not solve Possible bug in dcc.Dropdown which is the same problem @rozi is facing
Hi Steve,
I couldn’t understand your explanation of the bug. I used your code in my app for finding the Company name and getting the Ticker and it works well: https://companyanalysis.herokuapp.com/
Except for the fact that do not show what the user is typing. But the search is done Ok.
Thats why I shared here.
@marketemp Sorry my late response. I was off from this project for a while. Did you end up solving this? If not, can you please elaborate about your problem please?
