How to update Bokeh plot data in client-side with JavaScript?

[jjepsuomi]

Hi! I’m a new user of Bokeh library and I am interested in updating my Bokeh plot data when client initiates a select event. I’m using Flask as my backend server. This is my goal:

I have a Bokeh plot presenting some data and a select dropdown -element, which contains the “refresh rate” time options in seconds. Basically this means that when the user selects e.g. an option “refresh rate 15 sec”, then the client-side JavaScript makes an AJAX call to the server, which returns new data, which is to be then updated in the Bokeh plot. This refresh operation is repeated every 15 seconds, as the user selected.

I have already accomplished this in the following way:

1. In the client-side, the user makes a selection in the select dropdown.
2. AJAX get-request is sent to Flask backend
3. Backend gets the data from database
4. Backend makes a new Bokeh plot and corresponding Bokeh script and returns to client (div + script)
5. The whole DIV-element in the client-side containing the Bokeh plot is replaced by the new Bokeh plot and the corresponding Bokeh script

Now, this process works, but what is a bit irritating to me is that when the plot is being updated in the client-side I can notice the plot with “old” data disappear for a split second and the the new plot is being rendered. So every time my plot is being updated (that is the whole plot div is being updated) I see this “flash”-effect when the old plot disappears and then the new is being rendered.

How can I accomplish the same goal such that this “flash”-effect would not occur? I was thinking could a possible solution be that instead of updating the whole plot div-element, could I just dynamically update the plots data source with JavaScript? So the containing plot would not be redrawn, only the data in the plot. Unfortunately I did not find examples on how to do this, any help appreciated?

My question summarized: How can I access and edit the data of a specific Bokeh plot in the client-side with JavaScript?

[Bryan]

Have you looked at Bokeh’s own AjaxDataSource?

Edit: The docs there are slightly out of date. The data returned by the endpoint no longer needs to match CDS format as it had to in the past. It’s now possible to provide a CustomJS callback as an adapter. (cc @timo)

[jjepsuomi]

Dear Bryan,

Thank you for your help. I have and I was under the impression that AjaxDataSource starts updating the plot data once the page loads, and then it keeps updating it according to the polling_interval. This would be fine for me if you could change the polling_interval time based on user selection event, or stop it if needed. Is is possible to stop the AjaxDataSource and initiate it again if needed in the client-side with CustomJS?

P.S. I think I could also achieve my goal by adding a select dropdown into my plot and add a CustomJS with an AJAX-request. At the moment, the AJAX-request is initiated by a dropdown-element which is not associated with the Bokeh plot, so I think I kinda misused the Bokeh-library in the first place.

[jjepsuomi]

I got it now solved. The trick was indeed using CustomJS with AJAX, setInterval, and select control attached to my plot. This post also helped me:

Flask + Bokeh AjaxDataSource

[Timo]

Thanks @jjepsuomi! I opened Update docs for AjaxDataSource · Issue #11968 · bokeh/bokeh · GitHub to update the docs!