# Javascript Callbacks, initial data

**URL:** <https://community.plotly.com/t/javascript-callbacks-initial-data/29754>\
**Category:** Dash Python\
**Created:** [October 8, 2019, 10:41pm UTC](https://community.plotly.com/t/javascript-callbacks-initial-data/29754 "2019-10-08T22:41:23Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![jauerb](https://avatars.discourse-cdn.com/v4/letter/j/958977/32.png) [@jauerb](https://community.plotly.com/u/jauerb)\
**Post date:** [October 8, 2019, 10:41pm UTC](https://community.plotly.com/t/javascript-callbacks-initial-data/29754/1 "2019-10-08T22:41:23Z")

</div>

I just discovered Javascript callbacks, which are awesome for speeding up my app by saving round trips to the server and make functionality possible that would be unusably slow otherwise.

I have figured out a way to do what I am trying, but it seems pretty hacky, so I am wondering if there is a better alternative.

Here is my use case:

I have time series data containing an input variable and a response variable and I am using a slider to adjust how much the response variable is shifted relative to the input variable.

So, on page load (or some other event) I query my database to get the two time series, I then JSON encode that data and put it inside a hidden div. Then when the slider moves I call my JS callback, which takes the slider value as an Input and the hidden div contents as a State variable, which I then parse back into an object, slice the data as appropriate, and return the updated figure.

Is this the best way to do this? Or is there some way to have my python code directly set the value of a Javascript variable without using this hidden div workaround?

---

<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:** [October 8, 2019, 11:42pm UTC](https://community.plotly.com/t/javascript-callbacks-initial-data/29754/2 "2019-10-08T23:42:29Z")

</div>

This sounds like the best way to do this. I believe @sjtrny is working through this in [Is it possible to update just `layout`, not whole `figure` of Graph in callback?](https://community.plotly.com/t/is-it-possible-to-update-just-layout-not-whole-figure-of-graph-in-callback/8300/12) as well. The only thing to add would be to use `dcc.Store` instead of `html.Div` in case the “hidden div” feels too hacky. I don’t think there are any performance issues with using `html.Div` though.

The nice thing about updating a clientside store (html.Div or dcc.Store) is that _other_ components can use this data as well like other charts or other data tables.

A flow that we imagined when writing this feature was: `app.layout` as a function which embeds a dataset in `dcc.Store`. `dcc.Store` then updates a `data_table.DataTable` directly (with a clientside callback) and then the `DataTable` updates a series of graphs with `derived_virtual_data` property. Then, the table is a natural UI for doing filtering & sorting of the data in the table _and_ in the graphs without needing to write _any_ extra Python code!

---

<div class="post-metadata">

**Author:** ![jauerb](https://avatars.discourse-cdn.com/v4/letter/j/958977/32.png) [@jauerb](https://community.plotly.com/u/jauerb)\
**Post date:** [October 9, 2019, 12:36pm UTC](https://community.plotly.com/t/javascript-callbacks-initial-data/29754/3 "2019-10-09T12:36:00Z")

</div>

Thanks for the response. I will need to look into using `derived_virtual_data` properties more, but that sounds like a very nice flow.

Also, I might see if I can get this working with [transcrypt](https://www.transcrypt.org/) so I can stick to writing Python 😉