How to render customJS in react

Community Support
, ,
1

I am trying to render a customJS json file in my react application.
In python I’m creating the json file like this:

from bokeh.embed import json_item
with open(path+ "/plot.json", "w") as f:
    json.dump(json_item(plot, "plotName"), f)

I have 2 issues

  1. Rendering Slider using CustomJS (from bokeh.models import ColumnDataSource, Slider, CustomJS,)
  2. Rendering Surface3d (3D plots)

The Error I’m getting in react is:

Uncaught (in promise) Error: could not resolve type ‘Slider’, which could be due to a widget or a custom model not being registered before first usage

Uncaught (in promise) Error: could not resolve type ‘Surface3d’, which could be due to a widget or a custom model not being registered before first usage

I’m a newbie here and trying to learn bokeh.
The versions of bokeh I’m using is:
python: 3.3.4
react: 3.3.4

Edit: I’m rendering the json file in react using window.Bokeh.embed
window.Bokeh.embed.embed_item(resp.data, 'plotDiv')

2

Two things:

  • Slider requires that the additional bokeh-widgets.js bundle also be loaded, in addition to bokeh.js
  • json_item does not currently work with custom extensions at all. If you need a custom extension (e.g. the “Surface3d”) then you will need to use one of the other embedding mechanisms, e.g. autoload_static or components.