Hi Bokeh Community,
Trying to create a dropdown widget with values to control the color plotting metric. My larger case is having a map with polygons and various metrics to choose from for the coloring, so my sample case here is a somewhat simpler version with 2 polygon squares and coloring values (albeit kinda wonky - open to suggestions). I’m trying to do this as a standalone with JS, not bokeh server.
I’m trying to have a widget pass in the metric choice (cb_obj.value) through to the patches.fill_color position. Console logs show that the values are being passed correctly but don’t update properly.
from bokeh.models.widgets import Dropdown
from bokeh.io import show
from bokeh.layouts import Column, Row, Plot
from bokeh.models import ColumnDataSource, Patches, HoverTool, CustomJS, DataRange1d, LogColorMapper
from bokeh.palettes import YlGn as palette #YlGn RdYlGn
palette = palette[9]
palette.reverse()
color_mapper = LogColorMapper(palette=palette)
data = dict(x=[[1,2,2,1,1], [2,3,3,2,2]],
y=[[1,1,2,2,1], [2,2,3,3,2]],
z=[[1, 2, 3, 4, 5], [6, 7, 8, 9, 10]],
foo=[[10, 9, 8, 7, 6], [5, 4, 3, 2, 1]])
xdr = DataRange1d()
ydr = DataRange1d()
p = Plot(title=None, x_range=xdr, y_range=ydr, plot_width=300, plot_height=300,
h_symmetry=False, v_symmetry=False, min_border=0, toolbar_location=None)
patched = Patches(xs = 'x', ys = 'y', fill_color = {"field":"z", "transform":color_mapper}, fill_alpha=0.8, line_color = "white", line_width = 0.7)
p.add_glyph(ColumnDataSource(data), patched)
dropdown = Dropdown(label="Metric Selection For Color", menu=[("z", "z"), ("foo", "foo")])
callback_d = CustomJS(args=dict(patched=patched), code="""
var fill = patched.fill_color['field'];
console.log("patched.fill_color")
const value = cb_obj.value;
fill = value;
source.change.emit();
""")
dropdown.js_on_change("value", callback_d)
show(Column(dropdown, p))