# Dash Extensions Question

**URL:** <https://community.plotly.com/t/dash-extensions-question/50642>\
**Category:** Dash Python\
**Created:** [March 3, 2021, 6:59pm UTC](https://community.plotly.com/t/dash-extensions-question/50642 "2021-03-03T18:59:50Z")\
**Posts on this page:** 5\
**Page:** 1

<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:** [March 3, 2021, 6:59pm UTC](https://community.plotly.com/t/dash-extensions-question/50642/1 "2021-03-03T18:59:50Z")

</div>

Hi @Emil ,

I’m enjoing some of your interesting work. 😀

Lottie is very interesting and have a lot of nice options to use in the page.

Burger seams to be a nice way to add Menues, Is it possible to have a short example in Dash? 🤔  
Just to understand how to use it.

Another question: when you described the time consumption using dcc.Store you mentioned that it spends time converting the data to and from json, in your server side caching solutions it is also a requirement to do that or exist a way that do not need that conversion?

Thanks again for your time.

Eduardo

---

<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:** [March 3, 2021, 8:13pm UTC](https://community.plotly.com/t/dash-extensions-question/50642/2 "2021-03-03T20:13:29Z")

</div>

Thanks! Here is a small example using the Burger menu,

> <https://github.com/thedirtyfew/dash-extensions/blob/master/examples/multipage_app.py>

However, I agree that it would be good with a few more. Also, there are some options in the underlying React component that haven’t been exposed. So this component still needs some work.

When you use the server side caching solution, you don’t need to do the conversion to JSON. Hence you can return e.g. a data frame directly as in this example,

> <https://github.com/thedirtyfew/dash-extensions/blob/master/examples/callback_serverside_output.py>

---

<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:** [March 3, 2021, 11:10pm UTC](https://community.plotly.com/t/dash-extensions-question/50642/3 "2021-03-03T23:10:55Z")

</div>

Hey @Emil

Thank you very much for your help. 😀

---

<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:** [March 4, 2021, 2:02am UTC](https://community.plotly.com/t/dash-extensions-question/50642/4 "2021-03-04T02:02:45Z")

</div>

Hey @Emil

I run this code to check the use of the **ServersideOutput** without json data:

```auto
import pandas as pd
from datetime import datetime as dt
from datetime import timedelta

from pandas_datareader import data as web

import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objects as go
from dash_extensions.enrich import Dash, Output, Input, Trigger, ServersideOutput

app = Dash()
app.layout = html.Div([
    dcc.Input(id="last_ticker", value="AAPL"),
    dcc.Loading(dcc.Store(id='historic_prices'), fullscreen=True, type="dot"),
    dcc.Graph(id='my_graph')
])

@app.callback(ServersideOutput('historic_prices', 'data'),
              [Input('last_ticker', 'value')])
def update_store(ticker):
    start_date = (dt.now() - timedelta(days = 650)).strftime("%Y/%m/%d")
    pricesdf = web.DataReader(ticker.strip(), data_source='yahoo', start=start_date, end=dt.now())
   
    
    return pricesdf

@app.callback(Output('my_graph', 'figure'),
              [Input('historic_prices', 'data')])
def update_graph(historic_prices):

    figura = {"data": [go.Scatter(x=historic_prices.index, y=historic_prices.Close, line={"color": "#97151c"})],
           "layout": go.Layout(autosize=True, height=305, font={"family": "Raleway", "size": 12},
                     margin={"r": 60, "t": 25, "b": 0, "l": 40}, titlefont={"family": "Raleway", "size": 10})}             

    
    return figura

if __name__ == ' __main__':
    app.run_server(debug=True)

```

And it works as expected:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/8/8586337fa89c53a15748a4ee2aeb4a23e7dc9d0c.png)

But when I use the same info in my app, I receive the following error:

![image1](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/a/a873145659288c8f0c8bbc4f02c14aa63499a296.png)

I am using:

```auto
from dash_extensions.enrich import Dash, Output, Input, Trigger, ServersideOutput, State

```

I can’t figure out why it has this error if it works ok in the test? 🤔

And if I convert the DataFrame into json file it works without any Error.

Thanks again 🥴

---

<div class="post-metadata">

**Author:** ![anish](https://avatars.discourse-cdn.com/v4/letter/a/3bc359/32.png) [@anish](https://community.plotly.com/u/anish)\
**Post date:** [March 24, 2021, 3:28pm UTC](https://community.plotly.com/t/dash-extensions-question/50642/5 "2021-03-24T15:28:32Z")

</div>

Not sure why the example doesn’t have it but when you define the app, you should include `ServersideOutputTransform()` in it.

This is from the readme of their Github page.

```auto
from enrich import DashProxy, MultiplexerTransform, ServersideOutputTransform, NoOutputTransform

app = DashProxy(transforms=[
    MultiplexerTransform(), # makes it possible to target an output multiple times in callbacks
    ServersideOutputTransform(), # enable use of ServersideOutput objects
    NoOutputTransform(), # enable callbacks without output
])

```