Bokeh Static HTML very slow rendering in brower

Hi,

I have created a plot using bokeh which has multiple widgets to select the day of week and hour of the day to see the heatmap for that particular time.

But for the larger data, the static HTML file size increases to 100+ MBs, and then the rendering is very slow, 4-5, or even 10 minutes to load.

Is there anything I can do? Bokeh server isn’t possible for my use case. Can we split the HTML into multiple files and load the plot which is selected? or anything else?

If you cannot use any kind of server, then I think you’re out of luck because modern browsers prevent usage of the file schema in XHR requests. And you cannot embed the data directly into the web page itself because it won’t really solve anything.

There might be something that you can do that may buy you a couple of minutes. You can split the data into meaningful parts, compress the parts, encode the resulting binaries as base64, and embed the resulting strings in HTML as separate <script> entities with some specific IDs and a custom type attribute to prevent the browser from interpreting the data.
You would also need to embed some decompressing JS library to be able to decompress that data. Then, you could load it into Bokeh via some CustomJS.

Thanks @p-himik for the quick response, II’m sorry I couldn’t get the second part, 'm using python to generate the plot, How can I encode the data and the decode it in JS? I guess you are asking to create plot using JS?

Well, the plots that you see when you use Python are just the ones that JS creates based on the schema created by Python.
But I’m not talking about creating plots in JS explicitly. I’m talking about embedding data using JS.

I cannot really give any valuable details here about that approach because it’s a major undertaking. And even then, I’m not entirely sure that it will work and actually decrease the loading time. With hundreds of megabytes of data you will see long loading times no matter the approach.

If the data can be served from REST endpoints then an AjaxDataDataSource might be useful. You could set the polling interval to 0 and just use widgets to reconfigure the source to load from different URLs. (An untested idea, I’d advise proving out a toy proof-of-concept first).