BokehJS : how to create a slider?

Community Support
1

I’m experimenting with BokehJS only (and no Python code). As an example, the code below works, with JS only.

Similarly, how to create a slider with BokehJS and no Python code?

<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.1.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-api-2.4.1.min.js"></script>
<div id="chart1">
</div>
<script>
var plt = Bokeh.Plotting, M = 100, xx = [], yy = [], colors = [], radii = [];
for (var y = 0; y <= M; y += 4) {
    for (var x = 0; x <= M; x += 4) {
        xx.push(x);
        yy.push(y);
        colors.push(plt.color(50+2*x, 30+2*y, 150));
        radii.push(Math.random() * 0.4 + 1.7)
    }
}
var source = new Bokeh.ColumnDataSource({data: {x: xx, y: yy, radius: radii, colors: colors}});
var p = plt.figure({title: "Colorful Scatter", tools: "pan,crosshair,wheel_zoom,box_zoom,reset,save"});
var circles = p.circle({ field: "x" }, { field: "y" }, {source: source, radius: radii, fill_color: colors, fill_alpha: 0.6, line_color: null});
plt.show(p, "#chart1");
</script>
2

All of Bokeh’s models are directly in the top-level Bokeh namespace. [1] Here is an example that creates a ColumnDataSource:

Creating a Slider would be completely analogous: new Bokeh.Slider({...})

  1. Not sure how that ended up the case, I think they should have properly been put in Bokeh.Models, but here we are. ↩︎

3

Actually I spoke too soon. I looks like only they base bundle models are currently included in the BokehJS API, and that does not include widgets like Slider. I think adding them would be straightforward, though. Please open a GitHub Issue to request it.

4

Thanks @Bryan! I created the issue here: Make Slider and Image available in BokehJS (JS only) · Issue #12638 · bokeh/bokeh · GitHub

5

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.