I have a flask web app and I use Bokeh for creating interactive plots. So I pass “div” and “script” generated by Bokeh components to my HTML page (I am using Jinja2 template). My question is “Can I update the “data” inside the var all_models dictionary used by Script”? I would like to update data on the server-side and pass the new data to the <script> to have updated data on my client-side without reloading the page. I do not want to use bokeh-server, since I do not have enough knowledge about it. Can I use any functionality in Jinja2 template to replace the data in the script variable?
Sample generated script by Bokeh:
<script type="text/javascript">
Bokeh.$(function() {
var all_models = [{"attributes": ...... "data":{"y": [1,2,4], "x":[2,3,4]}...];
[bigreddot](http://stackoverflow.com/users/3406693/bigreddot) [Apr 6 at 19:44](http://stackoverflow.com/questions/36459924/update-bokeh-plot-data-on-the-server-side?noredirect=1#comment60533669_36459924)
all_models is only used at initialization. If you want to update data (from JavaScipt) you will have to root around Bokeh.index (or some other method) to find the data sources you want to update, and then update the data property on them.
Hamid K.
Is there any documentation out to explain how to do it? How do you guys handle this issue? my values for the plot are updating every 5 seconds.
[bigreddot](http://stackoverflow.com/users/3406693/bigreddot) [Apr 6 at 20:12](http://stackoverflow.com/questions/36459924/update-bokeh-plot-data-on-the-server-side?noredirect=1#comment60534610_36459924)
All the JS integrations are quite new, I am afraid any documentation is limited to examples at the moment. (Our original intent was to make a library that *didn't* focus on JS, after all...) A new JS API was just merged, so documenting that thoroughly has risen in priority. Once you have a data source, you can update it with code similar to the callback code here: [bokeh.pydata.org/en/latest/docs/user_guide/…](http://bokeh.pydata.org/en/latest/docs/user_guide/interaction.html#customjs-for-widgets)
And as for getting ahold of the data source in the first place, it is in Bokeh.index which is a mapping of id's to bokeh models. It's basically all_models except the JSON has been converted to real backbone models. You can search through it for the model you want.
Hamid K
You add the callback to a widget and when an event happens like 'change' in slider value, then you update the data for the particular plot which uses the callback function. In my case, every five seconds I need to call for the callback function so which widget do I need to use? then inside the call back function, I need to call for the python function to get the new data and assign to 'x' and 'y' to update my plot. So my question is which Bokeh widget do I need to use? and what should be the 'event'? sorry for lack of JS knowledge.
[bigreddot](http://stackoverflow.com/users/3406693/bigreddot) [Apr 7 at 16:06](http://stackoverflow.com/questions/36459924/update-bokeh-plot-data-on-the-server-side?noredirect=1#comment60572871_36459924)
There's not a widget that will help here. They only invoke callbacks on UI events (e.g. button press, menu selection) there is no "periodic" (e.g. every 5 seconds) JS callback. For this there are three options: 1)AjaxDataSource (if your data happens to be available via a REST API), 2) custom JS that you write insert into your own HTML document template to update the plot, 3) use the bokeh server
Hamid k
Could you please provide more information about how to use the bokeh-server or AjaxDataSoure to accomplish this? I know how to use .ajax or .getJSON to get the data from my server to client but how can I embed the information into the generated bokeh <script> is what I do not know (can you provide more information about bokeh.index? ).
Or using bokeh-server, I need to run bokeh-server side by side of my web-server and then what are the needed steps that I need to perform to accomplish this?