# Client side data from external source

**URL:** <https://community.plotly.com/t/client-side-data-from-external-source/41118>\
**Category:** Dash Python\
**Created:** [June 16, 2020, 3:39pm UTC](https://community.plotly.com/t/client-side-data-from-external-source/41118 "2020-06-16T15:39:32Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![grillard](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/grillard/32/11363_2.png) [@grillard](https://community.plotly.com/u/grillard)\
**Post date:** [June 16, 2020, 3:39pm UTC](https://community.plotly.com/t/client-side-data-from-external-source/41118/1 "2020-06-16T15:39:32Z")

</div>

Hello!

I am trying to figure out if there is a way to get data from an external url (that returns a json), but with the data fetched by the client side and then returned to the dash app.

Here is an example that uses data of an external API to make a simple plot. I have commented a working serverside solution, but I need to do the API query on the client side, which I cannot make it work.

```auto
import pandas as pd
import numpy as np
import plotly.graph_objects as go

import dash
import dash_core_components as dcc
import dash_html_components as html

from dash.dependencies import Input, Output, State, ClientsideFunction
from dash.exceptions import PreventUpdate

dash_app = dash.Dash( __name__ )
server = dash_app.server

def makeplot(df):
    if df is None:
        X=[]
        Y=[]
        name=''
        tt=''
    else:
        X=df['Date']
        Y=np.log10(df['Cases'])
        name='Covid_{0}'.format(df['CountryCode'][0])
        tt=df['Country'][0]
    fig = go.Figure()
    fig.add_trace(go.Scatter(x=X, y=Y,
                        mode='lines',
                        name=name))
    fig.update_layout(title=tt)
    return fig

dash_app.layout = html.Div(
    id='app-body',
    children=[
        html.Div(dcc.Input(id='input-on-submit', type='text')),
        html.Button('Submit', id='submit-val'),
        html.Div(dcc.Graph(figure=makeplot(None), id='plot',config={'scrollZoom': True})),
        dcc.Store(id='store_clientside',data=['123'])
    ]

)
############################
#Working server-side option#
############################
# @dash_app.callback(
# Output('plot','figure'),
# [Input('submit-val', 'n_clicks')],
# [State('input-on-submit','value')])
# def update_data(n,value):
# if value is None:
# raise PreventUpdate
# url='https://api.covid19api.com/dayone/country/{0}/status/confirmed'.format(value.lower())
# df=pd.read_json(url)
# return makeplot(df)
############################

############################
#####Clientside attemp #####
############################
dash_app.clientside_callback(
    ClientsideFunction(
        namespace='clientside',
        function_name='test_url_fetch'
    ),
    Output('store_clientside', 'data'),
    [Input('submit-val', 'n_clicks')],
    [State('input-on-submit','value')]
)

@dash_app.callback(
    Output('plot','figure'),
    [Input('store_clientside', 'data')])
def update_data(data):
    if data is None:
        raise PreventUpdate
    df=pd.read_json(data)
    return makeplot(df)
############################

if __name__ == ' __main__':
    # dash_app.run_server(debug=True)
    dash_app.run_server(host='0.0.0.0', port=8080, debug=True)

```

and the .js

```auto
if(!window.dash_clientside) {window.dash_clientside = {};}
window.dash_clientside.clientside = {
	test_url_fetch: function (n,country){
		console.log(n,country)
		return fetch('https://api.covid19api.com/dayone/country/' + country + '/status/confirmed')
	}
}

```

I understand that dash clientside does not handle promises, so this might be a dead end and that is ok, I was just wondering if there is a workaround, or something that could be done in the javascript side that I am missing.

For completeness, this is the error I get on the browser console:

> The clientside function clientside.test\_url\_fetch returned a Promise instead of a value. Promises are not supported in Dash clientside right now, but may be in the future.

Many thanks for the help!

---

<div class="post-metadata">

**Author:** ![Fernandes](https://avatars.discourse-cdn.com/v4/letter/f/94ad74/32.png) [@Fernandes](https://community.plotly.com/u/Fernandes)\
**Post date:** [August 14, 2020, 11:58am UTC](https://community.plotly.com/t/client-side-data-from-external-source/41118/2 "2020-08-14T11:58:47Z")

</div>

I wanted this feature as well…  
It would help to take a lot of the load from the server…

But I am stuck same as you… Guess we have to hope they implement this feature.

I created an Issue for this feature in the project’s github.

> <https://github.com/plotly/dash/issues/1364>
>
> It would be a nice funcionallity to be able to return promises in the clientside callbacks.
> Right now it is impossible to...

Try commenting on it so we can get more visibility for this feature.

---

<div class="post-metadata">

**Author:** ![Emil](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/emil/32/31734_2.png) [@Emil](https://community.plotly.com/u/Emil)\
**Post date:** [August 14, 2020, 12:38pm UTC](https://community.plotly.com/t/client-side-data-from-external-source/41118/3 "2020-08-14T12:38:14Z")

</div>

If you are rendering the plots on the server anyway, is there any benefit in fetching the data client side?

---

<div class="post-metadata">

**Author:** ![PeterC](https://avatars.discourse-cdn.com/v4/letter/p/f9ae1b/32.png) [@PeterC](https://community.plotly.com/u/PeterC)\
**Post date:** [August 21, 2020, 7:46pm UTC](https://community.plotly.com/t/client-side-data-from-external-source/41118/4 "2020-08-21T19:46:57Z")

</div>

How would I render an updated graph on the clientside after also retrieving the data on the clientside?

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [August 25, 2020, 4:56am UTC](https://community.plotly.com/t/client-side-data-from-external-source/41118/5 "2020-08-25T04:56:32Z")

</div>

> [@Fernandes](#):
>
> Guess we have to hope they implement this feature.

Some alternatives to waiting 😃:

- You can implement this feature yourself by making a pull request into the project! Most of the clientside callbacks improvements have been made by community members. We will review your work in a friendly and timely manner 🙂
- You can fund our development to get this feature on our immediate roadmap: [Consulting, Training & Open-Source Development](http://plotly.com/products/consulting-and-oem)

> [@Emil](#):
>
> If you are rendering the plots on the server anyway, is there any benefit in fetching the data client side?

This is a good point - You could fetch the data in Python and then store that data in a `dcc.Store`. Then, all of your updates thereafter could be made clientside.

---

<div class="post-metadata">

**Author:** ![Fernandes](https://avatars.discourse-cdn.com/v4/letter/f/94ad74/32.png) [@Fernandes](https://community.plotly.com/u/Fernandes)\
**Post date:** [August 25, 2020, 8:09am UTC](https://community.plotly.com/t/client-side-data-from-external-source/41118/6 "2020-08-25T08:09:15Z")

</div>

Hi guys tank you for the replies!  
@Emil If we are talking about just one user using your app, then there isn’t a great benefit to it… But if we are talking about hundreds/thousands of users simultaneously using the app we are putting the server in a lot of load.  
Especially if it is something that needs to be updated in shorts intervals of time.

---

<div class="post-metadata">

**Author:** ![Fernandes](https://avatars.discourse-cdn.com/v4/letter/f/94ad74/32.png) [@Fernandes](https://community.plotly.com/u/Fernandes)\
**Post date:** [August 25, 2020, 8:10am UTC](https://community.plotly.com/t/client-side-data-from-external-source/41118/7 "2020-08-25T08:10:19Z")

</div>

Well I can try looking into it… in my free time. Any pointers on were to start looking??

---

<div class="post-metadata">

**Author:** ![Emil](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/emil/32/31734_2.png) [@Emil](https://community.plotly.com/u/Emil)\
**Post date:** [August 25, 2020, 8:44am UTC](https://community.plotly.com/t/client-side-data-from-external-source/41118/8 "2020-08-25T08:44:35Z")

</div>

I am not sure that you are right. If you are rendering the figure on the server, i don’t see why it should be any faster fecthing the data client side and then sending them to the server as compared to fetching the data to the server directly. If you are rendering the figure clientside, it is of course a completely different story.

If multiple clients would need the same data, the server side fetching solution could be made even more performant by caching the data and reusing them across clients.

---

<div class="post-metadata">

**Author:** ![Fernandes](https://avatars.discourse-cdn.com/v4/letter/f/94ad74/32.png) [@Fernandes](https://community.plotly.com/u/Fernandes)\
**Post date:** [August 25, 2020, 11:22am UTC](https://community.plotly.com/t/client-side-data-from-external-source/41118/9 "2020-08-25T11:22:18Z")

</div>

In my particular use case it’s user specific data, each user as it own data. That needs to be fetch from an external server.  
I can see your point if the data was the same for all users. But that is not the case for me.

And I can also see what you mean in terms of speed. But imagine that you max or are closing to max out your server resources (e.g cpu, memory, etc…). The requests between the clientside and the server will take longer to be resolved.

Performing external calls in the clientside would allow to offload some of that load to the clients.  
Imagine you have 1000 clients connected to your dash server. The server has to perform 1000 requests and wait for the responses + render the layout.

While if it was in the clientside each user would perform 1 request to the external server and the server only needs to render the layouts with the information received.

---

<div class="post-metadata">

**Author:** ![yuralves](https://avatars.discourse-cdn.com/v4/letter/y/8797f3/32.png) [@yuralves](https://community.plotly.com/u/yuralves)\
**Post date:** [September 24, 2020, 12:18am UTC](https://community.plotly.com/t/client-side-data-from-external-source/41118/10 "2020-09-24T00:18:49Z")

</div>

I have managed to do this with XMLHTTP in javascript. Now fetching data is made on client side and rendering on the server (maybe later on i will migrate the rendering into client aswell, let’s see how it goes):

.js file:

```auto
if(!window.dash_clientside) {window.dash_clientside = {};}
window.dash_clientside.callback_filters = {
    get_vertical: function (country){
        const request = new XMLHttpRequest();
        request.open('GET', 'some_url', false); // true creates a promise, so it wont work
        request.setRequestHeader('authorization', 'Bearer {API_KEY}');
        request.send();
        const vertical = [];
        for (const key of JSON.parse(request.response).filters) {
              vertical.push({'label': key, 'value': key})
         }
        // console.log(vertical);

        return vertical;
    }
}

```