# Handle global dataframe

**URL:** <https://community.plotly.com/t/handle-global-dataframe/51914>\
**Category:** Dash Python\
**Created:** [April 12, 2021, 7:53am UTC](https://community.plotly.com/t/handle-global-dataframe/51914 "2021-04-12T07:53:03Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![BMWE](https://avatars.discourse-cdn.com/v4/letter/b/f9ae1b/32.png) [@BMWE](https://community.plotly.com/u/BMWE)\
**Post date:** [April 12, 2021, 7:53am UTC](https://community.plotly.com/t/handle-global-dataframe/51914/1 "2021-04-12T07:53:03Z")

</div>

Hi,

I’d like to develop a dashboard for real time handling for multi data.  
The code is spitted in few files

```auto
#index.py

import os
import base64
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import plotly.subplots as psp
from app import app
from dash.dependencies import Input, Output
from data.prepare_data import df
from pathlib import Path
from itertools import groupby
from operator import itemgetter

app.layout = html.Div([    
    dcc.Interval(id='graph-update', interval=1000),
    html.Div([
        html.Div([
            html.H3("Path", style={'text-align': 'center'}),
            dcc.Graph(id='Path', figure={})],
            className="six columns"), # see https://codepen.io/chriddyp/pen/bWLwgP

        html.Div([
            html.H3("Angles", style={'text-align': 'center'}),
            dcc.Graph(id='Angles', figure={})],
            className="six columns"),
    ],
        className="row"),
])

@ app.callback([Output('Path', 'figure'),
                Output('Angles', 'figure'),],
               [Input('graph-update', 'n_intervals')])
def update(n):
    print(n)

	update_data()
    #####################################################
    # Path
    #####################################################
    fig1 = psp.make_subplots(rows=1,
                             cols=1,
                             shared_xaxes=True)

    fig1.append_trace({'x': df.Long,
                       'y': df.Lat,
                       'type': 'scatter',
                       'name': 'myPath'},
                      1, 1)    
    fig1.update_scenes(aspectmode="cube")

    #####################################################
    # Angle points
    #####################################################
    fig2 = px.scatter(df,
                      x='angle1',
                      y='angle2',
                      range_x=[0, 360],
                      range_y=[0, 180],
                      )

    fig2.add_layout_image(
        x=0,
        sizex=360,
        y=180,
        sizey=180,
        layer="below",
        xref="x",
        yref="y",
        sizing="stretch",
        source='data:image/png;base64,{}'.format(image1.decode())
    )

    fig2.update_xaxes(tickvals=[0, 30, 60, 90, 120,
                                150, 180, 210, 240, 270, 300, 330, 360])
    fig2.update_yaxes(tickvals=[0, 10, 20, 30, 40, 50, 60, 70,
                                80, 90, 100, 110, 120, 10.3, 140, 150, 160, 170, 180])

    return fig1, fig2

if __name__ == ' __main__':
    initialize_df()
    app.run_server()

```

```auto
#prepare_data.py

def initiazlie_df():
     global df
     df=pd.DataFrame({ ... some data...
         })

def update_data():
    df.fillna(method='pad')
... do some othe ractions...

```

```auto
#ReadData.py
read data from network and parse it

```

On the `df.fillna(method='pad')` I’m receiving an error `local variable 'df' referenced before assignment`. However, it was initialized.

1. how to solve this issue

---

<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:** [April 12, 2021, 11:30am UTC](https://community.plotly.com/t/handle-global-dataframe/51914/2 "2021-04-12T11:30:56Z")

</div>

The use of global variables is discouraged in Dash, i.e. the recommended solution is to restructure the app not to use them.

---

<div class="post-metadata">

**Author:** ![BMWE](https://avatars.discourse-cdn.com/v4/letter/b/f9ae1b/32.png) [@BMWE](https://community.plotly.com/u/BMWE)\
**Post date:** [April 12, 2021, 11:59am UTC](https://community.plotly.com/t/handle-global-dataframe/51914/3 "2021-04-12T11:59:47Z")

</div>

So what options do i have for real time data update?

---

<div class="post-metadata">

**Author:** ![Eduardo](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/eduardo/32/13310_2.png) [@Eduardo](https://community.plotly.com/u/Eduardo)\
**Post date:** [April 12, 2021, 12:58pm UTC](https://community.plotly.com/t/handle-global-dataframe/51914/4 "2021-04-12T12:58:58Z")

</div>

Hi @BMWE

I think this server side caching can help:

> [@Show and Tell - Server Side Caching](https://community.plotly.com/t/show-and-tell-server-side-caching/42854):
>
> The Store component in Dash makes it easy to [share state between callbacks](https://dash.plotly.com/dash-core-components/store). Under the hood, the data are stored as JSON in the browser. This approach is chosen to keep the server stateless (i guess), but it has a few drawbacks As the data are stored in JSON, you must convert objects from/to JSON in the beginning/end of each callback Since the callbacks are executed server side while the data are stored client side, the data will be sent across the wire every time a callback is invoked The maxi…