Black Lives Matter. Please consider donating to Black Girls Code today.

XMLHTTP Request

I started using dash and kind of new to it.

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’d recommend reading through the entire tutorial. Section 2 explains how to retrieve data by the client from the server: https://dash.plot.ly/getting-started-part-2

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)

If you need to make a custom request to a different server, you’ll have to wrap that logic in your own custom Dash component, see https://dash.plot.ly/plugins