Request for instructions or working demo to embed Bokeh plots in a Dash app

[urig]

Hello,

I’m new to Dash and plot.ly and I am enthusiastic about using them in an open source project](GitHub - entropy-lab/entropy) that I’m working on.

An important requirement for me is to be able to embed Bokeh plots in the Dash app but I’m having a hard time finding clear instructions on how to get this done and/or a working example.

Through a Plotly forum post I’ve found the dash-aletnative-viz repo with a demo that demonstrates just what I need.

Unfortunately, having run the demo I find that the code that embeds a Bokeh plot in the Dash app fails with this user warning:

usage.py:122: UserWarning:

Starting a Matplotlib GUI outside of the main thread will likely fail.

Here’s a screenshot:

Indeed the repo has an open issue about this problem that’s nearly a year old.

To conclude, may I politely ask - Is it possible to embed Bokeh charts in a Dash app and if so how can this be done?

Thanks,
urig

[urig]

I’ve taken some time to try and figure out what might be the root cause of the breakage in the demo. The most promising lead I’ve found is this warning in the browser developer tools console:

[bokeh] JS/Python version mismatch
[bokeh] Library versions: JS (1.4.0) / Python (2.4.1)

I’ve tried upgrading the npm dependency on bokehjs 1.2.0 to @bokehjs/bokejhs 2.4.0 both in the main package.json and in the one in the dash_alternative_viz folder and running npm install but that did not impact the warning.

Would love to dig deeper into this if anyone can suggest pointers on how to proceed. Tx

[jlfsjunior]

Hi,

You would also need to build the js library to see the effect (the package bump should be made in package.json).

Maybe the READMEs from dash-component-boilerplate can be handy for you, if you haven’t tried to build any custom components for dash yet.

Entropy sounds fun! Good luck with that!

[urig]

Thanks very much for your help and encouragement.

Following your advice I’ve created a new dash component using cookiecutter to educate myself and I’ve gone over the README and applied the instructions to my fork of dash_alternative_viz.

Having switched the dependency from bokkehjs to @bokeh/bokehjs I also needed to fix the require() in BokehJSON.react.js. Now npm run build:all fails with multiple instances of:

ERROR in ./node_modules/@bokeh/bokehjs/build/js/lib/core/layout/grid.js 118:72
Module parse failed: Unexpected token (118:72)
You may need an appropriate loader to handle this file type.

Do I need to get into webpack configuration (which I am not familiar with)? Or did I maybe go the wrong path here?

Thanks,
urig

[jlfsjunior]

I am a null with respect to webpack, so I won’t be of any help unfortunately

[AnnMarieW]

Hey @urig There might be an easier way…

I haven’t had time to try this, but Dash supports HoloViews

One of the major design principles of HoloViews is that the declaration of data is completely independent from the plotting implementation. Bokeh provides a powerful platform to generate interactive plots using HTML5 canvas and WebGL, and is ideally suited towards interactive exploration of data. By combining the ease of generating interactive, high-dimensional visualizations with the interactive widgets and fast rendering provided by Bokeh, HoloViews becomes even more powerful.

See more info in the HoloViews docs here:

http://holoviews.org/user_guide/Plotting_with_Bokeh.html

See how to use HoloViews with Dash here:

HoloViews | Dash for Python Documentation | Plotly

If this actually works for you, could you post an example back here? I’m sure lots of people will find that really helpful.

[urig]

Thanks @AnnMarieW.

I’ve taken a look at HoloViews as an abstraction over matplotlib, bokeh and plot.ly. It looks promising but I’m missing one thing that I’d like to offer my end users: Create a plot in either of the 3 libraries and have it shown in my Dash dashboard.

HoloViews doesn’t appear to work this way if I understand correctly. Rather, HoloViews lets me or my users define the plot using its API and then render it using either of the 3 libraries as “backends”.

If I do end up using HoloViews inside Dash I promise to share what I’ve learned online and to post a link here.

Thanks for your help!
urig

[galpha]

Hey,

I’m also looking to embed bokeh plot in my dash app. Were you able to accomplish this?

[urig]

Hi there.

I wish I could help but unfortunately the answer is no. I was not able to find a way to embed bokeh plots in a Dash application.

There is a demo application that the Dash team published in GitHub a few years ago but it’s not been maintained and is currently not working. It’s available here: GitHub - plotly/dash-alternative-viz: Dash components & demos to create Altair, Matplotlib, Highcharts , and Bokeh graphs within Dash apps. and I’ve shared my (limited) progress with it here: Unable to reproduce the output of usage.py · Issue #5 · plotly/dash-alternative-viz · GitHub

Best of luck,
Uri