I see that the data url has to be specified in python and python (server side) retrieves the data.
I am following the simple getting started example for bar charts. https://dash.plot.ly/getting-started
However, I want the data to be retrieved by the client. How is it possible to get this done. I want the user to specify the city (in a text box) and data for that city is retrieved on the go (using XMLHttpRequest somehow).
How can this be accomplished? Any example code?
Thanks for the help!
I actually did read the getting started. Here is my script:
So, what I am trying to accomplish is the following. I have a dropdown menu. To populate it I need to query an independent API (port 5000). The user can select one of the items (from several thousand), select a year from the dcc.Slider. And I have a callback which retrieves (from the API on port 5000) specific data to the item selected in Dropdown and the year.
Note that my dash app is running on port 8050.
The callback does the retrieval. I am wanting this retrieval to be handled by browser’s XMLHttpRequest rather than this being carried through the server which is serving dash app.
"""
Basic drop down with dash (using my data)
"""
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
app = dash.Dash()
app.css.append_css({"external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"})
import urllib2
import ssl
import json
class Retriver:
def __init__(self, server_base_url):
self.ctx = ssl.create_default_context()
self.ctx.check_hostname = False
self.ctx.verify_mode = ssl.CERT_NONE
self.server_base_url = server_base_url
def geturl_as_raw( self, url ):
contents = urllib2.urlopen(self.server_base_url+url, context=self.ctx).read()
return contents
def geturl_as_dict( self, url ):
response = urllib2.urlopen(self.server_base_url+url, context=self.ctx)
data = json.load( response )
return data
r = Retriver('https://localhost:5000')
url = '/industryInfo/HK/'
url = '/industryInfo/HK/Automotive:Agriculture/all'
data_dict = r.geturl_as_dict(url)
# Retrives a nested json object which is set into dcc.Dropdown
options = []
for industry in data_dict.keys():
for sector in data_dict[industry].keys():
for ticker in data_dict[industry][sector].keys():
label = '%s %s' %(ticker, data_dict[industry][sector][ticker]['companyName'])
options.append( {'label': label, 'value': ticker} )
dropdown = dcc.Dropdown( options=options, multi=False, id='my-dropdown' )
slider = dcc.Slider( min=2011, max=2017, step=1, marks={i: '%d' %(i) for i in range(2011,2017) }, id='my-slider' )
app.layout = html.Div( [html.Div([dropdown, slider]), html.Div( 'output goes here', id='output') ] )
@app.callback(
Output( component_id='output', component_property='children' ),
[Input(component_id='my-dropdown', component_property='value') , Input(component_id='my-slider', component_property='value') ]
)
def update_info( input_value, input_value2 ):
# return 'you have entered: %s' %(input_value) + str(input_value2)
return r.geturl_as_raw( '/tickerInfo/%s/description' %(input_value) )
if __name__ == '__main__':
app.run_server(debug=True)
